いちの
こんばんは〜
弊社ブログに辿り着いていただきありがとうございます!
株式会社メモリアインクのいちのです
この記事を読んでわかること
- FlutterでのAppBarの基本的な実装方法
- AppBarの主要なカスタマイズオプション
- AppBarのカスタマイズ例とそれぞれのコード解説
開発環境
- Dart 3.0.0
- Flutter 3.10.0
目次
基本的なAppBarの実装方法
概要
FlutterのAppBarは、アプリケーションの上部に表示されるツールバーです。ここでは、基本的なAppBarの実装方法からみていきましょう。
サンプルコード
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: Center(
child: Text('こんにちは、Flutter!'),
),
),
);
}
}
サンプルコードの解説
- 1行目: Flutterのmaterialデザインライブラリをインポートしています。
- 3行目:
main
関数でアプリケーションの実行を開始します。 - 7行目:
MyApp
クラスは、アプリケーションのルートウィジェットを定義します。 - 10行目:
MaterialApp
ウィジェットを使用して、マテリアルデザインアプリケーションを作成します。 - 11行目:
Scaffold
ウィジェットは、基本的なマテリアルデザインのビジュアルレイアウト構造を提供します。 - 12-14行目:
AppBar
ウィジェットを使用して、アプリのヘッダーを実装しています。title
プロパティにText
ウィジェットを設定して、アプリバーのタイトルを指定しています。
表示確認
それでは、表示を確認してみましょ〜
スクロールした際、アプリのヘッダーを非表示にする方法についてもご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
【Flutter】スクロールした際ヘッダーを非表示にする方法について解説
こんばんは〜弊社ブログに辿り着いていただきありがとうございます!株式会社メモリアインクのいちのです この記事を読んでわかること スクロールした際にヘッダーを非…
AppBarをカスタマイズする
概要
AppBarをさらにカスタマイズして、アプリのブランドやスタイルに合わせたデザインを実現しましょう。
サンプルコード
import 'package:flutter/material.dart';
void main() {
runApp(MyCustomAppBarApp());
}
class MyCustomAppBarApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('カスタマイズAppBar'),
backgroundColor: Colors.deepPurple,
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {
// 検索アクション
},
),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {
// メニューアクション
},
),
],
),
body: Center(
child: Text('AppBarをカスタマイズする'),
),
),
);
}
}
サンプルコードの解説
- 12-29行目:
AppBar
ウィジェットにbackgroundColor
プロパティを設定して、アプリバーの背景色をカスタマイズしています。また、actions
プロパティを使用して、アプリバーにアクションボタンを追加しています。 - 16-21行目: 検索アイコンボタンを追加し、押された時のアクションを定義しています。
- 22-27行目: メニューアイコンボタンを追加し、押された時のアクションを定義しています。
IconButton
ウィジェットを使用して、アプリバーにアイコンボタンを配置しています。- アクションボタンには、
Icon
ウィジェットを使って、マテリアルデザインのアイコンを表示しています。
表示確認
それでは、表示を確認してみましょ〜
アプリのヘッダーメニュータブの作成方法についてもご興味のある読者様。以下の記事で分かりやすく丁寧に解説しておりますので、ぜひご一読いただけますと幸いです。
【Flutter】簡単にアイコン付き&文字とアイコン付きヘッダータブ作成(TabBar)からスクロールしてタブ切…
こんばんは〜弊社ブログに辿り着いていただきありがとうございます!株式会社メモリアインクのいちのです この記事を読んでわかること 文字だけのヘッダータブ作成方法 …
まとめ
いかがでしたでしょうか?今回は、アプリのヘッダー(AppBar)を実装し、カスタマイズする方法について、サンプルコードを用いて解説してみました。読者様の開発の手助けに少しでもなればいいなと思いこの記事を書かせていただいております。弊社ではAndroid、iOS、Flutterを使ったアプリ開発についてのブログを多数投稿させていただいておりますので、ご興味のある方はぜひ!
自分の成長を加速させるチャンスがどこかにあるかもしれません。
変化を恐れずに新たな環境に飛び込む勇気のある方は、
未経験からIT・Webエンジニアを目指すなら【ユニゾンキャリア】
コメント