In this Article, we will we building a pokemon app using pokemon api. I hope you have Flutter installed and somewhat familiar with Flutter and APIs.
Calling APIs for the data and then displaying that extracted data as a beautiful UI is my favorite task.
Let's have a look what we will be building today -
1. Add "http" dependency in pubspec.yaml
2. Add this code in main.dart -
import 'package:http/http.dart' as http; | |
import 'dart:convert'; import 'package:flutter/material.dart'; | |
void main() { | |
runApp(MyApp()); | |
} | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
debugShowCheckedModeBanner: false, | |
home: MyHomePage(), | |
); | |
} | |
} | |
class MyHomePage extends StatefulWidget { | |
@override | |
_MyHomePageState createState() => _MyHomePageState(); | |
} | |
class _MyHomePageState extends State<MyHomePage> { | |
Map pokeData; | |
List pokeList; | |
Future getData() async { | |
http.Response pokeResponse; | |
pokeResponse = await http.get( | |
'https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json'); | |
pokeData = json.decode(pokeResponse.body); | |
pokeList = pokeData['pokemon']; | |
print(pokeList); | |
} | |
void initState() { | |
getData(); | |
super.initState(); | |
} | |
Widget build(BuildContext context) { | |
return Scaffold( | |
backgroundColor: Colors.cyan[50], | |
appBar: AppBar( | |
title: Text("PokeDex"), | |
backgroundColor: Colors.pink[200], | |
), | |
body: pokeList == null | |
? Center(child: Text("Wait")) | |
: ListView.builder( | |
itemCount: pokeList == null ? 0 : pokeList.length, | |
itemBuilder: (context, index) { | |
return Container( | |
child: Column( | |
children: <Widget>[ | |
Padding( | |
padding: const EdgeInsets.all(10.0), | |
child: Container( | |
height: 300, | |
width: 200, | |
decoration: BoxDecoration( | |
color: Colors.white, | |
borderRadius: BorderRadius.circular(20) | |
), | |
child: Column( | |
children: [ | |
Padding( | |
padding: const EdgeInsets.all(8.0), | |
child: Text( | |
pokeList[index]['name'], | |
style: TextStyle( | |
fontSize: 20, fontWeight: FontWeight.w600), | |
), | |
), | |
Image.network( | |
pokeList[index]['img'], | |
width: 200, | |
height: 200, | |
), | |
Row( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: [ | |
Text("Candy: ",style: TextStyle(fontSize: 15,fontWeight: FontWeight.w500),), | |
Text(pokeList[index]['candy'], | |
style: TextStyle(fontSize: 15,fontWeight: FontWeight.w500)), | |
], | |
), | |
SizedBox(height: 10,), | |
], | |
), | |
), | |
) | |
], | |
), | |
); | |
}, | |
)); | |
} | |
}
3. Add following lines of code in pokemon_details.dart -
import 'package:flutter/material.dart'; class PokeDetails extends StatelessWidget { final List pokeList; final int index; const PokeDetails({this.pokeList, this.index}); @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.pink[100], body: Center( child: Container( width: 300, height: 400, decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(30)), child: Stack( children: [ Padding( padding: EdgeInsets.all(70), child: Text( pokeList[index]['name'], style: TextStyle( color: Colors.black, fontSize: 25, fontWeight: FontWeight.w500), ), ), Positioned( child: Container( child: Image.network( pokeList[index]['img'], height: 500, ), ), ), Positioned( top: 290, left: 40, child: Text("Height: ",style: TextStyle( color: Colors.black,fontSize: 20,fontWeight: FontWeight.w500),) ), Positioned( top: 290, left: 120, child: Text(pokeList[index]['height'], style: TextStyle( color: Colors.black,fontSize: 20,fontWeight: FontWeight.w500),) ), Positioned( top: 320, left: 40, child: Text("Weight", style: TextStyle( color: Colors.black,fontSize: 20,fontWeight: FontWeight.w500),) ), Positioned( top: 320, left: 120, child: Text(pokeList[index]['weight'], style: TextStyle( color: Colors.black,fontSize: 20,fontWeight: FontWeight.w500),) ), Positioned( top: 360, left: 40, child: Text("Candy :", style: TextStyle( color: Colors.black,fontSize: 20,fontWeight: FontWeight.w500),) ), Positioned( top: 360, left: 120, child: Text(pokeList[index]['candy'], style: TextStyle( color: Colors.black,fontSize: 20,fontWeight: FontWeight.w500),) ), ], ), ), ), ); } } |
Comments
Post a Comment