【Flutter】ウィジェット

Last updated at 2023-12-05Posted at 2023-12-05

chatGPT に立ててもらったスケジュールに準じてウィジェットを勉強。

Day 2: Flutterウィジェットの学習

Flutterのウィジェットツリーの概念を理解する

レイアウトウィジェットの使用法を学ぶ

Flutterのウィジェットツリーの概念

Flutterのウィジェットツリーは【Flutter】ツリー構造でざっくり予習済。

レイアウトウィジェットの使用法を学ぶ

主要なレイアウトウィジェット

Container:

Container ウィジェットは、高さ、幅、マージン、パディングなどを指定できる。
子要素を一つだけ持てる。

サンプル

Container(
    width: 100.0,
    height: 100.0,
    padding: const EdgeInsets.all(10.0),
    color: Colors.blue,
    child: Text('Hello'),
  )

margin や paddingの書き方が不思議

EdgeInsetsは余白を付けるときに使うらしい

種類	指定できる
`EdgeInsets.all()`	四辺全部に同じ余白
`EdgeInsets.symmetric(vertical, horizontal)`	verticalに上下の余白、horizontalに左右の余白
`EdgeInsets.fromLTRB(left, top, right, bottom)`	四辺にばらばらの余白
`EdgeInsets.only(top: 10.0)`	上辺のみに余白 topをleft,right,bottomに変えることでそれぞれの辺のみに指定可能。`,`区切りで複数指定もできる。

Row および Column:

Row は横並び、 Column は縦並びで子要素を並べられるウィジェット。
子要素は順番に配置でき、必要に応じて拡張される。

サンプル Row

  Row(
    children: <Widget>[
      Text('この文は'),
      Text('横に並ぶ'),
    ],
  )

サンプル Column

  Column(
    children: <Widget>[
      Text('この文は'),
      Text('縦に並ぶ'),
    ],
  )

ListView:

ListView ウィジェットはスクロール可能なリストを作成する。

サンプル Column

  ListView(
    children: <Widget>[
      ListTile(title: Text('Item 1')),
      ListTile(title: Text('Item 2')),
      ListTile(title: Text('Item 3')),
    ],
  )

Stack:

Stack ウィジェットは、子要素を重ねて配置できる。子要素は位置やサイズを調整できる。

サンプル Column

  Stack(
    children: <Widget>[
      Positioned(
        top: 10.0,
        left: 10.0,
        child: Text('Hello'),
      ),
      Positioned(
        bottom: 10.0,
        right: 10.0,
        child: Text('World'),
      ),
    ],
  )

他にもウィジェット

種類	内容
Scaffoldウィジェット	HTMLでいうbodyの役割を担う
Textウィジェット	テキストを出力する
TextFieldウィジェット	キーボード入力を受け付ける
Column, Row ウィジェット	整列で使う
Buttonウィジェット	ボタンの役割を担う
Imageウィジェット	画像を出力する

参考

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up