現役エンジニアに悩みや疑問を30分間無料で質問し放題!

【Flutter】Expandedの使い方|Column・Rowの空いたスペースを埋める

所有時間1分

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

Expandedを使えばColumnやRowなどの空いたスペースをレスポンシブに埋めることができます!

目次

Expandedの基本プロパティ

Expandedで余白を埋める

Expandedあり
Expandedなし

Expandedを使えばColumn, Rowなどの余白を埋められます。

//ソース(Expandedあり)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          children: [
            Container(
              color: Colors.red,
              width: 100.0,
              height: 100.0,
            ),
            Expanded(
              child: Container(
                color: Colors.green,
                width: 100.0,
              ),
            ),
            Container(
              color: Colors.yellow,
              width: 100.0,
              height: 100.0,
            ),
          ],
        ),
      ),
    );
  }
//ソース(Expandedなし)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Column(
          children: [
            Container(
              color: Colors.red,
              width: 100.0,
              height: 100.0,
            ),
            Container(
              color: Colors.yellow,
              width: 100.0,
              height: 100.0,
            ),
          ],
        ),
      ),
    );
  }

flex(複数のExpandedを使用する場合)

複数のExpandedを同じColumn内で使用する場合、flexプロパティで各Expanededのサイズ比を指定できます。

全てのExpandedのサイズを同比率にしたい場合はflexは必要ありません。

//ソース
 Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Flutter"),
        ),
        body: Row(
          children: [
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.red,
                height: 100.0,
              ),
            ),
            Container(
              color: Colors.green,
              height: 100.0,
              width: 100.0,
            ),
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.yellow,
                height: 100.0,
              ),
            ),
          ],
        ),
      ),
    );
  }

以上です。

  • URLをコピーしました!
目次
閉じる