Why is my gridview not showing on my page?

Question

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?

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",
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

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,
            );
          }),
    );
  }
}