在flutter中创建可重复使用的appBar

问题描述 投票:0回答:2

我正在尝试在Flutter应用中创建可重复使用的appBar。应用栏的右栏按钮应从添加它的主UI中进行控制。我可以创建并使用appBar,但不能更改appbar上按钮的文本颜色。以下是我创建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(() {

    });
  }
}

我正在使用上面的appBar,如下所示:

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(),
        );
      },
    );
  }

我可以使用上面的代码来设置启用/禁用下一步按钮,但是无法将颜色从灰色更改为蓝色。

问候

flutter dart flutter-layout
2个回答
0
投票

简单修复:

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

0
投票

可重复使用的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,
  );
}

像这样在Activity中使用此appBar:

 appBar: appBar(
        "Change Password",
        IconButton(
          icon: Icon(Icons.arrow_back),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
      ),
© www.soinside.com 2019 - 2024. All rights reserved.