Trouble sending selected information to next screen - flutter

Question

I am trying to build a pokedex application in flutter. Currently I have created the first screen, with all 151 pokemon, their image, name, and # from a json api call. I am trying to make functionality where when you tap on a specific pokemon from the first screen, a new screen will appear with more details about the pokemon you tapped on. Currently having difficulties setting up my navigation to carry that information over.
Here is my project
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
Map _data;
List _pokemon = [];
void main() async {
_data = await fetchData();
_pokemon = _data['pokemon'];
runApp(
MaterialApp(
title: 'Poke App',
home: new HomePage(),
debugShowCheckedModeBanner: false,
),
);
}
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
#override
void initState() {
super.initState();
fetchData();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Poke App'),
centerTitle: true,
backgroundColor: Colors.cyan,
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.cyan,
child: Icon(Icons.search),
),
body: GridView.count(
crossAxisCount: 2,
children: List.generate(_pokemon.length, (index) {
return Padding(
padding: const EdgeInsets.fromLTRB(1.0, 5.0, 1.0, 5.0),
child: InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => new PokeDetails(_pokemon[index]
),
),
);
},
child: Card(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 10.0),
child: Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('${_pokemon[index]['img']}'),
),
),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 2.0),
child: Text(
'${_pokemon[index]['name']}',
style: TextStyle(
fontSize: 16.0,
fontFamily: 'Chivo',
fontStyle: FontStyle.italic),
),
),
Text(
'${_pokemon[index]['num']}',
style: TextStyle(
fontFamily: 'Indie Flower',
fontWeight: FontWeight.w400,
fontSize: 20.0),
)
],
),
),
),
);
}),
));
}
}
Future<Map> fetchData() async {
String url =
"https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json";
http.Response response = await http.get(url);
return json.decode(response.body);
}
class PokeDetails extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.cyan,
appBar: AppBar(
title: Text('${_pokemon[index]['name']}'),
centerTitle: true,
backgroundColor: Colors.cyan,
),
);
}
}
I am expecting the correct pokemon to appear on screen 2 (PokeDetails) but i have yet to be able to achieve this

Answer 1

I think you may benefit from reading through some more of the documentation on flutter. Though, to get you moving forward, your PokeDetails class has no way of knowing what to look for when you're sending over the pokemon data... You should create a pokemon class so you can map the api results over to something a little easier to work with. Then you can do something like:
class PokeDetails extends StatelessWidget{
final Pokemon pokemon;
PokeDetails({
#required this.pokemon
});
//now display the pokemon details
}
Side-note, you'll want to avoid using those global variables and functions (such as fetchData, _data, and _pokemon). Those should be in their own classes. Maybe a class containing your fetch function along with a map of the data that you received. This is all kind of the bare minimum to get your feet wet. Happy coding!