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

Popular posts from this blog

Flutter Bloc Pattern 8.0.0 Call API

Dynamic and responsive ListView in flutter

Manage Firebase storage using flutter