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ウィジェット	画像を出力する

【Flutter】ウィジェット

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

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

他にもウィジェット

参考