ScrollView RenderFlex overflow - Flutter

Question

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: [
          Padding(
            padding: const EdgeInsets.fromLTRB(15.0, 40.0, 15.0, 0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: const [
                        Icon(Icons.menu),
                        Image(),       //Asset image
                      ],
                    ),
                    Row(
                      children: [
                        const Icon(Icons.notifications_none),
                        const SizedBox(width: 27.0),
                        CircleAvatar(
                          child: Text("JM"),
                        ),
                      ],
                    )
                  ],
                ),
                Row(
                  children: const [
                    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?

user_9418902 · Answer

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

user_5990125 · Answer

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: [
      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: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Icon(Icons.menu),
                        Container(
                          height: 100,
                          width: 100,
                          color: Colors.redAccent,
                        ),
                        //Asset image
                      ],
                    ),
                    Row(
                      children: [
                        const Icon(Icons.notifications_none),
                        const SizedBox(width: 27.0),
                        CircleAvatar(
                          child: Text("JM"),
                        ),
                      ],
                    )
                  ],
                ),
                Row(
                  children: const [
                    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

user_10157127 · Answer

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

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

                              /// make sure of image height
                              fit: BoxFit.fitHeight,
                            ),
                          ],
                        ),
                        Row(
                          children: [
                            const Icon(Icons.notifications_none),
                            const SizedBox(width: 27.0),
                            CircleAvatar(
                              child: Text("JM"),
                            ),
                          ],
                        )
                      ],
                    ),
                    Row(
                      children: const [
                        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),

                    //todo: OverviewWidget(), //Widget with lots of TextFormField
                    ...List.generate(22, (index) {
                      return TextField(
                        decoration: InputDecoration(hintText: "1st $index"),
                      );
                    }),
                    SizedBox(height: 10.0),
                    //todo: DescriptionWidget(), //Widget with lots of TextFormField
                    ...List.generate(22, (index) {
                      return TextField(
                        decoration: InputDecoration(hintText: "2st $index"),
                      );
                    }),
                  ],
                ),
              ),
              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),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),

ScrollView RenderFlex overflow - Flutter

3 Answers