title: SingleChildScrollView for Column inside Column
body: <p>In the picture below, what I'm trying to achieve, is let the Green part <code>Scrollable</code>, since, in case the keyboard pops up, it doesn't give me the render error.</p>
  
  <p>The whole screen is just a <code>Column</code>, where yellow part is a custom widget, and green part another <code>Column</code> inside it.</p>
  
  <p>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).</p>
  
  <p>I've seen I could use <code>SliverAppBar</code>, but I would like to achieve using my custom widget (yellow part).</p>
  
  <p>I am a little bit stuck.</p>
  
  <pre><code>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(
                          "mail@mail.com",
                          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,
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ),
      );
  </code></pre>
  
  <p>I would maybe also think to implement a ListView (?), but as you can see I've set inside the Column the  <code>mainAxisAlignment: MainAxisAlignment.spaceAround</code> to have already my UI preference.</p>
  
  <p>Do you have any idea how I could achieve this?</p>
  
  <p>TL;DR: Let scrollable only GreenPart (Column) that belong to another Column (Whole Screen) and let Yellow Part stay on that fixed position</p>
  
  <p><a href="https://i.stack.imgur.com/l58Dj.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/l58Dj.png" alt="Picture"></a></p>