Reputation: 8388
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.
Upvotes: 3
Views: 8144
Reputation: 8239
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();
},
),
),
Upvotes: 6
Reputation: 412
Simple fix:
_textController.addListener((){
setState(() {
if (_textController.text.length > 0){
appBar.isEnabled = true;
}else {
appBar.isEnabled = false;
}
});
});
Upvotes: -2