🐈

【Flutter Widget of the Week #29】SizedBoxを使ってみた

2022/12/03に公開

Flutter

初心者

sizedbox

tech

はじめに

Flutter Widget of the Week #29 SizedBox についてまとめましたので、紹介します。
https://youtu.be/EHPu_DzRfqA

SizedBox

Widget のサイズを細かく指定して正確に表示したいときはないでしょうか？
例えば、このボタンを200px幅で表示したいといったようにです。
ボタンを200px幅で表示したいとき
今回紹介する SIzedBox を使えばすごく簡単にできます。
サンプルを動かしながら使い方を見てみましょう。

SizedBox サンプルコード

SizedBox サンプル実行画面（横幅のみ指定）

基本のサンプルコード全体

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

  @override
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        // サイズを設定したい widget をSizedBox で囲む
        child: SizedBox(
          width: 200,  // 幅を指定
          child: Card(
            color: Colors.red,
            child: Text('Hello World!'),
          ),
        ),
      ),
    );
  }
}

使い方はとてもシンプルです。
サイズを細かく設定したい widget を SizedBox で囲み、px（ピクセル）で大きさを指定します。
上記のサンプルでは子の Card の幅を 200px に指定しています。
さらに高さも指定するとサイズを完全に管理できます。

child: SizedBox(
  width: 200,
  height: 300,  // 高さを指定
  child: Card(
    color: Colors.red,
    child: Text('Hello World!'),
  ),
),

SizedBox サンプル実行画面（高さの指定を追加）
このように SizedBox は特定のサイズを持つ widget で、子要素にも同じサイズを指示します。

他にも一方向に無限のサイズを持つようにしたい場合は double.infinity を指定します。
無限と言っていますが、画面の幅を超えてしまうわけではありません。親の許容限度内で拡大してくれるので、エラーにならずに収めることができます

child: SizedBox(
  width: double.infinity, // 幅を無限のサイズに指定
  height: 300,
  child: Card(
    color: Colors.red,
    child: Text('Hello World!'),
  ),
),

SizedBox サンプル実行画面（幅を無限にする）

幅だけでなく、高さも無限にすることで空き領域を埋めてくれます。

child: SizedBox(
  width: double.infinity, // 幅を無限のサイズに指定
  height: double.infinity, // 高さを無限のサイズに指定
  child: Card(
    color: Colors.red,
    child: Text('Hello World!'),
  ),
),

SizedBox サンプル実行画面（幅だけでなく、高さも無限にする）

SizedBox は子がなくても使用でき、何も描画しないけれど、その領域を埋めてくれます。

SizedBox のコンストラクタについて

SizedBox にはいくつかコンストラクタがあるので、紹介します。

SizedBox.expand

親のwodgetが許す限りの大きさのSizedBoxが作られます。
height と width 両方に double.infinity を指定することでもできるものになりますが、SizedBox.expand でも簡単にできます。

const SizedBox.expand({
  Key? key,
  Widget? child
})

SizedBox.fromSize

size プロパティに Sizeインスタンスで高さと幅を設定したのを入れることでサイズを指定できます。

SizedBox.fromSize({
  Key? key,
  Widget? child,
  Size? size
})

SizedBox.shrink

高さと幅が0.0に設定されている SizedBoxが作られます。

const SizedBox.shrink({
  Key? key,
  Widget? child
})

SizedBox.square

dimensionプロパティにて設定したdoubleの値を高さと幅に持つ正方形を作れるSizedBoxです。

const SizedBox.square({
  Key? key,
  Widget? child,
  double? dimension
})

最後に

今回は SizedBox を紹介しました。サイズ指定が簡単にできるこの widget はよく使うので、
是非使い方を覚えて活用してみてください！
次は #30 ValueListenableBuilder です。またお会いしましょう。