Flutterの基本的なレイアウトの考え方・仕組みを学ぼう

Flutterで始めるモバイルアプリ開発 第11回

Wrap（はみ出すウィジェットを自動調整するウィジェット）

　ColumnやRowでは、子ウィジェットが多くなってしまったときにはみ出してしまうケースがあります。そのような場合に、自動的に調整するウィジェットがWrapウィジェットです。

　例えば、親となるウィジェットや画面サイズがコード記述時にはわからなく、実行時にしか決まらないという場合があります。そのような場合には、表示する場所を図のようにはみ出さずに下に描画してほしいということがよくあります。

図13:Wrapが必要なケース

　リスト10は実際のWrapを使ったコード例です。

［リスト10］Wrapウィジェットの利用例（lib/WrapWidget.dartの抜粋）

var colors = [Colors.red, Colors.blue, Colors.green, Colors.amber];
return Wrap(
  // （1） 並べる方向
  direction: Axis.horizontal,
  // （2） 次のウィジェット(この場合には横)との間隔
  spacing: 10,
  // （3） この場合には縦方向の間隔
  runSpacing: 40,
  children: [
    for(var i = 0; i < 4; i++)
      for(Color color in colors)
        childContainer(color)
    ],
);

　（1）は、並べる方向になります。horizontalでは、横に並べていき、はみ出したときに下にずれるようになります。この値をverticalにすれば、縦に並べていきはみ出したときに、横にずれるようになります。

　そして、spacingが隣のウィジェットとの間隔になります。今回横方向に描写していっているので、横の間隔になります。（3）runSpacingが今回の場合には縦方向の間隔になります。似たようなウィジェットにGridViewというのもあります。

まとめ

　今回は非常に基本的なレイアウトに限定して使い方を紹介しました。公式サイトに今回紹介したレイアウトや他のレイアウト情報などもビデオ付きで紹介されているので、一度目を通しておくとよいと思います。

　レイアウトの中に、組み合わせて使うことで意味があるものもあります。次回はそういったレイアウトや、今回紹介したレイアウトなども使ったデモ画面を通じて、レイアウトの使用例を紹介します。