LoginSignup
9

More than 3 years have passed since last update.

【Flutter】AppBarの戻るアイコン(leading)をカスタマイズしてみる

Posted at

本記事で行うこと。

  1. 戻るアイコンを削除する
  2. 戻るアイコンの代わりに、テキストボタンを設置する
  3. テキストボタンのレイアウトを解消する

1. 戻るボタンを削除する

Flutterのアプリは、画面遷移を行うとAppBarに戻るアイコンが自動的に設置されます。

dd775447757511b2a00e3c6c22cdde24.png

この自動的に設置された戻るアイコンを一番簡単に削除する方法は、
automaticallyImplyLeadingfalseに設定することみたいです。

automaticallyImplyLeading とは?

AppBarの先頭がnullの場合、左矢印(戻るアイコン)を自動的に付与するよ。というものみたいです。
つまりleadingを設定してあげれば、automaticallyImplyLeading のパラメータは無効になる、ということだと思います。

ソースはこちら

実際に削除してみる

automaticallyImplyLeadingfalse に設定します。

遷移先のスクリーン.dart
AppBar(
  automaticallyImplyLeading: false,
),

動作確認してみましょう。

7ca13b2b468fc7507651abc3a0c93870.png

これで、戻るアイコンを削除することができました。

2. 戻るアイコンの代わりに、テキストボタンを設置する

automaticallyImplyLeadingとは?で確認しましたが、
leadingを設定してあげるとAppBarの先頭はnullではなくなり、代わりとなるウィジェットを設置することができます。

今回は、"キャンセル"というテキストのテキストボタンを、戻るアイコンの代わりに設置してみようと思います。

まず、leadingを理解する

Flutterの公式ドキュメントを見てみると、

「A widget to display before the toolbar's title.」

AppBarのタイトルより前にウェジェットを設定できるよ。的なことが書いてあるみたいです。
つまり、AppBarの一番左に何かを設置してあげたいときは、leadingを使うという認識で良いのかなと思っています。

実際にテキストボタンを設置してみる

遷移先のスクリーン.dart
 AppBar(
   leading: TextButton(
      child: Text(
         'キャンセル',
         style: TextStyle(
           color: Colors.white,  //文字の色を白にする
           fontWeight: FontWeight.bold,  //文字を太字する
           fontSize: 12.0,  //文字のサイズを調整する
          ),
      ),
  onPressed: () => Navigator.of(context).pop(),
  ),

動作確認してみましょう。

900751049660727aef6c38ccd6fb737c.png

無事、"キャンセル"のテキストボタンを表示することができました。
遷移の動作も問題ないようです。
ですが、キャンセルが不自然に改行されてしまい、レイアウトが崩れています。
次は、レイアウトを調整していきます。

3. テキストボタンのレイアウトを解消する

このレイアウト崩れは、leadingのwidthが初期値より超えてしまったため、
折り返し表示されてしまっていることが原因だと思います。
leadingWidth を適切に設定することで、レイアウト崩れを解消することができました。

leadingのレイアウト崩れを解消する。

遷移先のスクリーン.dart
 AppBar(
   leadingWidth: 85,  //leadingWidthを設定する
   leading: TextButton(
      child: Text(
         'キャンセル',
         style: TextStyle(
           color: Colors.white,  //文字の色を白にする
           fontWeight: FontWeight.bold,  //文字を太字する
           fontSize: 12.0,  //文字のサイズを調整する
          ),
      ),
  onPressed: () => Navigator.of(context).pop(),
  ),

動作確認してみましょう。

b15e83c8a2ba70472ce1d04b81c320f6.png

無事、レイアウト崩れが解消されました。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9