【Flutter】SizedBoxの使い方｜ウィジェットのサイズと余白を調整する

「サイズ変更できないウィジェットのサイズを調整したい」

こんな時に便利なのが SizedBox ウィジェットです。

SizedBoxを使用することでサイズ変更できないウィジェットのサイズを調整したり、Columnで並んでいるウィジェット間の余白を微調整したりできます。

それではSizedBoxの基本的な使い方とカスタマイズ方法について解説していきます！

基本的な使い方

SizedBoxの基本的な使い方について解説します。

SizedBoxの主な役割には「ウィジェットのサイズ調整」と「余白調整」の2つがあります。

ウィジェットのサイズ調整

ウィジェットの中にはCardのようにwidthプロパティ、heightプロパティが備わってなくサイズ調整できないウィジェットがあります。

そんな場合はSizedBoxのchildプロパティにサイズ調整したいウィジェットを渡し、SizedBoxのwidthプロパティ、heightプロパティで代わりにサイズを調整できます。

SizedBox(
  height: 100,
  width: 200,
  child: Card(...),
)

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatelessWidget {
  const MyWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Flutter')),
      body: Center(
        child: SizedBox(
          height: 100,
          width: 200,
          child: Card(
            color: Colors.blue,
            child: Center(
              child: Text(
                'Hello World',
                style: TextStyle(
                  fontSize: 30,
                  color: Colors.white,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

余白調整

SizedBoxではchildプロパティを使用せずwidthプロパティ、heightプロパティの片方もしくは両方を使用して余白調整ができます。

使用例としてColumnで並べているウィジェット間の余白の微調整が挙げられます。

Column(
  children: [
    WidgetA(),    
    SizedBox(height: 100),
    WidgetB(),
    SizedBox(height: 50),
    WidgetC(),
  ],
),

カスタマイズ方法

続いてSizedBoxのカスタマイズ方法について解説します。

垂直または水平方向いっぱいに広げる

SizedBoxを垂直または水平方向に親ウィジェットが許す範囲いっぱいに広げるにはwidthプロパティまたはheightプロパティの引数にdouble.infinityを渡します。

SizedBox(width: double.infinity),

全方向いっぱいに広げる

SizedBoxを全方向に対して親ウィジェットが許す範囲いっぱいに広げるにはSizedBox.expandコンストラクタを使用します。

SizedBox.expandには使用上widthプロパティとheightプロパティは存在しません。

SizedBox.expand(),

まとめ

今回はSizedBoxの基本的な使い方とカスタマイズ方法について解説しました。

SizedBoxを使用することでサイズ変更できないウィジェットのサイズを調整したり、Columnで並んでいるウィジェット間の余白を微調整したりできるのでぜひ使ってみてください。