Flutterはすぐにアプリ開発の主要なテクノロジーの1つになるため、Web開発環境の誰かがチェックアウトすることが重要です。 HTML、CSS、JavaScriptのバックグラウンドから来て、Flutterがすべてを処理する方法は私には非常に異質に思えました。 そこで、 Material Components を使用してシンプルなレイアウトを作成するために、アプリ内の要素を構造化するための基本事項だけに単純化してみます。

前提条件

すでにFlutterがインストールされており、エミュレーターをセットアップする必要があるので、ここでFlutterの使用を開始するについて説明しました。 公式ドキュメントに精通することも常にプラスです。

足場

Scaffoldはメインの構造をインスタンス化します。通常、アプリバーやナビゲーションなど、アプリ全体で一貫しているものは何でも、bodyをアプリのより興味深い部分に設定し、アプリから抽象化します。 runAppでは、ホットリロードも使用できます。

main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('I\'m an App'),
          backgroundColor: Colors.red[600],
        ),
        body: App(),
      ),
    ),
  );
}

class App extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Container();
  }
}

そして、これは次のようになります。

Scaffold

コンテナ

HTML divの場合と同様に、すべてのウィジェットに幅やパディングなどのプロパティがあるわけではないため、コンテナをラップして、要素を自分で操作できない場合に要素をより細かく制御できます。 コンテナには、heightwidthpaddingmarginなどのCSSと同じプロパティがいくつかあります。 デフォルトでは、子の最大スペースを占有し、空のコンテナーは親の最大スペースを占有しようとします。

マージンとパディング

間隔の制御は少し奇妙な場合があります。パディングまたはマージンをピクセル数に直接設定する代わりに、EdgeInsetsのプロパティに設定して、ピクセル単位で値を渡す必要があります。 要素をラップできるPaddingウィジェットもありますが、それでも以前と同じようにパディングを渡す必要があるため、実際には明示的にする必要があります。

  • EdgeInsets.all()
  • EdgeInsets.only(left: 0, top: 0, right: 0, bottom: 0)
  • EdgeInsets.symmetric(vertical: 0, horizontal: 0)
  • EdgeInsets.fromLTRB(left, top, right, bottom)明示的に割り当てられていない値を取得するだけです。
main.dart
class App extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      margin: EdgeInsets.only(top: 20, right: 50),
      child: Container(
        color: Colors.green,
        // Add 200px on top and bottom
        margin: EdgeInsets.symmetric(vertical: 200),
        child: Container(
          color: Colors.yellow,
          margin: EdgeInsets.fromLTRB(0, 20, 200, 20),
        ),
      ),
    );
  }
}

そして今、私たちはたくさんのコンテナを持っています:

Screenshot of container

列と行

コンテナの問題は、それぞれに1つの子しか持てないことです。 列ウィジェットと行ウィジェットを使用すると、要素の方向を制御しながら、より柔軟なバージョンのコンテナーを使用できます。 要素ごとにchildを渡すだけではなく、children<Widget>タイプの配列に設定してから、各要素を渡す必要があります。

Expandedウィジェット内にコンテナーを配置すると、その列または行の最大量のスペースを占有します。

フレックスボックスがWebでどのように機能するかと同様に、mainAxisAlignmentおよびcrossAxisAlignmentを使用して、justify-contentおよびalign-itemsと同じことを行うことができます。 startcenterendspaceEvenlyspaceAroundspaceBetweenstretch

main.dart
class App extends StatelessWidget {
  
  Widget build(BuildContext context) {
    return Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          // Row 1
          Row(
            children: <Widget>[
              Container(
                color: Colors.blue, height: 40, width: 40, child: Text('1')),
              Container(
                color: Colors.blue, height: 40, width: 40, child: Text('2')),
              Container(
                color: Colors.blue, height: 40, width: 40, child: Text('3')),
            ],
          ),
          // Row 2
          Row(
            children: <Widget>[
              Container(
                color: Colors.blue, height: 40, width: 40, child: Text('1')),
              //Will expand to fill all remaining space
              Expanded(
                  child: Container(
                    color: Colors.green,
                    height: 40,
                    width: 40,
                    child: Text('2'))),
              Container(
                color: Colors.blue, height: 40, width: 40, child: Text('3')),
            ],
          ),
          //Row 3
          Container(
              height: 100,
              child: Row(
                //Stretches to vertically fill its parent container
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  Container(
                    color: Colors.blue,
                    height: 40,
                    width: 40,
                    child: Text('1')),
                  Expanded(
                      child: Container(
                        color: Colors.green,
                        height: 40,
                        width: 40,
                        child: Text('2'))),
                  Container(
                    color: Colors.blue,
                    height: 40,
                    width: 40,
                    child: Text('3')),
                ],
              )),
          // Row 4
          Row(
            //Creates even space between each item and their parent container
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Container(
                color: Colors.blue, height: 40, width: 40, child: Text('1')),
              Container(
                color: Colors.blue, height: 40, width: 40, child: Text('1')),
              Container(
                color: Colors.blue, height: 40, width: 40, child: Text('3')),
            ],
          )
        ]);
  }
}

そして、これが私たちの行と列のスクリーンショットです:

Screenshot of columns and Rows

結論

Flutterでレイアウトを操作することは、一見するとWeb上では少し不格好で冗長に見えるかもしれませんが、すべての画面の動的グリッドや肥大化したメディアクエリの複雑さに対処する必要がないことも覚えておいてください。サイズ。 Flutterのレイアウトは、実際にはそうである必要がないため、以前のCSSよりも強力ではないように見える場合があります。 いくつかのコンテナ、列、行、および間隔を使用するだけで、必要以上の構造を取得できます。