ScrollView RenderFlex overflow - Flutter-CodePudding

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?

CodePudding user response：

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

CodePudding user response：

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