SingleChildScrollView for Column inside Column

Question

In the picture below, what I'm trying to achieve, is let the Green part Scrollable, since, in case the keyboard pops up, it doesn't give me the render error.

The whole screen is just a Column, where yellow part is a custom widget, and green part another Column inside it.

I've tried different solutions. Wrap the whole Column into a SingleChildScrollView, but I would like that yellow part would stay fixed at the top. I've tried also wrapping only green part into a SingleChildScrollView, but it doesn't work (The Render Error still raised).

I've seen I could use SliverAppBar, but I would like to achieve using my custom widget (yellow part).

I am a little bit stuck.

Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            AppBarWidget(height: size.height * 0.15),
            Container(
              height: size.height - size.height * 0.15 - mediaQuery.padding.top,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  EditableAvatarWidget(
                    circleRadius: circleRadius,
                    badge: test,
                    border: Border.all(color: test.mainColor, width: 5),
                  ),
                  Column(
                    children: [
                      Text(
                        "Name Surname",
                        style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 26,
                            color: Global.blackGrey),
                      ),
                      SizedBox(height: 10),
                      Text(
                        "[email protected]",
                        style: TextStyle(fontSize: 18, color: Colors.grey),
                      )
                    ],
                  ),
                  Padding(
                    padding: EdgeInsets.symmetric(
                        horizontal: size.width / 6, vertical: 0),
                    child: FlatCustomButton(
                      onPress: () {},
                      background: Global.editProfileButton,
                      text: "Edit profile",
                      textColor: Global.blackGrey,
                      inkwellColor: Colors.black,
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );

I would maybe also think to implement a ListView (?), but as you can see I've set inside the Column the mainAxisAlignment: MainAxisAlignment.spaceAround to have already my UI preference.

Do you have any idea how I could achieve this?

TL;DR: Let scrollable only GreenPart (Column) that belong to another Column (Whole Screen) and let Yellow Part stay on that fixed position

Answer 1

That's how I fixed.

I've encapsulated the Green Column Part in a Expanded before and then into a SingleChildScrollView. It works exactly how I wanted.

Now only the green part scroll, and the yellow part stays in a fixed position when keyboard appears.

 return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            AppBarWidget(
              height: size.height * 0.15,
            ),
            Expanded( //This 
              child: SingleChildScrollView( // and this fixed my issue
                child: Container(
                  height:
                      size.height - size.height * 0.15 - mediaQuery.padding.top,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      EditableAvatarWidget(
                        circleRadius: circleRadius,
                        badge: test,
                        border: Border.all(color: test.mainColor, width: 5),
                      ),
                      Column(
                        children: [
                          Text(
                            "Name Surname",
                            style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 26,
                                color: Global.blackGrey),
                          ),
                          SizedBox(height: 10),
                          Text(
                            "[email protected]",
                            style: TextStyle(fontSize: 18, color: Colors.grey),
                          )
                        ],
                      ),
                      Padding(
                        padding: EdgeInsets.symmetric(
                            horizontal: size.width / 6, vertical: 0),
                        child: FlatCustomButton(
                          onPress: () {},
                          background: Global.editProfileButton,
                          text: "Edit profile",
                          textColor: Global.blackGrey,
                          inkwellColor: Colors.black,
                        ),
                      )
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );