Widgetを構成する

2023年3月19日

開発環境
OS:Windows 10
SDK:VS Code + flutter 3.7.5

Widgetとは

Widgetとは画面を構成するUI要素です。

Widgetを組み合わせることで画面を構築できます。

基本的なWidget一覧

基本的なレイアウト系と操作系を把握しておけば一通りの画面が作れます。

(レイアウト系)

Widget役割
Column行(縦)配置
Row列(横)配置
Expanded画面フルサイズ配置
Align指定配置
Stack重ね配置
Containerコンテナ
レイアウト系一覧

(操作系)

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などを配置し、画面構成を豊かにしていくことができます。

今回は以上です。