CODEWITHSUNDEEP
flutter
lechnerio
lechnerio

Reputation: 980

Flutter - Compare two lists

I'm trying to compare two lists to show an image, depending on its result.

The basic idea is to show a list of pictures (with a lowered opacity) and when one element is part of both lists to show the picture without opacity.

when using print() on both lists I get the following results:

s:      [Aquatic, Desert, Grassland, Temperate, Tigra, Tropical, Tundra]
biomes: [Grassland, Tropical]

so the idea is, that only Grassland and Tropical (in this example) gets fully shown, while the others stay translucent.

Unfortunately all pictures stay translucent and I'm not quite sure what I'm missing.

Widget BiomeElement(List<String> s, biomes) {

  List<Widget> list = new List<Widget>();
    for (var i = 0; i < s.length; i++) {
      list.add(
        Padding(
          padding: const EdgeInsets.all(4.0),
          child: new Opacity(
            opacity: (s.contains(biomes) ? 1 : 0.3),
            child: Column(
              children: [
                Image.asset(
                  'assets/biomes/biome_' + s[i].toLowerCase() + '.png',
                  height: 35,
                  width: 35),
              ],
            ),
          ),
        ),
      );
    }

   return new Row(
      // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: list
   );
}

Upvotes: 0

Views: 272

Answers (2)

malik kurosaki
malik kurosaki

Reputation: 2042

I hope this can help you, first convert it into an object list

final s = ["Aquatic", "Desert", "Grassland", "Temperate", "Tigra", "Tropical", "Tundra"];
final biomes = ["Grassland", "Tropical"];

final hasil = s.map((e) => {"name": e, "opacity": biomes.contains(e)}).toList();
print(hasil);

and the result is like this:

[
 {name: Aquatic, opacity: false}, 
 {name: Desert, opacity: false}, 
 {name: Grassland, opacity: true}, 
 {name: Temperate, opacity: false}, 
 {name: Tigra, opacity: false}, 
 {name: Tropical, opacity: true}, 
 {name: Tundra, opacity: false}
]

for your case

Widget BiomeElement(List<String> hasil) {

  List<Widget> list = new List<Widget>();
    for (var i = 0; i < hasil.length; i++) {
      list.add(
        Padding(
          padding: const EdgeInsets.all(4.0),
          child: new Opacity(
            opacity: hasil[i]['opacity']? 1 : 0.3), // true for 1 and false for 0.3
            child: Column(
              children: [
                Image.asset(
                  'assets/biomes/biome_' + hasil[i]['name'].toLowerCase() + '.png',
                  height: 35,
                  width: 35),
              ],
            ),
          ),
        ),
      );
    }

   return new Row(
      // mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: list
   );
}

Upvotes: 0

Victor Eronmosele
Victor Eronmosele

Reputation: 7716

You need to change how you're checking for the match.

From your console result, biomes is a list and you're passing it to the .contains method which takes an Object and not a List of Objects.

So this check, s.contains(biomes) wouldn't work. You would have detected it if you assigned a type to biomes in your BiomeElement method.

SOLUTION: Since you're iterating over s, you can check if the s element at the current index is contained in the biomes list like below:

biomes.contains(s[i])

Upvotes: 2

Related Questions