2020/10/19 Flutter : Spacer widgetの訳

SizedBoxと似た働きのウィジェットとして、Spacerウィジェットでもウィジェットの間にスペースを配置することができます。

Tip:SizedBoxとSpacerの使い分け

flexプロパティを使用してスペースを作りたい場合はSpacerを使います。

高さ・幅を●●px、と具体的に指定したい場合はSizedBoxを使います。

---

sample1-1

//sample1-1
//main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Container(
            width: 100,
            height: 100,
            color: Colors.pinkAccent[200],
          ),
          //↓Spacerウィジェットでスペースを作る。
          Spacer(
            flex:1,
          ),

          Container(
            width: 100,
            height: 100,
            color: Colors.pinkAccent[700],
          ),


        ],
      ),
    );
  }
}

↓result

これだけだとなぜこうなるのかピンと来ませんが、まずinflexibleな二つのウィジェットが先に配置されて、その後にSpacerが残りの領域を占有する、という流れだと思われます。sample1-1では、flexibleなウィジェットがSpacerのみなので、それが全ての余りの領域を占有している、と。

もう一つSpacerを一番下に配置するとsample1-2のようになります。

sample1-2

//sample1-2
//main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(
    MyApp(),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          Container(
            width: 100,
            height: 100,
            color: Colors.pinkAccent[200],
          ),
          //↓上のスペースが余り領域の1/5を占有する
          Spacer(
            flex:1,
          ),

          Container(
            width: 100,
            height: 100,
            color: Colors.pinkAccent[700],
          ),
          //↓下のスペースが余り領域の4/5を占有する
          Spacer(
            flex:4,
          ),

        ],
      ),
    );
  }
}

↓result

最初にinflexibleな二つのウィジェットが先に配置されるのはsample1-1と同様。

上のスペース(二つのContainerの間)が全余り領域の1/5。

下のスペース(下のContainerの下部)が全余り領域の4/5。

参考

https://flutter.dev/docs/codelabs/layout-basics

https://flutter.dev/docs/codelabs/layout-basics#spacer-widget