flutter - How To have an SingleScrollView have next to a Container

Question

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?

Answer 1

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();
            }
          },
        ),

Answer 2

You are almost there but you need to required space that's why you can use the Expanded widget that expands a child of a Row, Column, or Flex so that the child fills the available space.

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( //wrap with expanded
                 child: 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();
            }
          },
        ),

For more about Expanded