SingleChildScrollView の中で Expanded を使うとき

問題

キーボードを表示させた時にレイアウトが崩れてエラーが発生するので、SingleChildScrollView() を使って解決しようとするが、子要素の Column() の中に Expanded() が含まれているため、別のエラーが発生する。

エラー発生時のコード

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
	child: Column(
	  children: [
	    Expanded(
	      child: Container(
		// some contents
	      ),
	    ),
	    Container(
	      height: 80.0,
	      child: Column(
		children: [
		  // some contents
		],
	      ),
	    ),
	  ],
	),
      ),
    );
  }

解決法

→ Column() を Container() で包み、height を指定する。

解決したコード

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
	  height: MediaQuery.of(context).size.height,
	  child: Column(
	    children: [
	      Expanded(
	        child: Container(
		  // some contents
	        ),
	      ),
	      Container(
	        height: 80.0,
	        child: Column(
		  children: [
		    // some contents
		  ],
	        ),
	      ),
	    ],
	  ),
	),
      ),
    );
  }

こうすることで、レイアウトが崩れることなく、キーボードが出ている状態で全画面をスクロールすることができました。