【Widget of the Week】#3 Wrap

ホーム
BLOG
【Flutter】
【Widget of the Week】#3 Wrap

【Flutter】
2021.08.02

【Widget of the Week】#3 Wrap

【#3 Wrap】動画
【#3 Wrap】概要
【#3 Wrap】解説
【#3 Wrap】サンプルコード①（child）
【#3 Wrap】サンプルコード②（spacing）
【#3 Wrap】サンプルコード③（runSpacing）
【#3 Wrap】サンプルコード④（direction）
【#3 Wrap】サンプルコード⑤（alignment）

【#3 Wrap】動画

【#3 Wrap】概要

①FlutterのレイアウトにはRowとColumnが最適！
②RowとColumnはスペースが足りなくなることがあるよー
③RowとColumnの代わりにWrapウィジェットが大活躍！

【#3 Wrap】解説

①FlutterのレイアウトにはRowとColumnが最適！

大抵の場合、Flutterでは複数のウィジェットを横に並べて表示したい時はRowウィジェット、縦に並べて表示したい時はColumnウィジェットを使用します。

RowとColumnの基本的な使い方は過去にExpandedについてまとめた記事で解説しているので気になる方はご覧になってください！

【Widget of the Week】#2 Expanded

②RowとColumnはスペースが足りなくなることがあるよー

RowとColumnは大変便利なウィジェットなのですが、あまり数多くのウィジェットを並べることには対応してなかったりします。

画面の大きさを超えるほど多くのウィジェットを並べてしまうと超えた部分は見切れてしまうという問題が発生してしまいます。

そんな時はWrapウィジェットを活用しましょう！

③RowとColumnの代わりにWrapウィジェットが大活躍！

RowやColumnで並べたウィジェットが画面から見切れてしまった時はWrapウィジェットの使用を検討してみよう！

Wrapウィジェットは画面幅や高さに合わせてはみ出した子ウィジェットを次の行または列へ並べ変えてくれます。

基本的なプロパティと使い方は以下の通りです。

主なプロパティ

①children

型： List<Widget>
RowとColumn同様、並べたいウィジェットを設定する。
②spacing
型：double
子ウィジェット間のスペースを設定できる。
③runSpacing
型：double
個別のウィジェットごとではなく、行または列の間にスペースを設定できる。
④direction
型：Axis
Wrapウィジェットの表示方向を設定できる。
Axis は列挙型として宣言されていて縦を表す vertical、横を表す horizontal が用意されている。
デフォルトはhorizontalなので特に設定しなければ横向きになる。
⑤alignment
型：WrapAlignment
子ウィジェットの配置を設定できる。
Axis は列挙型として宣言されていてcenter, start, end, spaceEvenly, spaceAroundなどがある。
※詳細はこちら（公式ドキュメント）

【#3 Wrap】サンプルコード① （children）

// Wrapウィジェットでラップすることで子ウィジェットが見切れることなく表示される
Wrap(
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.yellow,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.brown,
    ),
  ],
),

【#3 Wrap】サンプルコード②（spacing）

Wrap(
  // 子ウィジェット間にスペースをつける
  spacing: 30.0,
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.yellow,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.brown,
    ),
  ],
),

【#3 Wrap】サンプルコード③（runSpacing）

Wrap(
  // 行の間にスペースをつける
  runSpacing: 30.0,
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.yellow,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.brown,
    ),
  ],
),

【#3 Wrap】サンプルコード④（direction）

Wrap(
  // 縦方向に表示する
  direction: Axis.vertical,
  children: <Widget>[
    Container(
      width: 100,
      height: 200,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.yellow,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 200,
      color: Colors.brown,
    ),
  ],
),

【#3 Wrap】サンプルコード⑤（alignment）

WrapAlignment.center

WrapAlignment.start

WrapAlignment.end

WrapAlignment.spaceEvenly

Wrap(
  // 子ウィジェットの配置を中央寄せにする
  alignment: WrapAlignment.center,
  children: <Widget>[
    Container(
      width: 100,
      height: 100,
      color: Colors.red,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.blue,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.yellow,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.green,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.brown,
    ),
    Container(
      width: 100,
      height: 100,
      color: Colors.orange,
    ),
  ],
),

投稿者プロフィール

ArisawaRyoma

社会人歴２年目の駆け出しエンジニアです。

学生の時はがっつり文系（＝遊んだただけ）でほぼPCに触れずに生きてきたので、プログラミングは日々勉強中。Vue / React / Django / Springなど色々浮気して今はFlutterにハマってます。

趣味は海外旅行、釣り、卓球など。

Twitterでも色々発信してるので良ければフォローお願いします。