Flutterラボの

プレミアム会員になる

【Flutter入門】AppBarの使い方とよく使うプロパティ紹介

2020.11.26

AppBarがよく使われるのは、ScaffoldウィジェットのappBarプロパティです。

Scaffold(
 appBar: AppBar(),
 ...

画像1

プロパティに何も設定しなければ、テーマカラーのバーが画面上部に表示されるだけです。

ここからはプロパティの紹介をしていきます。

title

おそらく最もよく使われるプロパティで、AppBarの中に表示したいものを記述します。
今回はTextを表示します。

appBar: AppBar(
 // 追加
 title: Text('title'),
),

画像2

centerTitle

titleを中央に表示するかどうかを決めるプロパティで、boolを値を設定します。

appBar: AppBar(
 title: Text('title'),
 // 追加
 centerTitle: true,
),

画像3

leading

AppBarの左側に表示するものを設定することができるプロパティです。

appBar: AppBar(
 title: Text('title'),
 centerTitle: true,
 // 追加
 leading: Icon(Icons.menu),
),

画像4

actions

AppBarの右側に表示するものを設定することができるプロパティです。

appBar: AppBar(
 title: Text('title'),
 centerTitle: true,
 leading: Icon(Icons.menu),
 // 追加
 actions: [
   Icon(Icons.add),
   Icon(Icons.clear)
 ],
),

画像5


Flutterラボ
hatchoutschool
FlutterとNuxtに関する知識を発信しています! 動画で学べる学習サイト『Flutterラボ』と『Nuxtラボ』を運営 Flutterラボ:https://flutterlabo.tech/ Nuxtラボ:https://flutterlabo.tech/nuxt