Pass Map data from API to multiple screens in flutter? - json

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

Answer 1

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

Answer 2

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();
}
*/
}