Flutter – Scaffold の基本的な使い方、基本プロパティ
Flutter
この記事の目次
Scaffold
アプリケーションバーやタイトル、ホーム画面のウィジェットツリーを保持する、bodyプロパティを提供します。
画面上には表示されないレイアウトを管理するウィジェット。
Drawer
- ページ遷移のためのナビゲーションを表すのに使うウィジェット
- Scaffoldのdrawerパラメータに渡す
- ScaffoldにappBarパラメータにAppBarのインスタンスが渡されている場合自動でAppBarにハンバーガーアイコンが表示される
- endDrawerパラメータを使って右側にDrawerを表示させられる
- Scaffoldのステートをof(BuildContext context)で取得してopenDrawer()、openEndDrawer()をコールすることでプログラム側からドロワーメニューを呼び出せる
- pop()で閉じることができる
- 一般的にDrawerのchildにはDrawerHeaderとListView、その中にListTileを使う
- Drawerには1つのウィジェットしか配置できない
endDrawer: Drawer( // endDrawerで右側に表示
backgroundColor: Colors.white, // 背景色の指定
width: MediaQuery.of(context).size.width * 0.5, // Drawerの幅を画面の50%に指定
child: ListView(
children: const [
ListTile(
title: Text("Menu01"), // 表示されるテキスト
trailing: Icon(Icons.chevron_right_outlined), // trailing で右側にアイコンを配置
),
ListTile(
title: Text("Menu02"),
trailing: Icon(Icons.chevron_right_outlined),
),
ListTile(
title: Text("利用規約"),
trailing: Icon(Icons.chevron_right_outlined),
),
ListTile(
title: Text("ヘルプ"),
trailing: Icon(Icons.chevron_right_outlined),
),
],
),
),
Flutter – ListView / ListTile の使い方や基本プロパティについてはこちら
appBar
appBar: AppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Image.asset(
'images/logo.png',
fit: BoxFit.fitHeight,
height: 20,
),
],
),
backgroundColor: Colors.cyan,
),
