2023年3月19日
開発環境
OS:Windows 10
SDK:VS Code + flutter 3.7.5
Widgetとは
Widgetとは画面を構成するUI要素です。
Widgetを組み合わせることで画面を構築できます。
基本的なWidget一覧
基本的なレイアウト系と操作系を把握しておけば一通りの画面が作れます。
(レイアウト系)
(操作系)
Widget | 役割 |
---|---|
Text | テキスト表示 |
Image | 画像表示 |
Icon | アイコン表示 |
GestureDetector | 操作系コンテナ |
ElevatedButton | ボタン |
Widgetを組み合わせる
例えば画面を2等分し、画面上に画像を配置し、画面下にテキストを配置するなら
以下のようになります。
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
width: double.infinity,
height: double.infinity,
alignment: Alignment.center,
child: Column(
children: <Widget>[
Expanded(
flex: 1,
child: Container(
alignment: Alignment.center,
child:Image.asset('images/sample.jpg'),),),
Expanded(
flex :1,
child: Container(
alignment: Alignment.center,
child: const Text('sample', textAlign: TextAlign.center,),))
],
),
),
);
}
まず画面フルサイズのコンテナを配置します。
その中にColumnを配置して上下2分割し、Expandedで1対1になるよう画像とテキストを配置しています。
実際にWebで実行してみると以下の通りです。

Widgetの良い所はイメージ通りに組み合わせることができるところ。
更にコンテナ内にRowなどを配置し、画面構成を豊かにしていくことができます。
今回は以上です。