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 

Answer 1

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: