How to implement app bar action text instead of action icon in Flutter?

Question

I am trying to implement appbar in the flutter application. I am able to add an action icon that closes the app. I am willing to show the username beside the close action icon. I tried to add new Text() in the action widget array in the appar section. but not able to align it. Is there any way to add action text directly?

Code:

@override
  Widget build(BuildContext context) {
    //build a form widget using the form key we created above
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(StringRef.appName),
        actions: <Widget>[

          new Container(),

        new Text(
        userName,
        textScaleFactor: 1.5,
        style: new TextStyle(
          fontSize: 12.0,
          color: Colors.white,
        ),
      ),

      new IconButton(
        icon: new Icon(Icons.close),
        tooltip: 'Closes application',
        onPressed: () => exit(0),
      ),
        ],
      ),
}

Dhiraj Sharma · Answer 1 · 2020-04-14T04:10:18.827

13

Wrap your Text widget inside Center widget as

new Center(
    new Text(
        userName,
        textScaleFactor: 1.5,
        style: new TextStyle(
          fontSize: 12.0,
          color: Colors.white,
        ),
   ),
)

edited Apr 14 '20 at 04:10

answered Jul 05 '18 at 08:19

Dhiraj Sharma

3,084
18
20

Glad it helped ! If the answer solved your problem , please upvote/accept the answer. – Dhiraj Sharma Jul 05 '18 at 08:49
I have the same issue as this question author, and I tried the above answer and not working for me, and u missing a bracket in this code – AllwiN Dec 23 '19 at 10:18

score 0 · Answer 2 · answered May 08 '21 at 03:03

You can also Wrap your Text widget inside Align widget and give a alignment: Alignment.center like below

Align(
  alignment: Alignment.center,
  child: Text(
    "Save",
    textScaleFactor: 1.5,
    style: TextStyle(
      fontSize: 12.0,
      color: Colors.white,
    ),
  ),
)

And also you can achieve this by using a TextButton

TextButton(
  onPressed: () {},
  child: Text('Save', style: TextStyle(color: Colors.white),),
)

How to implement app bar action text instead of action icon in Flutter?

2 Answers2