setState or markNeedsBuild called during build

Question

class MyHome extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new MyHomePage2();
}

class MyHomePage2 extends State<MyHome> {
  List items = new List();

  buildlist(String s) {
    setState(() {
      print("entered buildlist" + s);
      List refresh = new List();
      if (s == 'button0') {
        refresh = [
          new Refreshments("Watermelon", 250),
          new Refreshments("Orange", 275),
          new Refreshments("Pine", 300),
          new Refreshments("Papaya", 225),
          new Refreshments("Apple", 250),
        ];
      } else if (s == 'button1') {
        refresh = [
          new Refreshments("Pina Colada", 250),
          new Refreshments("Bloody Mary", 275),
          new Refreshments("Long Island Ice tea", 300),
          new Refreshments("Screwdriver", 225),
          new Refreshments("Fusion Cocktail", 250),
        ];
      } else if (s == 'button2') {
        refresh = [
          new Refreshments("Virgin Pina Colada", 250),
          new Refreshments("Virgin Mary", 275),
          new Refreshments("Strawberry Flush", 300),
          new Refreshments("Mango Diver", 225),
          new Refreshments("Peach Delight", 250),
        ];
      } else {
        refresh = [
          new Refreshments("Absolute", 250),
          new Refreshments("Smirnoff", 275),
          new Refreshments("White Mischief", 300),
          new Refreshments("Romanov", 225),
          new Refreshments("Blender's Pride", 250),
        ];
      }

      for (var item in refresh) {
        items.add(new ItemsList(item));
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    var abc = MediaQuery.of(context).size;

    print(abc.width);

    var width = abc.width / 4;

    Text text = new Text("Dev");
    Text text2 = new Text("Sneha");
    Text text3 = new Text("Prashant");
    Text text4 = new Text("Vikesh");

    var pad = const EdgeInsets.all(10.0);

    Padding pad1 = new Padding(child: text, padding: pad);
    Padding pad2 = new Padding(child: text2, padding: pad);
    Padding pad3 = new Padding(child: text3, padding: pad);
    Padding pad4 = new Padding(child: text4, padding: pad);

    ListView listView = new ListView(children: <Widget>[
      new Image.asset('images/party.jpg'),
      pad1,
      pad2,
      pad3,
      pad4
    ]);

    Drawer drawer = new Drawer(child: listView);

    return new Scaffold(
      drawer: drawer,

      appBar: new AppBar(
        title: new Text('Booze Up'),
      ),
      body: new Column(children: <Widget>[
        new ListView.builder(
          scrollDirection: Axis.horizontal,
          itemCount: 4,
          itemBuilder: (BuildContext context, int index) {
            return new Column(children: <Widget>[
              new Container(
                child: new Flexible(
                    child: new FlatButton(
                  child: new Image.asset('images/party.jpg',
                      width: width, height: width),
                  onPressed: buildlist('button' + index.toString()),
                )),
                width: width,
                height: width,
              )
            ]);
          },
        ),
        new Expanded(
            child: new ListView(
          padding: new EdgeInsets.fromLTRB(10.0, 10.0, 0.0, 10.0),
          children: items,
          scrollDirection: Axis.vertical,
        )),
      ]),

      floatingActionButton: new FloatingActionButton(
        onPressed: null,
        child: new Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

class Refreshments {
  String name;
  int price;

  Refreshments(this.name, this.price);
}

class ItemsList extends StatelessWidget {
  final Refreshments refreshments;

  ItemsList(this.refreshments);

  @override
  Widget build(BuildContext context) {
    return new ListTile(
      onTap: null,
      title: new Text(refreshments.name),
    );
  }
}

I am having two errors:

1] Horizontal viewport was given unbounded height . A horizontal viewport was given an unlimited amount of vertical space in which to expand.

2] setState() or markNeedsBuild called during build A vertical renderflex overflowed by 99488 pixels.

Please help me with it . I am creating this app where on each image click a list should be shown below . The images will be in a row and the list should be shown below the row.

Thank you.

Answer 1

The first error occurs because the ListView.builder widget is placed inside a Column widget, which takes up all the available vertical space. However, the ListView.builder widget has a horizontal scroll, which means it needs to have a fixed height. To fix this error, you can wrap the ListView.builder widget in a Container with a fixed height, like this:

Container(
  height: width, // use the same width as the images
  child: ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: 4,
    itemBuilder: (BuildContext context, int index) {
      // ...
    },
  ),
)

The second error occurs because you are calling setState inside the buildlist method, which is called during the build phase of the widget tree. This is not allowed because it triggers a rebuild of the widget tree, which is already being built. Instead, you should move the logic for updating the items list to a separate method, and call it when the button is pressed. Here's an example:

List<Refreshments> getRefreshments(String s) {
  if (s == 'button0') {
    return [
      new Refreshments("Watermelon", 250),
      new Refreshments("Orange", 275),
      new Refreshments("Pine", 300),
      new Refreshments("Papaya", 225),
      new Refreshments("Apple", 250),
    ];
  } else if (s == 'button1') {
    return [
      new Refreshments("Pina Colada", 250),
      new Refreshments("Bloody Mary", 275),
      new Refreshments("Long Island Ice tea", 300),
      new Refreshments("Screwdriver", 225),
      new Refreshments("Fusion Cocktail", 250),
    ];
  } else if (s == 'button2') {
    return [
      new Refreshments("Virgin Pina Colada", 250),
      new Refreshments("Virgin Mary", 275),
      new Refreshments("Strawberry Flush", 300),
      new Refreshments("Mango Diver", 225),
      new Refreshments("Peach Delight", 250),
    ];
  } else {
    return [
      new Refreshments("Absolute", 250),
      new Refreshments("Smirnoff", 275),
      new Refreshments("White Mischief", 300),
      new Refreshments("Romanov", 225),
      new Refreshments("Blender's Pride", 250),
    ];
  }
}

void updateItems(String s) {
  List<Refreshments> refreshments = getRefreshments(s);
  List<ItemsList> newItems = refreshments.map((r) => ItemsList(r)).toList();
  setState(() {
    items.clear();
    items.addAll(newItems);
  });
}

// in the build method:
FlatButton(
  child: new Image.asset('images/party.jpg',
    width: width, height: width),
  onPressed: () => updateItems('button$index'),
),

In this updated code, we have extracted the logic for updating the items list to a separate method called updateItems. This method takes a string s (which is the button that was pressed) and uses it to get a list of Refreshments objects. It then converts these objects to ItemsList widgets and sets the items list using setState. Finally, we call this method when the button is pressed, instead of calling setState inside buildlist.