Flutter - Use setState in a for loop

ZeynepBaysoy
August 23, 2023
226 views
0 votes
2 Answers

I want to design an application with buttons. The ‘odd numbers’ button will contain a for loop inside such that when clicked, odd numbers will appear on the screen. I’d like to do similarly for even numbers.

> class _MyHomePageState extends State<MyHomePage> {   List<Widget>
> items = [];   @override   Widget build(BuildContext context) {
>     return Scaffold(
>         appBar: AppBar(
>           title: Text("For Loop"),
>         ),
>         body: Column(
>           children: [
>             ElevatedButton(
>               child: Text('All Numbers'),
>               onPressed: () {
>                 for (int i = 0; i < 10; i++) {
>                   items.add(Text("$i"));
>                 }
>                 setState(() {});
>               },
>             ),
>             ElevatedButton(
>               child: Text('Odd Numbers'),
>               onPressed: () {
>                 for (int i = 0; i < 10; i++) {
>                   if(i%2==1){
>                 items.add(Text("$i"));
>                   }
>                 }
>                 setState(() {});
>               },
>             ),
>             ElevatedButton(
>               child: Text('Even numbers'),
>               onPressed: () {
>                 for (int i = 0; i < 10; i++) {
>                  if(i%2==0){
>                 items.add(Text("$i"));
>                   }
>                 }
>                 setState(() {});
>               },
>             ),
>             Expanded(
>                 child: ListView.builder(
>                     itemCount: items.length,
>                     itemBuilder: (context, index) {
>                       return Container(
>                         child: Text(index.toString()),
>                       );
>                     })),
>           ],
>         ));   } }

Answers

First of all, you need to change the type of your list to integer or string

List<int> items = [];

After that, you need to record values (it could be string or integer) instead of Text widgets.

All Numbers

...
onPressed: () {
 for (int i = 0; i < 10; i++) {
   items.add("$i");
  }
 setState(() {});
},
...

Odd Numbers

...
onPressed: () {
 for (int i = 0; i < 10; i++) {
   if (i % 2 == 1) {
     items.add("$i");
   }
  }
 setState(() {});
},
...

Even Numbers

...
onPressed: () {
 for (int i = 0; i < 10; i++) {
   if (i % 2 == 0) {
     items.add("$i");
   }
  }
 setState(() {});
},
...

And then show it in ListView

Expanded(
 child: ListView.builder(
 itemCount: items.length,
 itemBuilder: (context, index) {
   return Container(
     child: Text(items[index]),
   );
  }
))

this works:

class AnotherExample extends StatefulWidget {
  const AnotherExample({super.key});

  @override
  State<AnotherExample> createState() => _AnotherExampleState();
}

class _AnotherExampleState extends State<AnotherExample> {
  List<Widget> items = [];

  @override
  void initState() {
    super.initState();
    items = [];
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        ElevatedButton(
          child: const Text('All Numbers'),
          onPressed: () {
            for (int i = 0; i < 10; i++) {
              items.add(Text("$i"));
            }
            setState(() {});
          },
        ),
        ElevatedButton(
          child: const Text('Odd Numbers'),
          onPressed: () {
            items.clear();
            for (int i = 0; i < 10; i++) {
              if (i % 2 == 1) {
                items.add(Text("$i"));
              }
            }
            setState(() {});
          },
        ),
        ElevatedButton(
          child: const Text('Even numbers'),
          onPressed: () {
            items.clear();
            for (int i = 0; i < 10; i++) {
              if (i % 2 == 0) {
                items.add(Text("$i"));
              }
            }
            setState(() {});
          },
        ),
        Expanded(
            child: ListView.builder(
                itemCount: items.length,
                itemBuilder: (context, index) {
                  return items[index];
                })),
      ],
    );
  }
}

I didn’t pass the parameter items to the widget but it’s the same , you can even pass it and it still works.

This solution display even and odd widgets on the screen, if you only have to display text labels or button labels refer to the Vadim Popov solution.

Please signup or login to give your own answer.

Click here to cancel reply.

Flutter – Use setState in a for loop

Answers