Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to change the app bar title in flutter

Tags:

flutter

appbar

**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]),
    ),
  ),
);   } }
like image 499
AKASH WANGALWAR Avatar asked Sep 14 '18 13:09

AKASH WANGALWAR


People also ask

How do you add a title to the app bar flutter?

Flutter – Center Align Application Bar Title To center align text of App Bar title, use Scaffold and in appBar, set the centerTitle property to true. Following is a quick code snippet to align title at the center of application bar.

How do you change the app bar in flutter?

Steps to change appbar color in Flutter Basically, you provide the styling instructions by using the backgroundColor property and set its color.


1 Answers

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) {
    ...
like image 139
Zroq Avatar answered Oct 15 '22 18:10

Zroq