今回は「Scaffold」の基本的な使い方について紹介します。
Scaffoldを使えばFlutterアプリの基盤となるレイアウトが簡単に作れます!
目次
Scaffoldの基本プロパティ
appBar

appBarプロパティではトップバーを設置できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter'),
backgroundColor: Colors.orange,
),
),
);
}
実装できるWidget:AppBar, CupertinoTabBar, ObstructingPreferredSizeWidget, PreferredSize, Tab, TabBar
body

bodyプロパティではScaffoldのコンテンツ(Primary Widget)となるWidgetを指定できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter'),
),
body: const Center(
child: Text(
"Hello World",
),
),
),
);
}
実装できるWidget:何でもOK
backgroundColor

backgroundColorプロパティで背景色を指定できます。
//ソース
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('Flutter'),
),
backgroundColor: Colors.purple,
),
);
}
実装できるWidget:Colors, ColorSwatch, CupertinoDynamicColor, MaterialStateColor
floatingActionButton

floatingActionButtonプロパティでScaffoldのbodyプロパティ右下に浮いたボタンを実装できます。
//ソース
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int number = 0;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter'),
),
body: Center(
child: Text('$number'),
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
setState(
() {
number += 1;
},
);
},
),
),
);
}
}
実装できるWidget:FloatingActionButton
備考:FloatingActionButtonは「StatefulWidget」で使用するようにしましょう。
投稿が見つかりません。
あわせて読みたい


【Flutter×Dart】コールバック関数の使い方|VoidCallbackの特徴は?
今回はコールバック関数(無名関数)の使い方について解説します。 また、Widgetのプロパティで引数として呼び出される「VoidCallback」の特徴についても解説します。 ...
以上です。