setState or markNeedsBuild called during build

0 votes
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.

Mar 9, 2023 in Android by sarit
• 1,830 points
3,434 views

1 answer to this question.

0 votes

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.


answered Mar 10, 2023 by vinayak

Related Questions In Android

0 votes
0 answers

Android new Bottom Navigation bar or BottomNavigationView

The newest Google Photos app used the ...READ MORE

Nov 8, 2022 in Android by Edureka
• 13,620 points
320 views
0 votes
0 answers

What's the strangest corner case you've seen in C# or .NET?

I have a small collection of puzzles ...READ MORE

Dec 9, 2022 in Android by Edureka
• 13,620 points
178 views
0 votes
1 answer

How to deal with unwanted widget build?

There are a few strategies that you ...READ MORE

answered Mar 10, 2023 in Android by vinayak
2,248 views
0 votes
1 answer

Why is applicationWillTerminate not being called on the first launch of my app?

The applicationWillTerminate method is called by the ...READ MORE

answered Mar 18, 2023 in Android by vishalini
1,199 views
0 votes
1 answer

Opt out or How to stop google bot accounts from my app?

It sounds like you are experiencing an ...READ MORE

answered Mar 18, 2023 in Android by pooja
323 views
0 votes
1 answer

How to add a ListView to a Column in Flutter?

To add a ListView to a Column ...READ MORE

answered Mar 9, 2023 in Android by pooja
7,904 views
0 votes
1 answer

Dart_LoadScriptFromKernel: The binary program does not contain 'main'.

Hi@akhtar, You need to add the main() function ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,137 views
0 votes
1 answer

How to install Dart in Windows system?

Hi@akhtar, Dart is the programming language used to code Flutter apps. ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
736 views
0 votes
1 answer

flutter run: No connected devices

Hi@akhtar, To prepare to run and test your ...READ MORE

answered Jul 21, 2020 in Others by MD
• 95,440 points
3,780 views
0 votes
1 answer

Flutter - Wrap text on overflow, like insert ellipsis or fade

Container( padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 18.0), ...READ MORE

answered Mar 1, 2023 in Android by vishalini
671 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP