Flutter入門 | レイアウトについて！！

今回は公式ドキュメントをもとにFlutterのレイアウトについて解説していきます！！

Flutterのレイアウトを理解する

Flutter のレイアウトメカニズムの中核はウィジェットです。Flutter では、ほぼすべてがウィジェットです。レイアウトモデルもウィジェットです。Flutter アプリに表示される画像、アイコン、テキストはすべてウィジェットです。行、列、グリッドなど、表示ウィジェットを配置、制約、整列させる目に見えないものもウィジェットです。

より複雑なウィジェットを構築するには、ウィジェットを組み合わせてレイアウトを作成します。

制約

Flutter の制約を理解することは、Flutter でのレイアウトの仕組みを理解する上で重要な部分です。

レイアウトとは、一般的にはウィジェットのサイズと画面上の位置を指します。特定のウィジェットのサイズと位置は、その親によって制約されます。ウィジェットは任意のサイズにすることはできず、画面上の位置を自分で決めることもありません。代わりに、サイズと位置はウィジェットとその親の間の関係によって決定されます。

最も単純な例では、レイアウトの関係は次のようになります。

ウィジェットは親から制約を受け取ります。
制約は、最小幅と最大幅、最小高さと最大高さの 4 つです。
ウィジェットは、これらの制約内でサイズを決定し、その幅と高さを親に渡します。
親は、希望するサイズと配置方法を確認し、それに応じてウィジェットの位置を設定します。配置は、 Rowや Columnなどのさまざまなウィジェットや、およびCenterの配置プロパティを使用して明示的に設定できます。

単一のウィジェットをレイアウトする

Flutter で単一のウィジェットをレイアウトするには、 Textや Imageなどの表示可能なウィジェットを、
Centerなどの画面上の位置を変更できるウィジェットでラップします。

Center

Centerの中にImage.network（ネットにアップロードされている画像を表示するウィジェット）を配置することで画像が中央に配置されています。


     Widget build(BuildContext context) {
         return Center(
             child: Image.network(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
         );
     }

すべてのレイアウトウィジェットには、次のいずれかが含まれます。

単一の子を取る場合のプロパティ。たとえばCenterまたはContainer、Paddingの中にはchildが含まれます。
ウィジェットのリストを取る場合のプロパティ。RowまたはColumn。ListViewStackの中にはchildrenが含まれます。

Container

Containerは、レイアウト、ペイント、配置、サイズ設定を行う複数のウィジェットで構成された便利なウィジェットです。レイアウトに関しては、ウィジェットにパディングとマージンを追加するために使用できます。
ここで同じ効果を得られるPaddingウィジェットもあります。次の例では Containerを使用します。


     Widget build(BuildContext context) {
       return Container(
         padding: EdgeInsets.all(16.0),
         alignment: Alignment.topLeft,
         child: Image.network(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
       );
     }

次の図は、上側にパディングのないウィジェット、下側にパディングのあるウィジェットを示しています。

Flutter でより複雑なレイアウトを作成するには、多くのウィジェットを組み合わせます。たとえば、
Containerと Centerを組み合わせることができます。


     Widget build(BuildContext context) {
       return Center(
         Container(
           padding: EdgeInsets.all(16.0),
           child: Image.network(
                      'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
            );
         ),
       );
     }

複数のウィジェットを垂直または水平にレイアウトする

最も一般的なレイアウトパターンの 1 つは、ウィジェットを垂直または水平に配置することです。
Rowウィジェットを使用してウィジェットを水平に配置し、Columnウィジェットを使用してウィジェットを垂直に配置することができます。


     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
               body: Row(
                 children: [
                   Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                   Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                   Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                 ],
             ),
            ));
            );
          }

RowまたはColumnの各子は、それ自体が行と列になることができ、それらを組み合わせることで複雑なレイアウトを作成できます。たとえば、列を使用して、上記の例の各画像にラベルを追加できます。


     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
               body: Row(
                 children: [
                    Column(
                      children: [
                        Image.network(
                            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                        Text('Dash 1'),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                        Text('Dash 2'),
                      ],
                    ),
                    Column(
                      children: [
                        Image.network(
                            'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                        Text('Dash 3'),
                      ],
                    ),
                  ],
                  ),
            ));
            );
          }

行と列内のウィジェットのサイズ設定

レイアウトが大きすぎてデバイスに収まらない場合は、影響を受けるエッジに沿って黄色と黒の縞模様が表示されます。

Expandedウィジェットを使用すると、ウィジェットのサイズを行または列内に収まるように変更できます。画像の行がレンダリングボックスに対して幅が広すぎるのを修正するには、各画像をExpandedウィジェットで囲みます。


     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
           body: Row(
             children: [
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                ),
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
               ),
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
               ),
             ],
           ),
         ));
       }
     }

Expandedウィジェットは、兄弟ウィジェットと比較してウィジェットが占めるスペースの量を指定することもできます。たとえば、ウィジェットが兄弟ウィジェットの 2 倍のスペースを占めるようにしたいとします。この場合は、Expandedウィジェットのフレックス係数を決定する整数であるflex widgetsプロパティを使用します。デフォルトのフレックス係数は 1 です。次のコードは、中央の画像のフレックス係数を 2 に設定します。


     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
           body: Row(
             children: [
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
                ),
               Expanded(
                 flex: 2,
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
               ),
               Expanded(
                 child: Image.network(
                     'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
               ),
             ],
           ),
         ));
       }
     }

ウィジェットを行と列内に配置する

RowまたはColumnが子要素をどのように配置するかは、プロパティmainAxisAlignmentとcrossAxisAlignmentプロパティを使用して制御します。Rowの場合、主軸は水平方向に、交差軸は垂直方向に実行されます。Columnの場合、主軸は垂直方向に、交差軸は水平方向に実行されます。

主軸の配置を spaceEvenlyに設定すると、各画像の間、各画像の前後の水平方向の空きスペースが均等に分割されます。


     Widget build(BuildContext context) {
         return MaterialApp(
             home: Scaffold(
           body: Row(
             mainAxisAlignment: MainAxisAlignment.spaceEvenly,
             children: [
               SizedBox(
                   width: 400,
                   height: 300,
                   child: Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')),
               SizedBox(
                   width: 400,
                   height: 300,
                   child: Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')),
               SizedBox(
                   width: 400,
                   height: 300,
                   child: Image.network(
                       'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg')),
             ],
           ),
         ));
       }

ColumnはRowと同じように機能します。主軸の配置を spaceEvenlyに設定すると、各画像の間、上、下の空き垂直スペースが均等に分割されます。

まとめ

今回はFlutterのレイアウトについて解説していきました！！

いかがだったでしょうか?

公式のドキュメントではもう少し続くのですが、長いので続きはまたの機会にしたいと思います。

次回はプロジェクトの作成方法などの基本的なことをまだ解説していなかったので、アプリを作成しながら進めていきたいと思います！！（不慣れで申し訳ありません…。）

良きFlutterライフを！！

2025-03-01

0件のコメント

コメントはまだありません。最初の一人になりましょう！

mohumohu studio

みずきの技術＆読書ブログ＆無料ゲーム