Flutter 如何在Flatter中的AppBar中具有可单击文本

我知道我可以在颤振中的AppBar动作中使用IconButton。但我希望用户看到的不是图标，而是“保存”、“返回”或“取消”，然后在应用程序栏中单击它们。我怎样才能做到这一点？下面是我显示AppBar的部分代码。我想使用“保存”而不是“保存”图标

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

返回脚手架(
appBar:appBar(
前导：图标按钮（图标：图标（图标。箭头向后），
工具提示：“取消并返回列表”，
已按下：（）{
pop（上下文，true）；
},
),
自动嵌入：false，
标题：文本（标题），
行动：[
图标按钮(
图标：图标（Icons.save），
工具提示：“保存待办事项并重新运行到列表”，
已按下：（）{
save（）；
},
)
],
)，//AppBar
使用
文本按钮
：

appBar:appBar(
行动：[
文本按钮(
按下：（）{}，
子项：文本（'Save'），
),
],
)
您可以在
AppBar
的
操作列表中使用
FlatButton
：

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

appBar:appBar(
标题：文本（“测试屏幕”），
行动：[
扁平按钮(
textColor:Colors.white，
按下：（）{}，
子项：文本（“保存”），
形状：圆形顺序（边：边框边（颜色：Colors.transparent）），
),
],
),

必须定义按下时的
，否则按钮将显示为禁用状态。
还请注意，默认情况下，按钮的形状将为墨水池效果创建一个填充矩形。通过将
形状
属性设置为
圆圈顺序
，我们可以在按下状态下获得更好的效果

例如

未按下：


按：

如果您有短字符串，则可以将
文本
小部件代替
图标
传递到
图标按钮。图标
参数：

IconButton(
图标：文本(
“保存”，
样式：Theme.of（context）.textTheme.button.apply(
颜色：Theme.of（context）.appBarTheme.actionsIconTheme.color，
),
),
onPressed:\u保存，
),

不幸的是，对于像“取消”这样的较长文本，它将不起作用。
这是我第二次使用此线程来寻找解决方案。事实上，我对一些我觉得有趣的答案投了赞成票

@sosite解决方案几乎是完美的，更改
iconSize
可以显示更长的文本。但是，这并不完美，因为按钮的飞溅半径太大

最好的方法是使用
约束：BoxConstraints（宽度：…）
。它将模拟默认图标按钮的飞溅半径

我们可以使用更大的文本、多世界文本，并将文本与中心对齐，使其完全对齐

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

如果文本被剪切，请增加宽度值：）

使用新版本颤振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)),
    ),
  ],
),

appBar:appBar(
标题：文本（“测试屏幕”），
行动：[
文本按钮(
textColor:Colors.white，
按下：（）{}，
子项：文本（“保存”），
形状：圆形顺序（边：边框边（颜色：Colors.transparent）），
),
],
),
新版本2
文本按钮(
样式：TextButton.styleFrom(
主：Colors.red，//前景
),
按下：（）{}，
子项：文本（“具有自定义前景的文本按钮”），
)
您也可以通过在
Center
小部件中使用
GestureDetector
小部件来实现这一点

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

您可以使用FlatButton.icon（按下时：（{save（）；}），icon:icon（Icons.save），标签：“save”）；而不是我的按钮。非常感谢！实际上，我需要一个平面按钮。但它不适用于精确的箭头返回：没有足够的空间在前导部分而不是箭头返回中放置单词“cancel”。对于那些想要图标而不是文本的用户，请参见此操作，但您必须更改图标大小。IconButton（iconSize:50，icon:Text（“完成”），）不要使用这种方式，因为您必须添加样式来修复possition@TuGordoBello更新了代码。谢谢你指出，我当时没意识到我使用的是一种简单的老方法。