いちのこんばんは〜
弊社ブログに辿り着いていただきありがとうございます！
株式会社メモリアインクのいちのです
この記事を読んでわかること
- AppBarの戻るボタンを非表示にする
- ナビゲーションの戻るボタンを無効にする
- AppBarの戻るボタンを別のアイコンに変更する
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
AppBarの戻るボタンを非表示にする
概要
FlutterでAppBarの戻るボタンを非表示にするには、AppBarウィジェットのautomaticallyImplyLeadingプロパティをfalseに設定します。
サンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('AppBar 戻るボタン非表示'),
automaticallyImplyLeading: false, // AppBarの自動的な戻るボタンを非表示にする
),
body: Center(
child: Text('戻るボタンが非表示です'),
),
),
);
}
}サンプルコードの解説
- 14行目:
automaticallyImplyLeadingをfalseに設定して、AppBarの戻るボタンが自動的に表示されないようにします。
表示確認
いちのそれでは、表示を確認してみましょ〜
ナビゲーションの戻るボタンを無効にする
概要
ナビゲーションの戻るボタンを無効にするには、WillPopScopeウィジェットを使用して、ユーザーが画面から離れる操作をインターセプトします。
サンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('ナビゲーション戻るボタン無効'),
),
body: WillPopScope(
onWillPop: () async => false, // ナビゲーションの戻る操作を無効にする
child: Center(
child: Text('戻るボタンが無効です'),
),
),
),
);
}
}サンプルコードの解説
- 16行目:
onWillPopにasync => falseを設定することで、ナビゲーションによる画面遷移を無効にします。
AppBarの戻るボタンを別のアイコンに変更する
概要
AppBarの戻るボタンのアイコンを変更するには、AppBarウィジェットのleadingプロパティに新しいアイコンを設定します。
サンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('AppBar 戻るボタンアイコン変更'),
leading: IconButton(
icon: Icon(Icons.menu), // AppBarの戻るボタンをメニューアイコンに変更
onPressed: () {
// アイコンボタンがタップされた時のアクション
},
),
),
body: Center(
child: Text('戻るボタンのアイコンが変更されました'),
),
),
);
}
}サンプルコードの解説
- 14-19行目:
leadingプロパティにIconButtonを設定し、そのiconプロパティに新しいアイコン(Icons.menu)を設定します。これにより、AppBarの戻るボタンがメニューアイコンに変更されます。
表示確認
いちのそれでは、表示を確認してみましょ〜
まとめ
いかがでしたでしょうか？今回は、ヘッダー(AppBar)戻るボタンを非表示・ナビゲーションの戻るボタンを無効・AppBarの戻るボタンを別のアイコンに変更する方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ！
いちの自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
をオススメします。
コメント