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,)),
        ],
      ),
    ),
  )

score -1 · Accepted Answer · answered Jul 30 '21 at 07:04

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,)),
    ],
  ),
),
)

This is just an example. Actually, in my real needs, I need to use Expanded for layout with different flex coefficients. — bppleman, Jul 30 '21 at 07:25

Flutter: use Expanded inside a SingleChildScrollView

1 Answers1