Flutter update the text in Appbar

Question

I need help with updating the Text in the Appbar to match the page that I'm currently am at.

So if I'm in the Settings Page then I need to display that in the AppBar text.

I'm adding my code and screenshot to better explain what I want to achieve.

Main.dart

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // This will change the statusbar text color.
    FlutterStatusbarcolor.setStatusBarWhiteForeground(false);

    return ChangeNotifierProvider<ThemeChanger>(
      create: (_) => ThemeChanger(CustomThemes.lightTheme.copyWith(
          textTheme:
              CustomThemes.textTheme(CustomThemes.lightTheme.textTheme))),
      child: MaterialAppWithTheme(),
    );
  }
}

class MaterialAppWithTheme extends StatefulWidget {
  @override
  _MaterialAppWithTheme createState() => _MaterialAppWithTheme();
}

class _MaterialAppWithTheme extends State<MaterialAppWithTheme> {

  var appTitle = 'Material Design';

  @override
  Widget build(BuildContext context) {
    final theme = Provider.of<ThemeChanger>(context);

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: appTitle,
      theme: theme.getTheme(),
      home: Scaffold(
        appBar: AppBar(
          title: Text(
            appTitle,
            style: TextStyle(color: CustomColors().novaWhite),
          ),
        ),
        body: BlocProvider<MdNavBloc>(
          create: (context) => MdNavBloc(),
          child: Stack(
            children: <Widget>[
              BlocBuilder<MdNavBloc, NavigationStates>(
                builder: (context, state) {
                  if (state is DashboardState) {
                    return DashBoardPage();
                  } else if (state is ExpensesState) {
                    return ExpensesPage();
                  } else if (state is NotificationsState) {
                    return NotificationsPage();
                  } else if (state is ErrorsState) {
                    return ErrorsPage();
                  } else if (state is SettingsState) {
                    return SettingsPage();
                  } else {
                    return DashBoardPage();
                  }
                },
              ),
              MdDrawer(title: appTitle, updateAppBarTitle: _updateAppBarTitle,),
            ],
          ),
        ),
      ),
    );
  }

  void _updateAppBarTitle(String newTitle) {
    setState(() {
      appTitle = newTitle;
    });
  }
}

MdDrawer.dart

class MdDrawer extends StatefulWidget {
  final String title;
  final Function(String) updateAppBarTitle;

  MdDrawer({Key key, this.title, @required this.updateAppBarTitle}) : super(key: key);

  @override
  MdDrawerState createState() {
    return new MdDrawerState();
  }
}

class MdDrawerState extends State<MdDrawer>
    with SingleTickerProviderStateMixin {
  bool isCollapsed = true;
  AnimationController _animationController;
  Animation<double> widthAnimation;
  int currentSelectedIndex = 0;

  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 300),
    );
    widthAnimation = Tween<double>(
      begin: Constants.minWidth,
      end: Constants.maxWidth,
    ).animate(_animationController);
  }

  @override
  Widget build(BuildContext context) {
    final MdNavBloc bloc = BlocProvider.of<MdNavBloc>(context);

    return AnimatedBuilder(
      animation: _animationController,
      builder: (context, widget) => getWidget(bloc, context, widget),
    );
  }

  Widget getWidget(MdNavBloc bloc, context, widget) {
    return Material(
      //elevation: 80.0,
      child: Container(
        width: widthAnimation.value,
        //color: drawerBackgroundColor,
        color: Theme.of(context).backgroundColor,
        child: Column(
          children: <Widget>[
            Container(
              margin: EdgeInsets.symmetric(
                vertical: Constants.containerMargin,
              ),
              child: MdListTile(
                title: 'Jaser Jsk',
                icon: Icons.person,
                animationController: _animationController,
              ),
            ),

            Divider(color: Colors.grey, height: 20.0),

            SizedBox(
              height: 8.0,
            ),
            Expanded(
              child: ListView.separated(
                separatorBuilder: (context, counter) {
                  return Divider(height: 12.0);
                },
                itemBuilder: (context, counter) {
                  return MdListTile(
                    onTap: () {

                      widget.updateAppBarTitle(navigationItems[counter].title);

                      setState(() {
                        bloc.add(navigationItems[counter].navigationEvent);
                        currentSelectedIndex = counter;

                        isCollapsed = !isCollapsed;
                        _animationController.reverse();
                      });
                    },
                    isSelected: currentSelectedIndex == counter,
                    title: navigationItems[counter].title,
                    icon: navigationItems[counter].icon,
                    animationController: _animationController,
                  );
                },
                itemCount: navigationItems.length,
              ),
            ),
            InkWell(
              onTap: () {
                setState(() {
                  isCollapsed = !isCollapsed;
                  isCollapsed
                      ? _animationController.reverse()
                      : _animationController.forward();
                });
              },
              child: AnimatedIcon(
                icon: AnimatedIcons.menu_close,
                progress: _animationController,
                color: Theme.of(context).accentColor,
                size: 40.0,
              ),
            ),
            SizedBox(
              height: 20.0,
            ),
          ],
        ),
      ),
    );
  }
}

Solution

You can update the text in the AppBar widget in the MaterialAppWithTheme by having a method that updates the text in the MaterialAppWithTheme and passing that as a callback to the MdDrawerState and executing that when you change the drawer item.

So in your MaterialAppWithTheme widget (which you have to make a Stateful widget now), you have the method below defined:

void _updateAppBarTitle(String newTitle) {
    setState((){
        appTitle = newTitle;
    });
}

Then you have to modify MdDrawer like below to accept a Function object as a parameter:

class MdDrawer extends StatefulWidget {
  final String title;
  final Function(String) updateAppBarTitle;

  MdDrawer({Key key, this.title, @required this.updateAppBarTitle}) : super(key: key);

  @override
  MdDrawerState createState() {
    return new MdDrawerState();
  }
}

And in your MdListTile's onTap, you can just call it like so:

   return MdListTile(
                onTap: () {
                  widget.updateAppBarTitle(navigationItems[counter].title);
                  //Other methods
                },
                isSelected: currentSelectedIndex == counter,
                title: navigationItems[counter].title,
                icon: navigationItems[counter].icon,
                animationController: _animationController,
              );

Comments

[Jaser]

After making MaterialAppWithTheme into a Stateful widget - What am I supposed to to do with State<StatefulWidget> createState() {} ?

[Jaser]

setState is giving me an error when I add the method that you provided. I should note that I'm still a beginner at flutter

[Jaser]

I get the error - The method 'updateAppBarTitle' was called on null. Receiver: null Tried calling: updateAppBarTitle("Expenses")

[Jaser]

Seems like _updateAppBarTitle method is never called

[Jaser]

Nevermind - I got it to work I had to call the method like this - this.widget.updateAppBarTitle(navigationItems[counter].title‌​); instead of - widget.updateAppBarTitle(navigationItems[counter].title);