Skip to main content

Pokemon App in Flutter using Pokemon API

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

            ],
          ),
        ),
      ),
    );
  }
}

I hope you find this project interesting, if you have any doubt comment down, I am always there to help you out.
Labels:

Comments

Post a Comment

Popular posts from this blog

List of Questions asked by Morgan Stanley

  Coding Questions -  1.  .   Exchange kth node from start and kth node from end of a singly linked list. 2.    Given a number, you have to find next greater number which has same set of digits. 3.    Given a binary tree, you have to print level order traversal of the tree (left child then right child) but every next level has to be printed in next line. 4.    Longest Common Substring 5.    Spiral level order traversal 6.    Add two linked lists 7.    Write a function to find the mirror image of binary tree 8.    WAP to find the character which occurred maximum times in the character array 9.  Given a 2d matrix find an element in a matrix which is 0 and make the entire row and column to 0 10.  Find the minimum element in the rotated array of integers 11.  Find highest length substring such that there are equal number of 0’s and 1’sin array of 1’s and 0’s only 12.  Given a dictio...
Post a Comment
Read more

Which is best: LeetCode vs HackerEarth ?

  Well, all the platforms almost are same except the interface. That's what I think. To conclude the result, let's compare them through the features they offer.  Features of Leetcode -  Topic - wise questions Comapny-wise questions Weekly contests Interview Preparation section Discuss section Features of HackerEarth Topic-wise problems Monthly contests Discuss section Hiring Contests Hackathons Earlier, when I started coding in my first year. I was fond of HackerEarth. But when I stoped using hackerearth and shifted to Leetcode, I like it more. It depends upon how much comfortable you are with the interface. But, it can't be denied that Leetcode offer more than HackerEarth. But for the coders who love hackathons, HackerEarth is best for them and for the people looking out for job opportunities. Do share your favorite through comments!
Post a Comment
Read more

Top Questions asked By Walmart

  Discuss in detail what happens when you write a code and compile it. What is multithreading? State any C++ multithreading framework you might have worked with. Explain encapsulation, abstraction, polymorphism. Explain inheritance. What is the Diamond problem? How memory is allocated in C++. What is malloc? Differences from calloc? What is a microprocessor? Explain microservices architecture. Explain normalization and all their forms. Differences between inner and outer joins. DFS vs. BFS What is the heap? Detect a loop in the linked list. If a loop exists, return the start node of the loop. Find the third most frequent element in an array. Finding n next permutations using some specific set of digits given.   Find the number of ways of reaching from top left to bottom right of a matrix.   Minimum number of jumps to reach end given a number N. print in how many ways it can be represented as N = a+b+c+d , 1< =a< =b< =c< = d; 1<=N< = 5000  given two ...
Post a Comment
Read more