己のためのFlutterチートシート

Flutterの学習で混乱したり、覚えておいた方が良いことを備忘録に残しておきます。

確認すること

Flutterの真髄はレイアウトにあり。以下の文言を思い出そう。

The first step is to break the layout down to its basic elements:

• Identify the rows and columns.
• Does the layout include a grid?
• Are there overlapping elements?
• Does the UI need tabs?
• Notice areas that require alignment, padding, or borders.

訳：

最初のステップは、レイアウトを基本要素に分解することです。

• 行と列を特定します。
• レイアウトにグリッドが含まれていますか？
• 重複する要素はありますか？
• UIにはタブが必要ですか？
• 位置合わせ、パディング、または境界線が必要な領域に注意してください。

 RowsとColumns

Rowsは縦割り

Columnsは横割り

結構混乱するからここに載せておこう。

ウィジットの使い方を覚える

ウィジットは知ってるかどうかだ。

この記事がわかりやすい

Flutter開発する前に知っておきたい35のWidget一覧 - Qiita

出てきたウィジットはここに追加し、使い方を載せていく。

以下の図のコードで出てくる要素を分解する。

Building layouts - Flutter

Widget titleSection = Container(
  padding: const EdgeInsets.all(32),
  child: Row(
    children: [
      Expanded(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Container(
              padding: const EdgeInsets.only(bottom: 8),
              child: Text(
                'Oeschinen Lake Campground',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            Text(
              'Kandersteg, Switzerland',
              style: TextStyle(
                color: Colors.grey[500],
              ),
            ),
          ],
        ),
      ),
      Icon(
        Icons.star,
        color: Colors.red[500],
      ),
      Text('41'),
    ],
  ),
);

Container

高さ、色、テキスト、色んな要素を突っ込みたい時に使うようだ。この場合はまずContainerで全部の要素を囲んでいると言うこと。

EdgeInsets

EdgeInsetsはPaddingやmarginの設定だ。

padding: EdgeInsets.all(30.0)

margin: EdgeInsets.all(30.0)

 Row

Rowは縦割りだ。

Row(

children:[ ]

),

Expanded

子Widgetを最大限のサイズまで広げるWidget

Column

Columnは横割だ。要素を重ねていくイメージ

mainAxisAlignment

日本語に訳すと、「メイン軸標準」。

メインは何を刺すかと言うと、RowsかColumnsかだ。Rowなら左。Columnsなら上。

crossAxisAlignment

mainAxisAlignmentと逆。Row内で使うなら上。Columns内で使うなら左。 

Text

文字を埋め込む時に使うウィジット。

普通はそこにフォントサイズとか挟むので、style:TextStyle()をくっつけて

Text(
              'Kandersteg, Switzerland',
              style: TextStyle(
                color: Colors.grey[500],
              ),
     ),

みたいに使うようだ。

TextStyle

上記の「Text」参照

softWrap

テキストを改行したい時につける

softWrap: true,