Flutter: use Expanded inside a SingleChildScrollView

Question

I have a page for filling out forms There is a flexible Expanded between each input box for interval. Their flex is different. I hope that when the keyboard pops up, these Expanded will be compressed first, and if the height is still not enough, then the column will be scrollable. eg:

When there is no keyboard, Expanded will occupy as high as possible

When the keyboard is raised, it will compress Expanded as much as possible

But when there are enough TextFields, I cannot make the Column scroll

Scaffold(
    // body: SingleChildScrollView(
    //   child: Container(
    //     constraints: BoxConstraints(
    //       maxHeight: 812.h,
    //       minHeight: 300.h
    //     ),
    //     child: Column(
    //       children: [
    //         Expanded(child: Container(color: Colors.red)),
    //         TextFormField(),
    //         Expanded(child: Container(color: Colors.yellow,)),
    //         TextFormField(),
    //         Expanded(child: Container(color: Colors.green,)),
    //         TextFormField(),
    //         Expanded(child: Container(color: Colors.blue,)),
    //         TextFormField(),
    //         Expanded(child: Container(color: Colors.purple,))
    //       ],
    //     ),
    //   ),
    // ),
    body: Container(
      constraints: BoxConstraints(
          maxHeight: 812.h,
          minHeight: 300.h
      ),
      child: Column(
        children: [
          Expanded(child: Container(color: Colors.red)),
          TextFormField(),
          Expanded(child: Container(color: Colors.yellow,)),
          TextFormField(),
          Expanded(child: Container(color: Colors.green,)),
          TextFormField(),
          Expanded(child: Container(color: Colors.blue,)),
          TextFormField(),
          Expanded(child: Container(color: Colors.purple,)),
          TextFormField(),
          Expanded(child: Container(color: Colors.purple,)),
          TextFormField(),
          Expanded(child: Container(color: Colors.purple,)),
          TextFormField(),
          Expanded(child: Container(color: Colors.purple,)),
          TextFormField(),
          Expanded(child: Container(color: Colors.purple,)),
        ],
      ),
    ),
  )

Answer 1

Try to add your column inside SingleChildScrollView() try below code and I think no need to use Expanded for column direct use TextFormField

body: SingleChildScrollView(
   child: Column(
    children: [
      Expanded(child: Container(color: Colors.red)),
      TextFormField(),
      Expanded(child: Container(color: Colors.yellow,)),
      TextFormField(),
      Expanded(child: Container(color: Colors.green,)),
      TextFormField(),
      Expanded(child: Container(color: Colors.blue,)),
      TextFormField(),
      Expanded(child: Container(color: Colors.purple,)),
      TextFormField(),
      Expanded(child: Container(color: Colors.purple,)),
      TextFormField(),
      Expanded(child: Container(color: Colors.purple,)),
      TextFormField(),
      Expanded(child: Container(color: Colors.purple,)),
      TextFormField(),
      Expanded(child: Container(color: Colors.purple,)),
    ],
  ),
),
)