pankaj
pankaj

Reputation: 8388

Create reusable appBar in flutter

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

Answers (2)

Aamil Silawat
Aamil Silawat

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

asterisk12
asterisk12

Reputation: 412

Simple fix:

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

Upvotes: -2

Related Questions