Complete Code

Now, let’s dive into the complete code for Pokémon app. When Flutter app is created, main.dart is already present in its folder. In main.dart file, write the following code –

Dart

import 'package:flutter/material.dart'; 
import 'package:http/http.dart' as http; 
import 'dart:convert'; 
import 'dart:core'; 
  
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<void> getData() async { 
    http.Response pokeResponse; 
    String urlString = 
        "https://raw.githubusercontent.com/Biuni/PokemonGO-Pokedex/master/pokedex.json"; 
    Uri uri = Uri.parse(urlString); 
  
    pokeResponse = await http.get(uri); 
  
    if (pokeResponse.statusCode == 200) { 
      pokeData = json.decode(pokeResponse.body); 
      pokeList = pokeData['pokemon']; 
    } else { 
      throw Exception('Failed to load data from the API'); 
    } 
  } 
  
  void initState() { 
    getData(); 
    super.initState(); 
  } 
  
  Widget build(BuildContext context) { 
    return Scaffold( 
        backgroundColor: Colors.white, 
        appBar: AppBar( 
          title: Text("PokeDex"), 
          backgroundColor: Colors.green, 
        ), 
        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: 300, 
                            decoration: BoxDecoration( 
                                color: Colors.green, 
                                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, 
                                        color: Colors.white), 
                                  ), 
                                ), 
                                Image.network( 
                                  pokeList[index]['img'], 
                                  width: 300, 
                                  height: 200, 
                                ), 
                                Row( 
                                  mainAxisAlignment: MainAxisAlignment.center, 
                                  children: [ 
                                    Text( 
                                      "Candy: ", 
                                      style: TextStyle( 
                                          fontSize: 15, 
                                          fontWeight: FontWeight.w500, 
                                          color: Colors.white), 
                                    ), 
                                    Text(pokeList[index]['candy'], 
                                        style: TextStyle( 
                                            fontSize: 15, 
                                            color: Colors.white, 
                                            fontWeight: FontWeight.w500)), 
                                  ], 
                                ), 
                                SizedBox( 
                                  height: 10, 
                                ), 
                              ], 
                            ), 
                          ), 
                        ) 
                      ], 
                    ), 
                  ); 
                }, 
              )); 
  } 
} 

Output:

Flutter – Creating a Simple Pokémon App

Embark on an exciting journey into the vibrant world of Pokémon with an innovative mobile app, that we will be building in this article – ‘PokeDex.’ Powered by the versatile Flutter framework and integrated with the extensive Pokemon API, this app redefines the Pokémon experience. Flutter is a cutting-edge open-source UI framework developed by Google, that empowers us to craft seamless, visually appealing applications across mobile, web, and desktop platforms, all from a unified codebase.

Complete Code

Dart

Output:

Flutter – Creating a Simple Pokémon App

Similar Reads