【Flutter】SizedBoxの使い方｜childのサイズ指定・空きスペース作成

今回は「SizedBox」の基本的な使い方について紹介します。

SizedBoxを使えばchildのサイズを指定したり、空きスペースを作ったりできます！

SizedBoxの基本プロパティ

width/height

weightプロパティで横幅、heightプロパティで高さを指定できます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const SizedBox(
          width: 200.0,
          height: 300.0,
          child: Card(
            color: Colors.yellow,
            child: Center(
              child: Text('Hello World!'),
            ),
          ),
        ),
      ),
    );
  }

SizedBox.expand

SizedBox.expandを使えば「width: double.infinity」、「height: double.infinity」を使わなくても、SizedBoxの幅を親ウィジェットに合わせられます。

//ソース
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: const SizedBox.expand(
          child: Card(
            color: Colors.yellow,
            child: Center(
              child: Text('Hello World!'),
            ),
          ),
        ),
      ),
    );
  }

以上です。