Flutterで基本的なレイアウトを作成する

投稿日: 2022-04-20 2022-10-07
タグ: Flutter

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

前提条件

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

足場

The 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 {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

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

コンテナ

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

マージンとパディング

間隔の制御は少し奇妙な場合があります。パディングまたはマージンをピクセル数に直接設定する代わりに、上のプロパティに設定する必要があります。 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 {
  @override
  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),
        ),
      ),
    );
  }
}

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

列と行

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

中にコンテナを入れたら Expanded ウィジェットの場合、列または行の最大量のスペースを占有します。

フレックスボックスがウェブ上でどのように機能するかと同様に、 mainAxisAlignment と crossAxisAlignment と同じことをする justify-content と align-items. と同じオプションもあります start, center, end, spaceEvenly, spaceAround, spaceBetween、と stretch.

main.dart

class App extends StatelessWidget {
  @override
  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')),
            ],
          )
        ]);
  }
}

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

結論

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

getdocs

13036