Flutter Column inside SingleChildScrollView doesn't scroll

Question

When I try to use Card inside SingleScrollChildView, I get this error:

The following assertion was thrown during layout:
A RenderFlex overflowed by 178 pixels on the bottom.

The relevant error-causing widget was: 
  Column file:///C:/Users/emirs/AndroidStudioProjects/view_met/lib/home.dart:197:16
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#d861f relayoutBoundary=up2 OVERFLOWING
...  needs compositing
...  parentData: offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=820.6)
...  size: Size(411.4, 820.6)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤

This is my code:

Padding(
                padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
                child: Column(
                  children: <Widget>[
                    Text("Random Items You Could Like", style: GoogleFonts.merriweather(fontSize: 18, color: Colors.black)),
                    SingleChildScrollView(
                      scrollDirection: Axis.vertical,
                      child: Column(
                       children: <Widget>[
                         builder(randint1.toString()),
                         builder(randint2.toString()),
                         builder(randint3.toString()),
                         builder(randint4.toString()),
                         builder(randint5.toString()),
                       ],
                      )
                    ),
                  ],
                ),
              )

This is the builder() function:

builder(String id) {
      return FutureBuilder(
        future: fetchData(id),
        builder: (BuildContext context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return Padding(
              padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
              child: CircularProgressIndicator(),
            );
          }
          var data = jsonDecode(snapshot.data.toString());

          var leading;
          var artist;


          if (data["primaryImageSmall"] == "") {
            leading = Icon(Icons.dangerous);
          }
          else {
            leading = Image.network(data["primaryImageSmall"]);
          }

          if (data["artistDisplayName"]== "") {
            artist = "Unknown";
          }
          else {
            artist = data["artistDisplayName"];
          }

          return Card(
            clipBehavior: Clip.antiAlias,
            child: Column(
              children: [
                ListTile(
                  leading: leading,
                  title: Text(data["title"]),
                  subtitle: Text(
                    "by $artist",
                    style: TextStyle(color: Colors.black.withOpacity(0.6)),
                  ),
                ),
                ButtonBar(
                  alignment: MainAxisAlignment.start,
                  children: [
                    TextButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => DetailsPage()),
                        );
                      },
                      child: Text("Details", style: TextStyle(color: Color(0xFF6200EE))),
                    ),
                    TextButton(
                      onPressed: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(builder: (context) => DetailsPage()),
                        );
                      },
                      child: Text("Add to Favorites", style: TextStyle(color: Color(0xFF6200EE))),
                    ),
                  ],
                ),
              ],
            ),
          );
        },
      );
    }

This is the result:

I looked at other questions too but none of them actually helped and they didn't have the answer I was looking for. I really don't know what do to at this moment. I would appreciate any type of help. I can give more information if required.

Answer 1

Following code works for me . using following code you can use SingleChildScrollView inside the column .

Column(
children :[
    Expanded(
                child: SingleChildScrollView(
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    mainAxisAlignment: MainAxisAlignment.start,
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      Text("Monat".toUpperCase(),
                          style: TextStyle(
                            color: Colors.black,
                            fontSize: 20,
                          )),
              ],
    ),
    ),
],
);

Answer 2

I think that you are using the SingleChildScrollView wrongly, remove the SingleChildScrollView and scrollDirection; use it to wrap this part:

Column(
                          children: <Widget>[
                            builder(randint1.toString()),
                            builder(randint2.toString()),
                            builder(randint3.toString()),
                            builder(randint4.toString()),
                            builder(randint5.toString()),
                          ],

and it would look like this:

SingleChildScrollView(
                    scrollDirection: Axis.vertical,
Column(
                          children: <Widget>[
                            builder(randint1.toString()),
                            builder(randint2.toString()),
                            builder(randint3.toString()),
                            builder(randint4.toString()),
                            builder(randint5.toString()),
                          ],
),

Answer 3

Wrap the SingleChildScrollView with Expanded.

Column(
  children: [
    // ...
    Expanded(
      child: SingleChildScrollView(),
    ),
  ],
),

Answer 4

Try Out below Code

 Padding(
              padding: EdgeInsets.fromLTRB(0, 20, 0, 0),
              child: Stack(
                children: [
                  Align(
                    alignment:Alignment.topCenter,
                      child: Text("Random Items You Could Like", style: GoogleFonts.merriweather(fontSize: 18, color: Colors.black))),
                  SingleChildScrollView(
                    scrollDirection: Axis.vertical,
                    child: Column(
                      children: <Widget>[
                        Column(
                          children: <Widget>[
                            builder(randint1.toString()),
                            builder(randint2.toString()),
                            builder(randint3.toString()),
                            builder(randint4.toString()),
                            builder(randint5.toString()),
                          ],
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            )