How to change the app bar title in flutter

Question

**change the appbar title dynamically**

Getting appbar title from the database and then I have to set to appbar. I am new to flutter tried setState as well.

I have tried setState() as but still not working. how can i change the appbar text based on server response as well as database value

import 'dart:async';

import 'package:flutter/material.dart'; 
import 'package:parking_app/data/database_helper.dart'; 
import'package:parking_app/models/user.dart';

class HomeScreen extends StatefulWidget {   @override   State<StatefulWidget> createState() {
    return new HomeScreenState();   } }

class HomeScreenState extends State<HomeScreen> {   @override   Widget build(BuildContext context) {
    var db = new DatabaseHelper();
    Future<User> user = db.getUser();
    String appBarTitle = "eClerx Parking";
    var appBarTitleText = new Text(appBarTitle);

if (user != null) {
  user.then((val) {
    if (val == null) {
      return;
    }
    print(TAG+ "  user data : " + val.emailId);
    setState(() {
      build(context);
      appBarTitle = val.emailId;
    });
  });
}

return new MaterialApp(
  home: new Scaffold(
    appBar: new AppBar(
      title: appBarTitleText,
      actions: <Widget>[
        // action button
        new IconButton(
          icon: new Icon(Icons.settings_power),
          onPressed: () {
            _logout();
          },
        ),
        // action button
      ],
    ),
    body: new Padding(
      padding: const EdgeInsets.all(16.0),
      child: new ChoiceCard(choice: choices[0]),
    ),
  ),
);   } }

score 11 · Accepted Answer · answered Sep 14 '18 at 13:52

You could also split your code, assuming that your database fetch will be asynchronous.

class HomeScreenState extends State<HomeScreen> {
     var appBarTitleText = new Text("eClerx Parking");

     Future getUser() async {
        var user = await db.getUser();

        if (user != null) {
           user.then((val) {
              if (val == null) {
                return;
              }
              print("user data : " + val.emailId);

              setState(() {
                appBarTitleText = Text(val.emailId);
             });
           });
        }
    }


    @override
       void initState() {
       super.initState();
       getUser();
    }

    @override
    Widget build(BuildContext context) {
    ...

score 3 · Answer 2 · edited Sep 16 '20 at 05:37

You shouldn't do everything in the build function. The build function is redrawing everytime you call setState, so you are initiating String appBarTitle = "eClerx Parking"; every time it redraws.

You need to override the initState() and place this logic in there

var db = new DatabaseHelper();
    Future<User> user = db.getUser();
    String appBarTitle = "eClerx Parking";
    var appBarTitleText = new Text(appBarTitle);


if (user != null) {
  user.then((val) {
    if (val == null) {
      return;
    }
    print("user data : " + val.emailId);
    //DO THIS TO UPDATE THE STATE AND FORCE A REDRAW
    setState(() {
      appBarTitle = val.emailId;
    });
  });

Also, wrap appBarTitle = val.emailId; with setState() function

EDIT: You are not awaiting the result from the dababase Future<User> user = db.getUser(); so the user will always be null and setState never called.

Try Future<User> user = await db.getUser();

score 2 · Answer 3 · answered Sep 14 '18 at 13:49

2

Change

appBarTitle = val.emailId

to

setState(() {
  appBarTitle = val.emailId;
});

answered Sep 14 '18 at 13:49

Günter Zöchbauer

623,577
216
2,003
1,567

Hey Günter! I think he is trying to do everything inside the build function, so calling setState there may not work. I tried to answer it down below. Please correct me if I'm wrong – Sebastian Sep 14 '18 at 13:54
It's not ideal there but I don't see why it wouldn't work. – Günter Zöchbauer Sep 14 '18 at 13:55
I mean yes, you are right, it's not ideal but it should work. Maybe the problem is that he is not awaiting the response to the db `Future user = db.getUser();` so the user will be always null and won't call setState, what do you think? – Sebastian Sep 14 '18 at 13:59
@GünterZöchbauer made changes in my code added setState method still not working and in logs, print method is getting called infinite times – AKASH WANGALWAR Sep 17 '18 at 09:43

score 0 · Answer 4 · edited Feb 20 '20 at 15:15

0

create global variable name it appBar Title inside statefulwidget state class

var appBarTitle ="some text";

and assign appBar title to it

then change its value with setState method

edited Feb 20 '20 at 15:15

octobus

1,246
1
14
20

answered Feb 20 '20 at 14:15

kururu95

29
2

How to change the app bar title in flutter

4 Answers4