Pass Map data from API to multiple screens in flutter?

Question

How can i pass the Map data from that list to others screens being StatefulWidget or StatelessWidget, and why it don´t work like the one screen example?

The Api Part here:

Future pokeinfo(int position) async {
 var dio = Dio();
 Response response;

 response =
   await dio.get('https://pokeapi.co/api/v2/pokemon/${position.toString()}');
 Map json = jsonDecode(response.toString());

 return json;
}

The function part here:

 bool widgetVisible = false;
 List<PokeList> elements = [];

  void showWidget() {
   createList();
   setState(() {
    widgetVisible = !widgetVisible;
   });
 }

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

 @override
  void dispose() {
 super.dispose();
 }

 void createList() async {
  List<PokeList> _elements = [];

  for (int i = 1; i < 50; i++) {
   Map currentData = await pokeinfo(i);
   _elements.add(PokeList(currentData));
  }

  setState(() {
   elements = _elements;
  });

How it works in one screen:

Map data;

PokeList(Map this.data);

@override
Widget build(BuildContext context) {
  return GestureDetector(
    onTap: () {
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => PokemonPage()),
      );

If you get data from API refer my answer [here](https://stackoverflow.com/a/68594656/13997210) or [here](https://stackoverflow.com/a/68533647/13997210) If you get selected data and call it to other page or class refer [here](https://stackoverflow.com/a/68494291/13997210) — Ravindra S. Patil, Aug 06 '21 at 17:55
thank you for answer! I'm not expected create var to everything, basically im expected use something like: data['sprites']['other']['official-artwork']['front_default'], like im using in the first screen, getting data directly from Api, you know other alternative for solve that? @RavindraS.Patil — ErikPs, Aug 06 '21 at 21:24

score 0 · Answer 1 · answered Aug 06 '21 at 20:29

0

you need to use one of state management packages, However google recommend provider package. with provider you can make request in provider class

class PokeProvider extends ChangeNotifier {
  Map json;
  Future pokeinfo(int position) async {
    var dio = Dio();
    Response response;

    response = await dio
        .get('https://pokeapi.co/api/v2/pokemon/${position.toString()}');
    Map json = jsonDecode(response.toString());

    return json;
  }
}

then store it's data inside a variable that every screen will listen on change of it, like json
then expose that provider to whole app

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => PokeProvider(),
      child: const MyApp(),
    ),
  );
}

then read it from anywhere inside application with

PokeProvider pokeProvider = Provider.of<PokeProvider>(context, listen: false);
pokeProvider.json; // now you got your map

be carful of listen: false if your data will change ui directly so make listen: true

for more information about provider package check the link blew contain everything you need

ChangeNotifierProvider example

answered Aug 06 '21 at 20:29

Hossam

148
1
8

thank you for answer! Where I put the the second part? And why the way that I get first don´t work in others screens? I'm expected use like the one screen actually, like this: data['name']. Getting directly from the API without create var. because I want use in a GridView and when go to detail page of one card show these info's. like this example: [link](https://github.com/devglrd/pokedex-app-flutter). – ErikPs Aug 06 '21 at 21:16
put second part in main file but I checked your repo you using bloc so no need to use provider, the problem may be the createList() is async function and you forget to add await in showWidget() when you call it – Hossam Aug 06 '21 at 23:15
the repo is just an example, its not mine! In my main have just one page ( pokedex) and inside pokedex i call pokelist using gridview.builder, and finally in pokelist im using the api, thats finish in pokemonpage, when tap one item at list. – ErikPs Aug 07 '21 at 03:31
okay in your code await before createList() here void showWidget() { createList(); setState(() { widgetVisible = !widgetVisible; }); } may be that causes your problem – Hossam Aug 07 '21 at 12:59

ErikPs · Accepted Answer · 2021-08-08T07:00:49.460

Thank you all who tried to help me, I got the problem and how to solve it. I will put the solution here to someone who has the same problem. A simple thing to change actually:

Remove the specific screen from List.

 bool widgetVisible = false;
 List elements = [];

 void showWidget() {
  createList();
  setState(() {
   widgetVisible = !widgetVisible;
  });
 }

Inside the function you just need to change List, repeating what was shown previously.

void createList() async {
 List _elements = [];

 for (int i = 1; i < 50; i++) {
  Map currentData = await pokeinfo(i);
  _elements.add(PokeList(currentData));
 }

And finally, you only have to put inside the screen class. Like that:

Class ScreenNameHere extends StatelessWidget{

 Map data;
 ScreenNameHere(Map this.data); 

 /*
  @override
   Widget build(BuildContext context) {
    return ScreenBody();
   }
 */
}

Pass Map data from API to multiple screens in flutter?

2 Answers2