CODEWITHSUNDEEP
flutterdart
Coding Glass
Coding Glass

Reputation: 157

How to conditionally display some widgets

I don't know what is the best way to conditionally display items in a list. This is the code:

SliverFixedExtentList(
            itemExtent: 250,
            delegate: SliverChildListDelegate([
              _buildListWidget(Colors.transparent, "Kiwi"),
              _buildListWidget(Colors.blue, "Banana"),
              _buildListWidget(Colors.purple, "Pizza"),
              _buildListWidget(Colors.blue, "Hamburger"),
              _buildListWidget(Colors.purple, "Noodles"),
              _buildListWidget(Colors.blue, "Spinach"),
              _buildListWidget(Colors.purple, "Salad")
            ]),
          )

I'd like to do something like this:

SliverFixedExtentList(
            itemExtent: 250,
            delegate: SliverChildListDelegate([

             if (_chosenFood == 'fruit') {
                 _buildListWidget(Colors.transparent, "Kiwi"),
                 _buildListWidget(Colors.blue, "Banana")
             } else if (_chosenFood == 'fastfood') {
              _buildListWidget(Colors.purple, "Pizza"),
              _buildListWidget(Colors.blue, "Hamburger"),
              _buildListWidget(Colors.purple, "Noodles"),
             } else if (_chosenFood == 'vegetable') {
              _buildListWidget(Colors.blue, "Spinach"),
              _buildListWidget(Colors.purple, "Salad")
             } // if _chosenFood == 'none', show all
            ]),
          )

Upvotes: 0

Views: 84

Answers (4)

Ashot Khachatryan
Ashot Khachatryan

Reputation: 328

enum ChoosenFood {fruit, fastfood, vegetable}

SliverFixedExtentList(
            itemExtent: 250,
            delegate: SliverChildListDelegate([
               _choosenFood.createList();
            ]),
          )

extension _ChoosenFoodAddition on ChoosenFood {
   List<Widget> createList() {
     switch(this) {
       case ChoosenFood.fruit:
          _fruitList()
       case ChoosenFood.fastfood:
          _fastFoodList()
       case ChoosenFood.vegetable:
          _vegetableList()
  }
}

Upvotes: 1

Razvan S.
Razvan S.

Reputation: 803

The way I would do it is to create a new data class that would contain the properties color and name. Something like:

class FoodItem {
 FoodItem(Color color, String name);
}

Then I would create a _buildList function that expects a list of FoodItem as a parameter. Something like:

void _buildList(List<FoodItem> items) {
   for(var i = 0; i < items.length; ++i) {
     _buildListWidget(items[i].color, items[i].name);
   }
}

Now, wherever you set the _chosenFood variable you can place your logic and create the FoodItem list. This way you can have your logic separated from the actual widget building and can even write tests for it. Now in the delegate you just call _buildList(yourItemList).

If you want to go even deeper you can checkout the BLoC pattern and other architectures used by other Flutter Devs.

Upvotes: 0

unique
unique

Reputation: 128

You can create a function to return a good widget


goodWidget(_chosenFood ){
 
List returnList = [];
 if (_chosenFood == 'fruit' || _chosenFood == 'none') {
        returnList.add(_buildListWidget(Colors.transparent, "Kiwi"));
        returnList.add(_buildListWidget(Colors.blue, "Banana"));
 } 

if (_chosenFood == 'fastfood' || _chosenFood == 'none') {
   returnList.add(_buildListWidget(Colors.purple, "Pizza"));
   returnList.add(_buildListWidget(Colors.blue, "Hamburger"));
   returnList.add(_buildListWidget(Colors.purple, "Noodles"));
 } 

if (_chosenFood == 'vegetable' || _chosenFood == 'none') {
  returnList.add(_buildListWidget(Colors.blue, "Spinach"));
  returnList.add(_buildListWidget(Colors.purple, "Salad"));
 } 
 return returnList;
}


SliverFixedExtentList(
      itemExtent: 250,
      delegate: SliverChildListDelegate( goodWidget(_chosenFood )

   ),
)

Upvotes: 1

Lucas Vaudey
Lucas Vaudey

Reputation: 131

You can ask boolean before widget like this :

_choosenFood=="Fruit"? Yourwidget :_choosenFood=="FastFood"? AnotherWidget: NochoosenFood

(True or false)? YourWidget if true : YourWiget if false

Upvotes: 0

Related Questions