概要
Flutterが基本的提供するBackButtonウィジェットを使って以前の画面に移動する方法について説明します。
AppBarの戻るボタン
今までアプリを開発する時、AppBarの戻るボタンを次のように実装して使ってきました。
AppBar(
leading: IconButton(
icon: const Icon(Icons.arrow_back_ios_new),
splashRadius: 20.0,
onPressed: () => Get.back(),
),
...
),
私はGetXを使ってアプリを開発しているため、Get.back()を使って画面を戻るように実装しました。
BacckButtonウィジェット
しかし、Flutterが基本的提供するBackButtonウィジェットを使うと、戻るボタンをもっと簡単に実装することができます。
AppBar(
leading: const BackButton(),
...
),
AppBarのautomaticallyImplyLeading
AppBarのautomaticallyImplyLeadingオプションを使うと、BackButtonを自動的に表示または非表示にすることができます。AppBarのautomaticallyImplyLeadingのデフォルト値はtrueなので、上記のようにBackButtonを使わなくてもAppBarに戻るボタンが表示されます。
AppBar(
...
),
BackButtonの活用
AppBarのautomaticallyImplyLeadingオプションをfalseに設定しない限り、デフォルトでBackButtonが表示されるため、わざわざBackButtonを使う必要はありません。
しかし、前の画面に戻る時に特定の関数を呼び出す必要がある場合、次のようにBackButtonを使って実装することができます。
AppBar(
leading: BackButton(
onPressed: () {
callback();
Get.back();
},
),
...
),
完了
これでFlutterが基本的提供するBackButtonウィジェットについて説明しました。私のようにBackButtonの存在を知らずに直接IconButtonで実装していた場合は、BackButtonを使ってもっと簡単に実装してみてください。
また、AppBarのleadingに何も機能を持たないBackButtonを使っている場合、AppBarのオプションであるautomaticallyImplyLeadingを使って戻るボタンが自動的に表示されることも忘れないでください。
私のブログが役に立ちましたか？下にコメントを残してください。それは私にとって大きな大きな力になります！
アプリ広報
Dekuが開発したアプリを使ってみてください。Dekuが開発したアプリはFlutterで開発されています。興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。
