How can I have clickable text in the AppBar in Flutter

Question

I am aware that I can use IconButton in the actions of the AppBar in Flutter. But instead of the icon, I'd like the user to see the words 'Save' or 'Back' or 'Cancel' and click on them in the AppBar. How can I achieve this? Here is part of my code that shows the AppBar. Instead of the save Icon, I'd like to use 'Save'

return Scaffold(
    appBar: AppBar(
      leading: IconButton(icon: Icon(Icons.arrow_back),
      tooltip: "Cancel and Return to List",
      onPressed: () {
        Navigator.pop(context, true);
      },
    ),
      automaticallyImplyLeading: false,
      title: Text(title),
      actions: <Widget>[

        IconButton(
          icon: Icon(Icons.save),
          tooltip: "Save Todo and Retrun to List",
          onPressed: () {
            save();
          },
        )
      ],
    ),//AppBar

You can Use FlatButton.icon(onPressed: (){save();}, icon: Icon(Icons.save), label: 'Save'); Instead of Iconbutton. — anmol.majhail, Oct 09 '18 at 06:21
to be exact: there is not enough space for word 'cancel' in the leading section instead of the arrow_back — Roya, Oct 09 '18 at 07:14
For those who want an icon instead of text, see [How to add icon to AppBar in Flutter](https://stackoverflow.com/questions/57941227/how-to-add-icon-to-appbar-in-flutter) — Suragch, Oct 13 '19 at 04:33

score 40 · Accepted Answer · answered Jan 02 '19 at 15:46

You can use FlatButton within an AppBar's actions list:

appBar: AppBar(
  title: Text("Test Screen"),
  actions: <Widget>[
    FlatButton(
      textColor: Colors.white,
      onPressed: () {},
      child: Text("Save"),
      shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
    ),
  ],
),

onPressed must be defined or the button will appear disabled. Also note that by default the shape of the button will create a filled rectangle for the InkWell effect. By setting the shape property to CircleBorder, we get a nicer effect for the pressed state.

E.g.

Not pressed:

Pressed:

CopsOnRoad · Answer 2 · 2020-11-11T01:33:31.727

6

Use TextButton:

appBar: AppBar(
  actions: <Widget>[
    TextButton(
      onPressed: () {},
      child: Text('Save'),
    ),
  ],
)

edited Nov 11 '20 at 01:33

answered Oct 09 '18 at 04:57

CopsOnRoad

109,635
30
367
257

Dont use that way because you'll have to add style to fix the possition – TuGordoBello Nov 11 '20 at 01:05
@TuGordoBello Updated the code. Thanks for pointing out, I didn't realise I was using a plain old approach back then. – CopsOnRoad Nov 11 '20 at 01:33

score 3 · Answer 3 · answered Jul 24 '19 at 14:37

3

If you have short string then you can pass Text widget in place of Icon into the IconButton.icon argument:

IconButton(
  icon: Text(
    "Save",
    style: Theme.of(context).textTheme.button.apply(
      color: Theme.of(context).appBarTheme.actionsIconTheme.color,
    ),
  ),
  onPressed: _save,
),

Unfortunately, it will not work for a longer text like Cancel.

answered Jul 24 '19 at 14:37

sosite

2,309
1
26
35

2

This works but you have to change the icon size. IconButton( iconSize: 50, icon: Text("DONE"), ), – Pedro Romão Apr 28 '20 at 18:03

Pedro Romão · Answer 4 · 2020-11-27T19:36:46.697

It's the second time I come to this thread to find a solution. I actually had upvoted a few answers that I found interesting.

@sosite solution's is almost perfect and changing the iconSize allows to display longer texts. But, it's not perfect because the button's splash radius will be too large.

The best approach is using the constraints: BoxConstraints(width: ...). It will mimic the default IconButton's splash radius.

We can use bigger texts, multi-world texts and align the text to the center to be perfectly aligned.

IconButton(
            constraints: BoxConstraints.expand(width: 80),
            icon: Text('CREATE GAME', textAlign: TextAlign.center),
            onPressed: () {},
          ),

If the text is cut, increase the width value :)

score 0 · Answer 5 · answered Mar 08 '21 at 05:56

0

New version flutter2

TextButton( style: TextButton.styleFrom( primary: Colors.red, // foreground ), onPressed: () { }, child: Text('TextButton with custom foreground'), )

answered Mar 08 '21 at 05:56

Md. Rahamat Ullah

1
1

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

You can also achieve this by using a GestureDetector widget inside Center widget

   Center(
      child: GestureDetector(
        onTap: (){},
        child: Text(
          "Ssave",
          textScaleFactor: 1.5,
          style: TextStyle(
            fontSize: 12.0,
            color: Colors.white,
          ),
        ),
      ),
    )

score -1 · Answer 7 · edited Mar 09 '21 at 06:28

-1

Use new version Flutter 2.0

appBar: AppBar(
  title: Text("Test Screen"),
  actions: <Widget>[
    TextButton(
      textColor: Colors.white,
      onPressed: () {},
      child: Text("Save"),
      shape: CircleBorder(side: BorderSide(color: Colors.transparent)),
    ),
  ],
),

edited Mar 09 '21 at 06:28

Dharmesh Mansata

2,406
19
30

answered Mar 08 '21 at 05:53

Md. Rahamat Ullah

1
1

How can I have clickable text in the AppBar in Flutter

7 Answers7

New version flutter2

Linked