SingleChildScrollView won't work? Placement?

Question

I have a card I am displaying with some info. I want to wrap it in a SingleChildScrollView as I have more items to add to the card, but when I do the screen just blanks out? I have tried putting it as root (Scaffold body) and before the Card but it won't work?

 return Scaffold(
        backgroundColor: globals.pageBackgroundColor,
        appBar: AppBar(
            title: Text('Company name'),
            leading: new IconButton(
                icon: new Icon(Icons.arrow_back),
                onPressed: () {
                  Navigator.pop(context, true);
                })),
        body: Padding(
            padding: EdgeInsets.all(10),
            child: Card(
                child: Container(
                    decoration:
                        BoxDecoration(color: globals.widgetBackgroundColor),
                    child: Column(
                      children: <Widget>[
                      Container(
                          height: 120,
                          width: double.infinity,
                          decoration: BoxDecoration(color: Colors.white),
                          child: Row(
                            children: <Widget>[
                              Padding(
                                  padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                                  child: Container(
                                      alignment: Alignment.centerLeft,
                                      width: 100,
                                      height: 100,
                                      child: Image.network("https://via.placeholder.com/200"))),
                              Expanded(
                                child: Padding(
                                    padding: EdgeInsets.fromLTRB(30, 20, 10, 0),
                                    child: Column(
                                      crossAxisAlignment:
                                          CrossAxisAlignment.start,
                                      children: <Widget>[
                                        Text('Company name',
                                            style: TextStyle(
                                                fontSize: 18,
                                                fontWeight: FontWeight.bold)),
                                        Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum')
                                      ],
                                    )),
                              )
                            ],
                          )),
                      Padding(
                        padding: EdgeInsets.only(left: 20, top: 20, right: 20),
                        child: Container(
                          child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
                                    style: TextStyle(color: Colors.white)),
                                Padding(padding: EdgeInsets.only(top: 25)),
                                Row(
                                  crossAxisAlignment: CrossAxisAlignment.end,
                                  children: <Widget>[
                                    Icon(
                                      Icons.thumb_up,
                                      color: Colors.white,
                                    ),
                                    Padding(
                                        padding: EdgeInsets.only(right: 20)),
                                    Text('Lorem ipsum lorem',
                                        style: TextStyle(
                                            color: globals.cardSubTitleColor,
                                            fontWeight: FontWeight.bold,
                                            fontSize: 18))
                                  ],
                                )
                              ]),
                        ),
                      ),
                      Padding(padding: EdgeInsets.only(top: 20)),
                      Expanded(
                              child: GridView.count(
                                padding: EdgeInsets.all(5),
                                  scrollDirection: Axis.horizontal,
                                  crossAxisCount: 1,
                                  children: List.generate(10, (index) {
                                    return Image.network(
                                      "https://via.placeholder.com/200",
                                    );
                                  })))

                    ])))));
  } 

Any takers? I can't seem to figure this one out;

Answer 1

I came across this and my issue was that I had my SingleChildScrollView as a child of a column.

I fixed it by wrapping my SingleChildScrollView in an Expanded widget

Answer 2

So I managed to figure this one out. The SingleChildScrollView needs to sit inside your Padding which is the parent widget for your body. Your Card needs to be the child of the SingleChildScrollView.

This code should work for you.

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primarySwatch: Colors.blue,
  ),
  home: Scaffold(
    appBar: AppBar(
      title: Text('Company name'),
      leading: new IconButton(
        icon: new Icon(Icons.arrow_back),
        onPressed: () {
          Navigator.pop(context, true);
        }
      )
    ),
    body: Padding(
    padding: EdgeInsets.all(10),
    child: SingleChildScrollView(
      child: Card(
            child: Container(
                decoration:
                    BoxDecoration(color: Colors.white),
                child: Column(
                  children: <Widget>[
                  Container(
                      height: 120,
                      width: double.infinity,
                      decoration: BoxDecoration(color: Colors.white),
                      child: Row(
                        children: <Widget>[
                          Padding(
                              padding: EdgeInsets.fromLTRB(10, 0, 0, 0),
                              child: Container(
                                  alignment: Alignment.centerLeft,
                                  width: 100,
                                  height: 100,
                                  child: Image.network("https://via.placeholder.com/200"))),
                          Expanded(
                            child: Padding(
                                padding: EdgeInsets.fromLTRB(30, 20, 10, 0),
                                child: Column(
                                  crossAxisAlignment:
                                      CrossAxisAlignment.start,
                                  children: <Widget>[
                                    Text('Company name',
                                        style: TextStyle(
                                            fontSize: 18,
                                            fontWeight: FontWeight.bold)),
                                    Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum')
                                  ],
                                )),
                          )
                        ],
                      )),
                  Padding(
                    padding: EdgeInsets.only(left: 20, top: 20, right: 20),
                    child: Container(
                      child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            Text('Lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum ',
                                style: TextStyle(color: Colors.blue)),
                            Padding(padding: EdgeInsets.only(top: 25)),
                            Row(
                              crossAxisAlignment: CrossAxisAlignment.end,
                              children: <Widget>[
                                Icon(
                                  Icons.thumb_up,
                                  color: Colors.white,
                                ),
                                Padding(
                                    padding: EdgeInsets.only(right: 20)),
                                Text('Lorem ipsum lorem',
                                    style: TextStyle(
                                        color: Colors.red,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 18))
                            ],
                          )
                        ]
                      ),
                    ),
                  ),
                ]
              )
            )
          )
        )
      )
    )
  );
}
} 

PS I changed some colours just to see the UI displaying on the screen.