広告

Flutterラボの

プレミアム会員になる

【Flutter】自動でiOSかAndroidかを判定して戻るアイコンを表示するボタンWidget『BackButton』

2021.11.08

Navigator.pushで画面を生成したときに、AppBarがあれば自動的に戻るボタンが出てきて、それを押せばNavigator.popが実行されて画面が破棄されます。

そのときに表示されている戻るボタンのデザインが、iOSの方にはよりiOSライク、Androidの方にはよりAmdroidライクになるようにアイコンが異なっています。

しかし、Navigator.pop以外の処理をさせたい場合は、AppBarのleadingに別で処理を記述する必要があり、それにIconButtonを使うと表示するアイコンを1つ指定する必要が出てきます。

そんなときのために、自動iOSかAndroidかを判定して戻るボタンを生成してくれるWidget『BackButton』がFlutterにもともと用意されているのでこれを使って記述しましょう。

return Scaffold(
  appBar: AppBar(
    title: const Text('Flutterラボ')
    leading: BackButton(
      onPressed: () {
        // ここに戻るボタンを押したときの処理を記述
      },
    ),
Flutterラボ|動画で学ぶFlutter学習サイト Flutter・Dart・Firebaseに関するアプリ制作の技術を学ぶことができます。プログラミング初心者から経験者まで flutterlabo.tech


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ 広告のECサイトを開発(https://ec-ad.tech/)