1

I'm trying to display the country by continent in a dynamic way so I can reuse my widget for other continent but my GridView don't work, nothing is showing either in my debug console or my page can someone help me identify the problem so I can solve it? Is it from the Dynamic list I try to use to display the children? Any better way to achieve what I want to do?

It should look like that

Thanks a lot!!

code :

class ShowByContinent extends ConsumerStatefulWidget {
  final String continent;

  ShowByContinent({
    required this.continent,
    super.key,
  });

  @override
  ConsumerState<ConsumerStatefulWidget> createState() =>
      _ShowByContinentState();
}

class _ShowByContinentState extends ConsumerState<ShowByContinent> {
  @override
  Widget build(BuildContext context) {
    List continentCountry = [];
    showByContinent() {
      countries_info.forEach((key, value) {
        if (value["continent"] == widget.continent) {
          continentCountry = key.split(",");
        }
      });
    }

    showByContinent();
    return Expanded(
      child: GridView.builder(
          itemCount: continentCountry.length,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              child: continentCountry[index],
              height: 100,
              width: 100,
            );
          }),
    );
  }
}

parent Widget :

class _ResultsState extends ConsumerState<Results> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("BRAVO You found : "),

              Text(
                "${countryName.length}/${countries_info.length} country",
                style: const TextStyle(color: Colors.black),
              ),
              ProgessBar(
                  totalCounrty: countries_info.length,
                  guessedCountry: countryName.length),
              Column(
// Level
                children: [
                  Text("Dificulty:"),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Icon(Icons.star),
                      Icon(Icons.star_border_outlined),
                      Icon(Icons.star_border_outlined),
                      Icon(Icons.star_border_outlined)
                    ],
                  ),
                  Text("My score : ${countryName.length} pts"),
                  Text("My best score : $bestScore pts"),
                  Text("+ $difScore"),
                  ElevatedButton(onPressed: () {}, child: Text("Play Again?")),
                ],
              ),
              ShowByContinent(
                continent: "Asia",
              )
            ],
          ),
        ),
      ),
    );
  }
}
Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
Coca95
  • 31
  • 5

1 Answers1

0

Don't declarer variable inside build method, try

class _ShowByContinentState extends ConsumerState<ShowByContinent> {
  List continentCountry = [];
  showByContinent() {
    countries_info.forEach((key, value) {
      if (value["continent"] == widget.continent) {
        continentCountry = key.split(",");
      }
    });
  }

  @override
  void initState() {
    super.initState();
    showByContinent();
  }

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: GridView.builder(
          itemCount: continentCountry.length,
          gridDelegate:
              SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
          itemBuilder: (BuildContext context, int index) {
            return Container(
              child: continentCountry[index],
              height: 100,
              width: 100,
            );
          }),
    );
  }
}
Md. Yeasin Sheikh
  • 54,221
  • 7
  • 29
  • 56
  • Why should I not declare a variable inside build method? tried your code but I have an error showing : " Expected a value f type 'Widget?', but got one of type 'String'.. – Coca95 Mar 27 '23 at 15:39
  • From where can come this error? Do you have any idea? – Coca95 Mar 28 '23 at 12:48
  • this error means you need to use Text Widget to represent on UI , try `child: Text( continentCountry[index],)` – Md. Yeasin Sheikh Mar 28 '23 at 12:50
  • Oooh I feel dumb now! Thanks! Sorry for the stupid question I've been learning for like a month or so hahaha – Coca95 Mar 28 '23 at 12:52
  • It's ok, my I didn't notice last comment earlier. More on http://flutter.dev/ – Md. Yeasin Sheikh Mar 28 '23 at 12:54
  • Thank you very much! To display all the list the best way would be a spread operator? – Coca95 Mar 28 '23 at 12:55
  • that might not be needed, it depends on usecase. – Md. Yeasin Sheikh Mar 28 '23 at 12:57
  • What do you mean by usecase? Because here I'm using a text widget but it doesn't accept list right? So if I want to display all the countries how should I do? – Coca95 Mar 28 '23 at 12:58
  • ig `continentCountry[index]` is single string – Md. Yeasin Sheikh Mar 28 '23 at 13:03
  • Yes and it just display the last item of the list but I want it to display all of them in the gridview like in the photo. I tried the spread operator but it doesn't work, neither that using a cast? like : `continentCountry as String` – Coca95 Mar 28 '23 at 13:06
  • I think the issue is ` continentCountry = key.split(",");` which will be `continentCountry .addAll(key.split(","));` – Md. Yeasin Sheikh Mar 28 '23 at 13:08
  • 1
    the .addAll can be use to add every key or valu from a map to a list? It solved my issu thank you so much! Just want to understand it as I've never seen it before :) – Coca95 Mar 28 '23 at 13:13