戻るボタンのカスタマイズ

画面遷移をしたら戻るボタンが表示されない

chatGPTを最大限活用してコードを打っているのですが、そうするとたまに全然わからないエラーが出ます。

今回は画面遷移をしたページで、本来表示されるはずの戻るボタンが消えてしまうというエラーが出ました。

            appBar: AppBar(
              automaticallyImplyLeading: false,
              title: const Text('Shift Table'),
              leading: GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => MyApp()));
                  const Icon(
                    Icons.arrow_back_ios,
                  );
                },
              ),
            ),

この

leading: GestureDetector

はまさにchatGPT頼みで書いたコードで出てきた全然わからない単語。

調べてみると、leadingはAppBarの戻るアイコンのことで、戻るアイコンをカスタマイズする時にはこれを使うらしい。GestureDetectorはタップした時の挙動を設定するもので、onPressedやonTapと似たようなもの？　それより上位というか、少しリッチな設定ができるみたい。

chatGPTに質問すると自分が知らない言葉をいっぱい使ってくる。

でも長押しやダブルタップを実装する予定はなく、一回タップしたら画面を戻るだけでいいので、調べつつ、もっとシンプルに書き直しました。
アイコンが表示されないのもどうやら位置の問題らしいので

appBar: AppBar(
              automaticallyImplyLeading: false,
              title: const Text('Shift Table'),
              leading: IconButton(
                icon: const Icon(Icons.arrow_back_ios),
                onPressed: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(builder: (context) => const MyApp()),
                  );
                },
              ),
            ),

としたら表示されるようになりました！

この automaticallyImplyLeading: false, は、戻るアイコンを消すためのもので、戻るアイコンをカスタマイズするときは一回これで自動的に作られるものを消してから、新しくコードを書いて実装するという手順を踏む模様。