How To have an SingleScrollView have next to a Container

Issue

the green container should be a static widget the red ones are a FutureBuilder with a singleChildScrollView

Here is my code:

FutureBuilder(
          future: getMoodData(),
          builder: (BuildContext context, AsyncSnapshot<List<Data>> snapshot) {
            if (snapshot.hasData) {
              return Row(children: [
                Container(height: 150, width: 100, color: Colors.green),
                SizedBox(
                  width: 20,
                ),
                SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: snapshot.data!
                          .map((e) => Row(children: [
                                Container(
                                  height: 150,
                                  child: Text(e.text),
                                  width: 100,
                                  color: Colors.red,
                                ),
                                SizedBox(
                                  width: 20,
                                )
                              ]))
                          .toList(),
                    ))
              ]);
            } else {
              return Container();
            }
          },
        ),

without the first Row in the FutureBuilder it is working without a problem but with it, I always get an overflow error. Any idea how to fix it?

Solution

Wrap your scrollable widget in an expanded.
Below is your example (without futurebuilder since I don’t have your future function etc, but you can implement it just fine.
(and I changed the Scrollable and row with a listview because of performance 🙂

Scaffold(
            body: Row(children: [
          Container(height: 150, width: 100, color: Colors.green),
          SizedBox(
            width: 20,
          ),
          Expanded(
            child: ListView(scrollDirection: Axis.horizontal, children: [
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
            ]),
          )
        ]))

This should work because the expanded tells the scrollable how much space it may have, so the scrollable can actually scroll content, otherwise it thinks it has unlimited space (and it doesn’t need to scroll content)

This is how your code should like like now:

FutureBuilder(
          future: getMoodData(),
          builder: (BuildContext context, AsyncSnapshot<List<Data>> snapshot) {
            if (snapshot.hasData) {
              return Row(children: [
                Container(height: 150, width: 100, color: Colors.green),
                SizedBox(
                  width: 20,
                ),
                Expanded(
                    child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: snapshot.data!
                          .map((e) => Row(children: [
                                Container(
                                  height: 150,
                                  child: Text(e.text),
                                  width: 100,
                                  color: Colors.red,
                                ),
                                SizedBox(
                                  width: 20,
                                )
                              ]))
                          .toList(),
                    ))
              ]);
            } else {
              return Container();
            }
          },
        ),

Answered By – Wouter

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)