Customised Flutter AppBar
Create centralized AppBar for all screens at one place.
In just 2 steps you create your own appBar.
1) Create AppBar.dart
here you have to pass true and false to showRight
and inside rightWidget pass widget from parent screen.(check step 2)
class AppBarWidget {
static getAppBar(String title, [showRight, rightWidget]) {
if (showRight == null) {
showRight = false;
}
return AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
backgroundColor: Colors.white,
title: Text(
title,
style: TextStyle(color: AppColors.btn_primary_dark_new,fontWeight: FontWeight.w600),
),
centerTitle: true,
leadingWidth: 100,
leading: Padding(
padding: const EdgeInsetsDirectional.only(start: 8.0),
child:InkWell(
onTap: () {
Get.back();
},
child: Row(
children: [
Icon(
Icons.arrow_back_ios_new,
color: Colors.green,
),
Padding(
padding: const EdgeInsetsDirectional.only(start: 8.0),
child: Text(
"Back",
style:
TextStyle(color: Colors.green, fontWeight: FontWeight.w500),
),
),
],
),
),
),
actions: [
showRight ? rightWidget : SizedBox.shrink(),
],
);
}
}
2) now how to access it from any screen?
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBarWidget.getAppBar('Home Screen', true, rightWidget()),
body: Container(
margin:
const EdgeInsetsDirectional.only(start: 8.0, top: 8.0, end: 8.0),
child: _body(),
),
);
}
And inside rightWidget() method you have to mention your icons in MainAcrivity.
rightWidget() {
return Padding(
padding: const EdgeInsetsDirectional.only(end: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
icon: Icon(Icons.search, color: Colors.black),
onPressed: () {
setState(() {
});
},
),
Icon(
Icons.filter_alt_outlined,
color: Colors.black,
),
],
),
);
}
Now just like rightWidget you can create your own left widget too inside leading.
class AppBarWidget {
static getAppBar(String title, [showRight, rightWidget,showLeft, leftWidget]) {
if (showRight == null) {
showRight = false;
}
return AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
backgroundColor: Colors.white,
title: Text(
title,
style: TextStyle(color: AppColors.btn_primary_dark_new,fontWeight: FontWeight.w600),
),
centerTitle: true,
leadingWidth: 100,
leading: showLeft ? leftWidget : SizedBox.shrink(),
actions: [
showRight ? rightWidget : SizedBox.shrink(),
],
);
}
}
Comments
Post a Comment