Here we will learn how to load network data using custom tab bar and getx package during on toggle method. Here we will see how create a custom tab bar and toggle values and load data from network at the same time. So If you want to load data from network and toggle tabs and load different data, this is the best tutorial for you.
Widget _headTabs() { return Center( child: Container( width: 320, height: 48, margin: EdgeInsets.only(bottom: 0), padding: EdgeInsets.all(4), decoration: BoxDecoration( color: Colors.grey.withOpacity(0.5), borderRadius: BorderRadius.all(Radius.circular(5)), ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, crossAxisAlignment: CrossAxisAlignment.start, children: [ GestureDetector( child: Container( width: 150, height: 40, margin: EdgeInsets.only(bottom: 0), padding: EdgeInsets.all(0), decoration: controller.tabStatus.value?BoxDecoration( color: Colors.white, borderRadius: const BorderRadius.all(Radius.circular(5)), boxShadow: [ BoxShadow( color: Colors.grey.withOpacity(0.1), spreadRadius: 2, blurRadius: 3, offset: Offset( 0, 2), // changes position of shadow ), ], ):BoxDecoration(), child: Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( child: Text( "Chat", textAlign: TextAlign.center, style: TextStyle( color: Colors.blue, fontWeight: FontWeight.normal, fontSize: 14, ), ), ), ], ), ), onTap: () { controller.toggleTabs(); }), ], ))); }
The above code is responsive for working about buttons. We copied the code and put it one more time so get a second button.
Here is the controller. Controller has a obs variable and it’s value is changed over the time as we toggle the value.
class AppController extends GetConnect{
var tabStatus = true.obs;
void toggleTabs(){
tabStatus.value = !tabStatus.value;
if(tabStatus.value==true){
//network request
loadPopularProducts();
}else{
//another kind network request
loadRecommendedProducts();
}
}
loadPopularProducts() async {
Response response = await get(
"http://mvs.bslmeiyu.com/api/v1/products/popular"
);
print("my products are ${response.body.toString()}");
}
loadRecommendedProducts() async {
Response response = await get(
"http://mvs.bslmeiyu.com/api/v1/products/recommended"
);
print("my recommended products are ${response.body.toString()}");
}
@override
void onInit() {
// TODO: implement onInit
super.onInit();
loadPopularProducts();
//network request
}
}
Here’s the complete code
void main() {
Get.put(AppController());
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return
MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends GetView<AppController> {
const HomePage({Key? key}) : super(key: key);
Widget _headTabs() {
return Center(
child: Obx(()=>Container(
width: 320,
height: 48,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.all(4),
decoration: BoxDecoration(
color: Colors.grey.withOpacity(0.5),
borderRadius: BorderRadius.all(Radius.circular(5)),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GestureDetector(
child: Container(
width: 150,
height: 40,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.all(0),
decoration: controller
.tabStatus.value
? BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(5)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
spreadRadius: 2,
blurRadius: 3,
offset: Offset(
0, 2), // changes position of shadow
),
],
)
: BoxDecoration(),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(
"popular",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.normal,
fontSize: 14,
),
),
),
],
),
),
onTap: () {
controller.toggleTabs();
}),
GestureDetector(
child: Container(
width: 150,
height: 40,
margin: EdgeInsets.only(bottom: 0),
padding: EdgeInsets.all(0),
decoration: controller
.tabStatus.value ?
BoxDecoration(): BoxDecoration(
color: Colors.white,
borderRadius:
const BorderRadius.all(Radius.circular(5)),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.1),
spreadRadius: 2,
blurRadius: 3,
offset: Offset(
0, 2), // changes position of shadow
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Text(
"recommend",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.blue,
fontWeight: FontWeight.normal,
fontSize: 14,
),
),
),
],
),
),
onTap: () {
controller.toggleTabs();
}),
],
))));
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
_headTabs()
],
))),
);
}
}
Hi, thanks for the post, this is exactly what I was looking for.
Most welcome