32

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
6
  • You can Use FlatButton.icon(onPressed: (){save();}, icon: Icon(Icons.save), label: 'Save'); Instead of Iconbutton. Oct 9, 2018 at 6:21
  • Thank you so much! I needed a flat button actually.
    – RRy
    Oct 9, 2018 at 6:59
  • But it didn't work for the arrow_back
    – RRy
    Oct 9, 2018 at 7:06
  • to be exact: there is not enough space for word 'cancel' in the leading section instead of the arrow_back
    – RRy
    Oct 9, 2018 at 7:14
  • For those who want an icon instead of text, see How to add icon to AppBar in Flutter
    – Suragch
    Oct 13, 2019 at 4:33

6 Answers 6

53

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:

1
12

Use TextButton:

appBar: AppBar(
  actions: <Widget>[
    TextButton(
      onPressed: () {},
      child: Text('Save'),
    ),
  ],
)
4
  • Dont use that way because you'll have to add style to fix the possition Nov 11, 2020 at 1: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, 2020 at 1:33
  • Has no effect on 1.22 version
    – Eric Yuan
    Oct 27, 2021 at 20:28
  • @EricYuan If I'm not wrong TextButton was added in Flutter 2.0 onwards.
    – CopsOnRoad
    Nov 1, 2021 at 16:16
5

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.

2
  • 2
    This works but you have to change the icon size. IconButton( iconSize: 50, icon: Text("DONE"), ), Apr 28, 2020 at 18:03
  • Agreed. By default it will work for most single letters (e.g. R, S) but not for longer ones like 'm'.
    – rjh
    Nov 8, 2021 at 20:19
5

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 :)

enter image description here

1
  • Perfect---------
    – Utopion
    Oct 14, 2022 at 15:42
1

The key is to use Center to wrap your control and give it a little space to the right when the control is the most right one. Whatever is inside is not important.

AppBar(
      title: Text('The tile'),
      actions: [Center(
        child: Padding(
          padding: const EdgeInsets.fromLTRB(0,0,8,0),
          child: InkWell(
            onTap: (){},
            child: Text(
              'Send',
              textScaleFactor: 1.5,
              style: TextStyle(
                color: Colors.white,
              ),
            ),
          ),
        ),
      )],
    ),
-3

Use new version Flutter 2.0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.