Create reusable appBar in flutter

Question

I am trying to create a reusable appBar in my flutter app. The right bar button of the appbar should be controlled from main UI where it is added. I am able to create appBar and use it but I am not able to change the text color of the button on the appbar. Following is my code for creating appBar:

 class SocialAppBar extends StatefulWidget implements PreferredSizeWidget { AppBarConfig appBarConfig; bool isEnabled = false; VoidCallback rightButtonClickCallback; SocialAppBar({@required this.appBarConfig, @required this.rightButtonClickCallback}); @override State<StatefulWidget> createState() { return SocialAppBarState(); } @override Size get preferredSize => new Size.fromHeight(kToolbarHeight); } class SocialAppBarState extends State<SocialAppBar> { @override Widget build(BuildContext context) { return getAppBarWithProfilePic(); } Widget getAppBarWithProfilePic() { return AppBar( brightness: Brightness.light, backgroundColor: Colors.white, centerTitle: true, leading: IconButton( icon: Icon(Icons.arrow_back_ios), key: const Key("backButton"), onPressed: () { Navigator.pop(context); }), iconTheme: const IconThemeData( color: Colors.black54, //change your color here ), titleSpacing: 0.0, title: Row( children: <Widget>[ buildAvatar(), const SizedBox( width: 15, ), Text(widget.appBarConfig.fullName, style: TextStyle(color: AppColor.appbarTitleSecondaryColor, fontWeight: FontWeight.w400)) ], ), actions: <Widget>[ Container( alignment: Alignment.centerRight, padding: const EdgeInsets.only(left: 20, right: 20), child: InkWell( child: AutoSizeText( AppLocalizations.of(context).translate(GlobalString.labelNext), style: TextStyle(color: widget.isEnabled ? AppColor.blue : AppColor.greyMediumDark, fontSize: 16), textAlign: TextAlign.center, ), onTap: widget.rightButtonClickCallback, )) ], ); } setNextButtonColor(){ setState(() { }); } }

I am using the above appBar like following in my screen:

void initState() { super.initState(); appBar = SocialAppBar(appBarConfig: appBarConfig, rightButtonClickCallback: nextButtonClick); //Next button on app bar should be enabled when following textController has any text _textController.addListener((){ if (_textController.text.length > 0){ appBar.isEnabled = true; }else { appBar.isEnabled = false; } }); } @override Widget build(BuildContext context) { return BlocBuilder( bloc: _createPostBloc, builder: (context, state) { if (state is CreatePostNextState) {} return Scaffold( appBar: this.appBar, key: _scaffoldKey, backgroundColor: Colors.white, body: buildPageView(), ); }, ); }

I am able to set the Next button enable/disable with the above code but unable to change the color from Gray to Blue.

Aamil Silawat · Accepted Answer · 2020-03-04 05:03:47Z

6

reusable AppBar:

Widget appBar(String text, IconButton iconButton) { return AppBar( title: Text( text, style: AppTheme.screenTitleStyle(), ), centerTitle: true, leading: IconButton(icon: iconButton, onPressed: () {}), backgroundColor: AppTheme.mainThemeColor(), brightness: Brightness.dark, ); }

Use this appBar in Activity like this :

 appBar: appBar( "Change Password", IconButton( icon: Icon(Icons.arrow_back), onPressed: () { Navigator.of(context).pop(); }, ), ),

answered Mar 4, 2020 at 5:03

Aamil Silawat

8,2793 gold badges24 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Jhourlad Estrella Over a year ago

How do we deal with the AppTheme and iconButton not being recognized? Are there some things to import?

Aamil Silawat Over a year ago

@JhourladEstrella AppTheme is a class created by me,In AppTheme you can localize your colours, styles and much more and more important thing is it will be reusable you don't have to make style and fonts again and again, so that's why I localize all my styles and colours

Beginner_ Over a year ago

It may be my misunderstanding, but since appBar is not a Widget class, I think it's a good idea to set appBar to PreferredSizeWidget.

asterisk12 · Accepted Answer · 2020-03-03 21:55:48Z

Simple fix:

_textController.addListener((){ setState(() { if (_textController.text.length > 0){ appBar.isEnabled = true; }else { appBar.isEnabled = false; } }); });

It doesn't work for me. The color of the Next button remains the same.

Collectives™ on Stack Overflow

Create reusable appBar in flutter

2 Answers 2

3 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Related