RenderBox was not laid out (SingleChildScrollView with ListView.Builder)

Question

I am having some problems on wrapping my widget tree in a SingleChildScrollView. I think the ListView.Builder as some to do with this, but what is the best approach here? I want to have a vertical scroll for the widget tree and horizontal scroll for the ListView.Builder. If I take off the SingleChildScrollView it works fine.

@override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(left: 16),
                      child: Text(
                        'Some test',
                        style: muli_bold_18_black,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 30, right: 30),
                      child: Container(
                          width: 96,
                          height: 96,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              image: new DecorationImage(
                                  fit: BoxFit.fill,
                                  image: new NetworkImage(
                                      "https://placeimg.com/640/480/any")))),
                    )
                  ],
                ),
                Container(
                  transform: Matrix4.translationValues(0.0, -30.0, 0.0),
                  child: Row(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(left: 16),
                        child: Text(
                            "Another text",
                            style: muli_bold_11_black),
                      ),
                    ],
                  ),
                ),
                buildSection("Other text"),
                Expanded(
                  child: ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemCount: lessons.length,
                    itemBuilder: (BuildContext context, int index) =>
                        // build card here
                  ),
                )
              ],
            ),
          ),
        );
      }

Error message:

RenderBox was not laid out: RenderFlex#a24d7 relayoutBoundary=up11 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1681 pos 12: 'hasSize'

Answer 1

If you are using horizontal ListView.Builder, the height of your elements must be fixed. So, just replace your Expanded with SizedBox or a Container with a fixed height and your problem will be solved.

@override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          body: SingleChildScrollView(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: <Widget>[
                    Padding(
                      padding: const EdgeInsets.only(left: 16),
                      child: Text(
                        'Some test',
                        style: muli_bold_18_black,
                      ),
                    ),
                    Padding(
                      padding: const EdgeInsets.only(top: 30, right: 30),
                      child: Container(
                          width: 96,
                          height: 96,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              image: new DecorationImage(
                                  fit: BoxFit.fill,
                                  image: new NetworkImage(
                                      "https://placeimg.com/640/480/any")))),
                    )
                  ],
                ),
                Container(
                  transform: Matrix4.translationValues(0.0, -30.0, 0.0),
                  child: Row(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(left: 16),
                        child: Text(
                            "Another text",
                            style: muli_bold_11_black),
                      ),
                    ],
                  ),
                ),
                buildSection("Other text"),
                SizedBox(
                  height: 50
                  child: ListView.builder(
                    shrinkWrap: true,
                    scrollDirection: Axis.horizontal,
                    itemCount: lessons.length,
                    itemBuilder: (BuildContext context, int index) =>
                        // build card here
                  ),
                )
              ],
            ),
          ),
        );
      }

Answer 2

To fix this I just needed to replace Expanded with Container and give it an height. And replace the top Column(first one) widget with ListView