CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2021/09/07 11:00

目次

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

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

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

図13: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というのもあります。

まとめ

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

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



  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:Flutterで始めるモバイルアプリ開発

もっと読む

著者プロフィール

  • WINGSプロジェクト 小林 昌弘(コバヤシ マサヒロ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。個人紹介主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5