【Flutter】レイアウト系Widgetまとめ

11352 ワード
Flutter widget widget テキストリンク

レイアウト系の基本的なWigetまとめ

  • Column
  • Row
  • Center
  • SizedBox

Column(子Widgetを縦並びにしてくれる)

  • children: []の中にWidgetを羅列することで縦並びに配置される
  • crossAxisAlignment: 子Widgetの横方向の配置や幅を指定する
    • CrossAxisAlignment.start:左に詰める
    • CrossAxisAlignment.center:中央揃え
    • CrossAxisAlignment.end:右に詰める
    • CrossAxisAlignment.stretch:全ての子Widgetを横幅いっぱいに広げる
  • mainAxisAlignment: 子Widgetの縦方向の配置を指定する
    • MainAxisAlignment.start:最上部に揃える
    • MainAxisAlignment.center:縦方向の中央揃え
    • MainAxisAlignment.end:最下部に揃える
  • width, height:指定しなければ子Widgetの大きさ
return Column (
   crossAxisAlignment: CrossAxisAlignment.center, //大きいWidgetを基準に中央揃え
   mainAxisAlignment: MainAxisAlignment.center, // 垂直方向に中央揃え
   children: [ // Widgetを羅列
    Container(
      width: 100, // 横幅が大きいWidgetが基準になる
      height: 100,
      child: const Text('Widget1'),
      color: Colors.red,
    ),
    Container(
      width: 50,
      height: 50,
      child: const Text('Widget2'),
      color: Colors.blue,
    ),
  ],
);

Row(子Widgetを横並びにしてくれる)

Columnが縦並びに対し、横並びになっただけ

  • crossAxisAlignment: 子Widgetの縦方向の配置や幅を指定する
    • CrossAxisAlignment.start:上に揃える
    • CrossAxisAlignment.center:中央揃え
    • CrossAxisAlignment.end:下に揃える
    • CrossAxisAlignment.stretch:全ての子Widgetを横幅いっぱいに広げる
  • mainAxisAlignment: 子Widgetの横方向の配置を指定する
    • MainAxisAlignment.start:左に詰める
    • MainAxisAlignment.center:中央揃え
    • MainAxisAlignment.end:右に詰める
return  Row(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      width: 100,
      // height: 100, CrossAxisAlignment.stretchのため設定なし
      child: const Text('child1'),
      color: Colors.red,
    ),
    Container(
      width: 50,
      // height: 50,　CrossAxisAlignment.stretchのため設定なし
      child: const Text('child2'),
      color: Colors.blue,
    ),
  ],
);

ColumnとRowの配置プロバティの違いに注意
crossAxisAlignment(crossなので)

  • Column(縦):横方向の配置設定
  • Row(横):縦方向の配置設定

mainAxisAlignment(main = Widgetの配列通りの方向)

  • Column(縦):縦方向の配置設定
  • Row(横):横方向の配置設定

Center(子Widgetを中央に配置してくれる)

return  Center(
  child: Container (
      color: Colors.red,
      child: const Text('Center Widgetでchildを真ん中に')
  ),
);

Column, Rowを使用すると、ど真ん中からは始まらない
Column:横方向が中央配置
Row:縦方向が中央配置

return  Center(
  child: Column(
    children: [
      Container (
          color: Colors.red,
          child: const Text('Column/Rowを使うとど真ん中からではなくなる')
      ),
      Container (
          color: Colors.blue,
          child: const Text('Column/Rowを使うとど真ん中からではなくなる')
      ),
    ],
  ),
);

SizedBox(見えない箱状のスペースを作ってくれる)

return  Column(
  children: [
    Container (
      width: 100,
      height: 100,
      color: Colors.red,
      child: const Text('Widget1')
    ),
    const SizedBox(height: 50,),
    Container (
        width: 100,
        height: 100,
        color: Colors.blue,
        child: const Text('Widget2')
    ),
    const SizedBox(height: 200,),
    Container (
        width: 100,
        height: 100,
        color: Colors.green,
        child: const Text('Widget3')
    ),
  ],
);

Containerと何が違う？？
SizedBoxは、widthやheightでスペースを構築するが
Containerは、margin, padding, alignment, transformなど
プロパティが多い。
SizedBoxはconst修飾子を使うことでコンパイル定数として宣言できるため、実行時のインスタンス生成コストが発生しない。
よって、widthやheightだけで事足りるならSizedBoxを使用する（const忘れずに）