CodeZine(コードジン)

特集ページ一覧

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

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

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

目次

Centerウィジェット/Alignウィジェット

 そこで、Containerウィジェットの用途をより限定したCenterウィジェットAlignウィジェットなどがあります。

 Centerウィジェットは、簡単にウィジェットを中央に配置するためのレイアウトで、リスト5のように利用します。

[リスト5]Centerウィジェットでの利用例(lib/CenterWidget.dartの抜粋)
return Center(
  child: Container(
    color: Colors.deepOrange,
    width: 200,
    height: 200,
    margin: EdgeInsets.all(20),
  ),
);

 このコードを実行した結果が、図5です。

図5:Centerウィジェットの実行結果
図5:Centerウィジェットの実行結果

 Alignウィジェットは、alignmentプロパティで指定して配置するためのウィジェットで、リスト6のように利用します。

[リスト6]Alignウィジェットでの利用例(lib/AlignWidget.dartの抜粋)
return Align(
  alignment: Alignment.topRight,
  child: Container(
    width: 200,
    height: 200,
  color: Colors.blue,
  ),
);

 このコードを実行した結果が、図6です。

図6:Alignウィジェットの実行結果
図6:Alignウィジェットの実行結果

 このようにContainerウィジェットでも実現可能ですが、目的がはっきりとするためコードの目的にそってわかりやすくなるという特徴があります。

AspectRatioウィジェット(サイズを比率で指定する)

 先ほど、紹介したCenterウィジェットやAlignウィジェットなどはContainerウィジェットの機能を限定したような使い方になります。

 しかし、Containerウィジェットのプロパティ指定だけでは難しいこともあります。そのようなウィジェットの1つに、AspectRatioウィジェットがあります。

 このウィジェットは、親ウィジェットのサイズに応じてサイズ比率を決定するためのウィジェットです。

 例えば、リスト7は親ウィジェットの大きさに合わせて、16(横):9(縦)の比率でサイズを指定したい場合のコード例です。

[リスト7]AspectRatioウィジェットの利用例(lib/AspectRatioWidget.dartの抜粋)
return AspectRatio(
  // (1) 16/9で指定
  aspectRatio: 16/9,
  child: Container(
    margin: EdgeInsets.all(20),
    color: Colors.blue,
  ),
);

 (1)のように、aspectRatioプロパティに16:9の場合には16/9で指定します。計算結果である約1.7のような値を入れるとどのような意図かわかりにくくなるので、16/9のように比率で入力することが推奨されています。このコードを実行した結果が図7のようになります。

図7:AspectRatioを利用したコードの実行結果
図7:AspectRatioを利用したコードの実行結果

Column/Row(子ウィジェットを縦/横並びにそろえて配置する)

 続いて、複数の子ウィジェットを配置するレイアウトを紹介します。これらの主なレイアウトには主に表2のようなものがあります。

 その中で、まずは最も基本的ととなるレイアウトであるColumnとRowを紹介します。

表2:主なMulti-child layout Widgets
ウィジェット名 説明
Column ウィジェットを縦に並べるレイアウト
Row ウィジェットを横に並べるレイアウト
GridView ウィジェットを縦横に並べるレイアウト
IndexedStack 指定するウィジェットに表示を簡単に切り替えるためのレイアウト
ListView スクロールすることを想定し、ウィジェットを縦にリスト形式で並べるレイアウト
Stack ウィジェットを重ねて表示するためのレイアウト
Table ウィジェットを縦横に並べ、かつスクロール表示が必要ないためのレイアウト
Wrap ウィジェットを縦または横に並べ、はみ出したものは自動的に次の行または列に表示するレイアウト

 この2つは指定した子ウィジェットを縦もしくは横に並べます。おおよそ、同じような使い方ですが、それぞれのウィジェットをどのように並べるかの指定で注意が必要です。

 並べ方には、子ウィジェットをどのように配置するかを示すmainAxisAlignmentプロパティと、各ウィジェット間での位置揃えを設定するcrossAxisAlignmentの2つのプロパティがあります。

 ColumnRowでは、この2つのプロパティの意味合いが変化します。以下の図を確認しておきましょう。

図8:Column/RowとmainAxisAlignment/crossAxisAlignmentの対応
図8:Column/RowとmainAxisAlignment/crossAxisAlignmentの対応

 Columnの場合には、mainAxisAlignmentの違いによって図9のように配置が変わります。start/end/centerの違いはわかりやすいと思います。

 spaceBetweenは各要素間の間隔を同じにします。そして、spaceEvenlyは、両側のウィジェットと親要素の間隔も含めて同じにします。spaceAroundは、両側のみの間隔のみ1/2にします。

図9:ColumnでのmainAxisAlignmentの指定の違い
図9:ColumnでのmainAxisAlignmentの指定の違い

 一方、crossAxisAlignmentの指定の違いを示したものが図10です

図10:ColumnでのcrossAxisAlignmentの指定の違い
図10:ColumnでのcrossAxisAlignmentの指定の違い

 start/end/centerでは子要素をどこで位置揃えをするかを決めます。また、stretchでは、最も大きい要素に合わせてサイズを調整します。実際のコードはリスト8のように記述します。

[リスト8]Columnウィジェットの利用例(lib/ColumnWidget.dartの抜粋)
return Column(
  mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      childContainer(100, 100),
      childContainer(200, 100),
      childContainer(100, 200),
      childContainer(200, 200),
    ],
);

 このコードを実行した結果が、図11のようになります。

図11:Columnでのコード実行例
図11:Columnでのコード実行例

 Rowでもほぼコードは変わらず、リスト9のように使用します。

[リスト9]Rowウィジェットの利用例(lib/RowWidget.dartの抜粋)
return Row(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.start,
  children: [
    childContainer(50, 50),
    childContainer(100, 50),
    childContainer(50, 100),
    childContainer(100, 100),
  ],
);

 このコードを実行した結果が、図12のようになります。

図12:Rowでのコード実行例
図12:Rowでのコード実行例

 このようにmainAxisAlignmentとcrossAxisAlignmentのプロパティは同じですが、ColumnとRowでは向きが変わります。


  • 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