web-dev-qa-db-ja.com

FlutterのAppBarでクリック可能なテキストを使用するにはどうすればよいですか

FlutterのAppBarのアクションでIconButtonを使用できることを知っています。しかし、アイコンの代わりに、ユーザーに「保存」、「戻る」、「キャンセル」という単語を見て、AppBarでそれらをクリックすることを望みます。どうすればこれを達成できますか？ 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
flutterappbar
8
Roya

FlatButtonのAppBarリスト内でactionsを使用できます。

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

onPressedを定義する必要があります。そうしないと、ボタンが無効になっているように見えます。また、デフォルトでは、ボタンの形状がInkWell効果の塗りつぶされた長方形を作成することに注意してください。 shapeプロパティをCircleBorderに設定することで、押された状態に対してより良い効果が得られます。

例えば。

押されていない：

押された：

1
Sandy Chapman

TextをGestureDetectorでラップし、そのonTapプロパティを使用してイベントを処理できます。

例

actions: <Widget>[
  GestureDetector(child: Text("Save"), onTap: save)
],
0
CopsOnRoad