I'm new to Flutter and have been trying to clone a screen that requires a scroll architecture.
Here is the link of the screen that i'm working on. https://i.stack.imgur.com/1OW2b.png
The code is as below.
PS: Ignore the fields that are incomplete. As soon as I get the scroll view, i'll add the functionalities afterwards.

Scaffold(
      body: Column(
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 40.0, 15.0, 0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: const <Widget>[
                        Icon(Icons.menu),
                        Image(),       //Asset image
                      ],
                    ),
                    Row(
                      children: <Widget>[
                        const Icon(Icons.notifications_none),
                        const SizedBox(width: 27.0),
                        CircleAvatar(
                          child: Text("JM"),
                        ),
                      ],
                    )
                  ],
                ),
                Row(
                  children: const <Widget>[
                    Icon(Icons.arrow_back),
                    SizedBox(width: 20.0),
                    Text("Public page"),
                  ],
                ),
                const SizedBox(
                  height: 20.0,
                ),
                const Text("  Please fill the form following the proper order."),
                const SizedBox(height: 10.0),

                OverviewWidget(), //Widget with lots of TextFormField
                SizedBox(height: 10.0),
                DescriptionWidget(), //Widget with lots of TextFormField

              ],
            ),
          ),
          Align([enter image description here][1]
            alignment: Alignment.bottomCenter,
            child: GestureDetector(
              onTap: () {
                print("Hello");
              },
              child: Container(
                height: 130.0,
                width: double.infinity,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.shade400,
                      blurRadius: 10,
                      spreadRadius: 1,
                    )
                  ],
                ),
                child: Container(
                  margin: const EdgeInsets.only(top: 10.0, bottom: 30.0),
                  decoration: BoxDecoration(
                    color: Colors.green.shade400,
                    borderRadius: BorderRadius.circular(35),
                  ),
                  child: const Padding(
                    padding: EdgeInsets.symmetric(
                      vertical: 15.0,
                      horizontal: 150.0,
                    ),
                    child: Text(
                      "Save",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 17,
                          fontWeight: FontWeight.w600),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );

So far, i've only created the Overview and Description widgets and i'm already getting RenderFlex overflow error. I tried wrapping the very first Column widget with a SingleChildScrollView widget but it can be noticed that the Save button at the bottom should stay fixed. I tried wrapping the whole widget with Stack widget instead of a Column widget but it didn't help either. I also used ListView widget but got the same results.
What shall I do to achieve this view?


Solution 1: Csisanyi

Consider wrapping the Column with an Expanded widget

You can also check out this flutter doc. It addresses this common issue in detail. https://flutter.dev/docs/testing/common-errors


Solution 2: Lulupointu

I guess you had all the elements but did not quite manage to use them as needed.

Your screen is composed of two important layout:

  • A stack (containing a button on top of a scrollable widget)
  • The scrollable widget

The stack has to be a stack, the scrollable can be anything but in your case SingleChildScrollView+Column seems the best choice.

Here is the concrete implementation:

Scaffold(
  body: Stack(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.fromLTRB(15.0, 40.0, 15.0, 0),
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.only(bottom: 100.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget>[
                        Icon(Icons.menu),
                        Container(
                          height: 100,
                          width: 100,
                          color: Colors.redAccent,
                        ),
                        //Asset image
                      ],
                    ),
                    Row(
                      children: <Widget>[
                        const Icon(Icons.notifications_none),
                        const SizedBox(width: 27.0),
                        CircleAvatar(
                          child: Text("JM"),
                        ),
                      ],
                    )
                  ],
                ),
                Row(
                  children: const <Widget>[
                    Icon(Icons.arrow_back),
                    SizedBox(width: 20.0),
                    Text("Public page"),
                  ],
                ),
                const SizedBox(
                  height: 20.0,
                ),
                const Text("  Please fill the form following the proper order."),
                const SizedBox(height: 10.0),

                Container(
                  height: 400,
                  color: Colors.blueAccent,
                ), //Widget with lots of TextFormField
                SizedBox(height: 10.0),
                Container(
                  height: 400,
                  color: Colors.greenAccent,
                ), //Widget with lots of TextFormField
              ],
            ),
          ),
        ),
      ),
      Align(
        alignment: Alignment.bottomCenter,
        child: GestureDetector(
          onTap: () {
            print("Hello");
          },
          child: Container(
            height: 130.0,
            width: double.infinity,
            alignment: Alignment.center,
            decoration: BoxDecoration(
              color: Colors.white,
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.shade400,
                  blurRadius: 10,
                  spreadRadius: 1,
                )
              ],
            ),
            child: Container(
              margin: const EdgeInsets.only(top: 10.0, bottom: 30.0),
              decoration: BoxDecoration(
                color: Colors.green.shade400,
                borderRadius: BorderRadius.circular(35),
              ),
              child: const Padding(
                padding: EdgeInsets.symmetric(
                  vertical: 15.0,
                  horizontal: 150.0,
                ),
                child: Text(
                  "Save",
                  style: TextStyle(
                      color: Colors.white, fontSize: 17, fontWeight: FontWeight.w600),
                ),
              ),
            ),
          ),
        ),
      ),
    ],
  ),
)

Note that you have to put a bottom padding inside the SingleChildScrollView to take into account the button. This is fine in your case since the button has a static height. However if you need something more fancy you might want to check How to create a scroll view with fixed footer with Flutter? as @Csisanyi suggested


Solution 3: Yeasin Sheikh

Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(15.0, 40.0, 15.0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Icon(Icons.menu),
// Image(), //Asset image

                        Image.asset(
                          'assets/ocean.jpg',
                          height: kToolbarHeight,

                          /// make sure of image height
                          fit: BoxFit.fitHeight,
                        ),
                      ],
                    ),
                    Row(
                      children: &lt;Widget&gt;[
                        const Icon(Icons.notifications_none),
                        const SizedBox(width: 27.0),
                        CircleAvatar(
                          child: Text(&quot;JM&quot;),
                        ),
                      ],
                    )
                  ],
                ),
                Row(
                  children: const &lt;Widget&gt;[
                    Icon(Icons.arrow_back),
                    SizedBox(width: 20.0),
                    Text(&quot;Public page&quot;),
                  ],
                ),
                const SizedBox(
                  height: 20.0,
                ),
                const Text(
                    &quot;  Please fill the form following the proper order.&quot;),
                const SizedBox(height: 10.0),

                //todo: OverviewWidget(), //Widget with lots of TextFormField
                ...List.generate(22, (index) {
                  return TextField(
                    decoration: InputDecoration(hintText: &quot;1st $index&quot;),
                  );
                }),
                SizedBox(height: 10.0),
                //todo: DescriptionWidget(), //Widget with lots of TextFormField
                ...List.generate(22, (index) {
                  return TextField(
                    decoration: InputDecoration(hintText: &quot;2st $index&quot;),
                  );
                }),
              ],
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: GestureDetector(
              onTap: () {
                print(&quot;Hello&quot;);
              },
              child: Container(
                height: 130.0,
                width: double.infinity,
                alignment: Alignment.center,
                decoration: BoxDecoration(
                  color: Colors.white,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey.shade400,
                      blurRadius: 10,
                      spreadRadius: 1,
                    )
                  ],
                ),
                child: Container(
                  margin: const EdgeInsets.only(top: 10.0, bottom: 30.0),
                  decoration: BoxDecoration(
                    color: Colors.green.shade400,
                    borderRadius: BorderRadius.circular(35),
                  ),
                  child: const Padding(
                    padding: EdgeInsets.symmetric(
                      vertical: 15.0,
                      horizontal: 150.0,
                    ),
                    child: Text(
                      &quot;Save&quot;,
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 17,
                          fontWeight: FontWeight.w600),
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    ),
  ),