2020/10/19 Flutter : SizedBox widgetの訳

SizedBoxがウィジェットをラップするとき、heightプロパティとwidthプロパティを使用してウィジェットのサイズを変更します。

ウィジェットをラップしない場合は、heightプロパティとwidthプロパティを使用して空のスペースを作成します。

sample1-1(まず、ただのContainerウィジェットを表示)

//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],
          ),

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

        ],
      ),
    );
  }
}

↓result

sample1-2(上のContainerをSizedBoxでラップしてサイズを変える)

//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>[
          //↓SizedBoxウィジェットでラップする。
          SizedBox(
            width:200,
            height:200,
            child: Container(
              width: 100,
              height: 100,
              color: Colors.pinkAccent[200],
            ),
          ),

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

        ],
      ),
    );
  }
}

↓result

sample1-3(空のSizedBoxを配置してスペースを配置する。)

//sample1-3
//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],
          ),
          //↓空のSizedBoxでスペースを作る。
          SizedBox(
            height:50,
          ),

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

        ],
      ),
    );
  }
}

参考

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

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