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 Facebook

                  Facebook is the dream company of almost every software engineer. If you are doing interview preparation, you can't skip the must do coding questions for Facebook. Facebook is the product-based company and tests the candidate on data structures and algorithms, and logical questions. The coding level is a bit tough, but you can do it with your hard work. Below is the list of coding questions you must prepare before sitting for Facebook. Smallest string which not a subsequence of the given string Maximum length possible by cutting N given woods into at least K pieces Count possible decodings of a given Digit Sequence | Set 2 Find the maximum path sum in a binary tree   Maximize profit for buying and selling stock given a series of price vectors Given  m  sorted arrays, find the  k- th smallest value Binary search in a sorted, rotated array Given a string, check if it is a palindrome  by ignoring spaces....
Post a Comment
Read more