[Flutter] BackButtonウィジェットの使い方

2024-08-02 hit count image

Flutterが基本的提供しているBackButtonウィジェットを使って以前の画面に戻る方法について説明します。

概要

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

AppBarautomaticallyImplyLeadingオプションを使うと、BackButtonを自動的に表示または非表示にすることができます。AppBarautomaticallyImplyLeadingのデフォルト値はtrueなので、上記のようにBackButtonを使わなくてもAppBarに戻るボタンが表示されます。

AppBar(
  ...
),

BackButtonの活用

AppBarautomaticallyImplyLeadingオプションをfalseに設定しない限り、デフォルトでBackButtonが表示されるため、わざわざBackButtonを使う必要はありません。

しかし、前の画面に戻る時に特定の関数を呼び出す必要がある場合、次のようにBackButtonを使って実装することができます。

AppBar(
  leading: BackButton(
    onPressed: () {
      callback();
      Get.back();
    },
  ),
  ...
),

完了

これでFlutterが基本的提供するBackButtonウィジェットについて説明しました。私のようにBackButtonの存在を知らずに直接IconButtonで実装していた場合は、BackButtonを使ってもっと簡単に実装してみてください。

また、AppBarleadingに何も機能を持たないBackButtonを使っている場合、AppBarのオプションであるautomaticallyImplyLeadingを使って戻るボタンが自動的に表示されることも忘れないでください。

私のブログが役に立ちましたか?下にコメントを残してください。それは私にとって大きな大きな力になります!

アプリ広報

今見てるブログを作成たDekuが開発したアプリを使ってみてください。
Dekuが開発したアプリはFlutterで開発されています。

興味がある方はアプリをダウンロードしてアプリを使ってくれると本当に助かります。

Posts