⚡

【Flutter】React Native エンジニアが学ぶレイアウト

2022/07/25に公開

Flutter

Dart

tech

普段は業務で React Native を使用したアプリケーションを作成しているので、そこと対比しつつ学んでいます。

FlutterのUIレイアウト

React Native ではWebで培ったHTML/CSSの知識を生かしてマークアップできます。Flutterでは若干勝手が異なります。

div や View の代わりに Container を使用する
Column / Row でレイアウトを調整できる
Expanded で flex する
Stack で要素を重ねる

Container

React / React Native でいう div や View に似ています。Container には高さや横幅、背景色など様々な設定ができます。UIの基本的な単位となるものです。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MyApp",
      home: Scaffold(
        body: Center(
          child: Container(
            color: Colors.blue,
            width: 300.0,
            height: 300.0,
            child: Text("Hello World!"),
            alignment: Alignment.center,
          ),
        ),
      ),
    );
  }
}

Row / Column

Row/Column を利用することで、Gridレイアウトが可能です。
ポイントとしては、mainAxisAlignment を使用して列や行を画面のどの位置に配分するかを指定することです。
これはWeb や React Native でいうと justifyContent や alighnItems の設定と同様です。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MyApp",
      home: Container(
        child: Row(  // 行
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,  // 他にstart、end、spaceAroundなど
          children: <Widget>[
            Column(  // 列
              mainAxisAlignment: MainAxisAlignment.center,  // 中央に配置
              children: <Widget>[
                Container( color: Colors.blue, width: 100, height:100 ),
                Container( color: Colors.red, width: 100, height:100 ),
                Container( color: Colors.yellow, width: 100, height:100 ),
              ],
            ),
            Column(  // 列
              mainAxisAlignment: MainAxisAlignment.center,  // 中央に配置
              children: <Widget>[
                Container( color: Colors.green, width: 100, height:100 ),
                Container( color: Colors.orange, width: 100, height:100 ),
                Container( color: Colors.white, width: 100, height:100 ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Expanded

これはWeb や React Native でいうと flex の設定と同様です。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "MyApp",
      home: Container(
        child: Row(
          children: <Widget>[
            Expanded(  // 引き延ばして表示
                flex: 1,
                child:Container( color: Colors.red)
            ),
            Expanded(
              flex: 2,
              child:Container( color: Colors.green),
            ),
            Expanded(
              child:Container( color: Colors.blue),
              flex: 3,
            ),
          ],
        ),
      ),
    );
  }
}

Stack

要素同士を重ねる場合は Stackを使用します。配列内の最初の要素が一番下、最後の要素が一番上になります。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: Text("MyApp"),
            ),
            body: Stack(  // 重ねて表示
              children: <Widget>[
                Container(
                    width: 200,
                    height: 200,
                    color:Colors.red
                ),
                Container(
                  width: 100,
                  height: 120,
                  color: Colors.green,
                ),
                Container(
                  width: 50,
                  height: 70,
                  color: Colors.blue,
                )
              ],
            )
        )
    );
  }
}