DEV Community: emjaycodes

Pokémon Card App: Exploring REST API in Dart and Flutter

emjaycodes — Thu, 10 Aug 2023 10:27:15 +0000

Introduction

The Pokémon universe has captivated millions of fans worldwide, and the thrill of collecting Pokémon cards is unmatched. What if you could bring that excitement to the digital realm?

In this article, we will embark on an exciting journey to create a Pokémon Card app using Dart and Flutter. Our primary focus will be leveraging REST APIs to fetch Pokémon data and dynamically generate Pokémon cards. Along the way, we'll delve into the fundamentals of working with REST APIs, making network requests, and handling data in a Flutter application.

Understanding REST APIs

REST APIs have emerged as a cornerstone for creating dynamic and interconnected applications in app development. REST (Representational State Transfer) APIs provide a standardized and platform-independent way for applications to communicate and exchange data over the Internet. They enable developers to seamlessly integrate external systems and access different data sources and functionalities.

Prerequisites

Fundamental knowledge of Flutter and Dart
An emulator or a smartphone for debugging

Set up a Flutter Project

Before we begin, make sure you have the following installed:

Flutter SDK
Dart SDK
Code editor (e.g., Visual Studio Code, Android Studio)

A Flowchart of the Application

Let’s get the rundown on how the app is going to work. Once you launch the app, you will see a button that says generate, When you tap on the button, you will see a Pokemon character, and if that doesn’t happen, you’ll see a dialog box telling you why it didn’t work and an action button.

Let's visualize the flow of actions using a flowchart. Take a look at the diagram to get a better understanding.

fig 1. A Flowchart of the Application

Create the Pokemon Card Application

To create the Pokemon card application, we'll follow these steps:

Set up a new Flutter project:
Open your terminal or command prompt.
Run the command:

flutter create pokemon_card_app

Navigate to the project directory:

cd pokemon_card_app

Open the project in your preferred code editor.
Add dependencies:
Open the pubspec.yaml file.

Add the following dependencies under the dependencies section:

Dependencies:

flutter: sdk:
http: ^0.13.3
flutter flip_card: ^0.5.1
google_fonts: ^2.1.0
flutter_spinkit: ^5.1.0

Save the file and run flutter pub get in the terminal to fetch the dependencies.

Make HTTP Requests with Dart

An Overview of the HTTP package in Dart

The HTTP package in Dart provides a straightforward and efficient way to make HTTP requests and handle responses in Dart applications. It simplifies interacting with APIs and retrieving data from external sources.

Dart's HTTP package offers classes and methods that allow developers to send HTTP requests and handle responses.

It supports various HTTP methods such as GET, POST, PUT, DELETE, etc., and provides functionalities to set headers, pass query parameters, and handle cookies. The package also supports working with JSON, allowing developers to quickly parse and serialize JSON data.

In this article, you will only be using the GET methods to retrieve data from the Pokemon API

Implement Functions to handle API Requests and Responses

To demonstrate the implementation of functions for handling API requests and responses, we'll use the HTTP package in Dart. First, make sure to include the HTTP package in your project by adding the following import statement to your Dart file:

import 'package:http/http.dart' as http;

Make a GET request

To make a GET request to an API endpoint, you can use the get function provided by the HTTP package. Here's an example:

Future<void> fetchData() async {

var url = Uri.parse('https://api.example.com/data');
var response = await http.get(url);
if (response.statusCode == 200) {
// Successful response
var data = response.body;
// Handle the retrieved data
} else {
// Error handling
print('Request failed with status: ${response.statusCode}.');
}
}

Design the Pokémon Card UI

Designing the layout and structure of a Pokémon card is crucial to creating an appealing and user-friendly UI. The card serves as a visual representation of the Pokémon and provides essential information to the user. Let's discuss the planning of the layout and structure and how to utilize Flutter widgets to create a visually appealing and interactive Pokémon card.

Layout and Structure of the Pokémon card

The layout and structure of the Pokémon card will consist of a "Column" with a "FlipCard" widget as the main component. The card's front side displays the Pokémon's "sprite" and "name", while the back side will show the Pokémon's "ID", "abilities", "type", "height", and "weight". The design utilizes "Container", "Column", "SizedBox", "Text", "Image", "CircularProgressIndicator", and custom widgets to create the Pokémon card.

Now let's dive into the code for the Pokemon card:

Firstly Open the lib directory and create a new file named "flipping_card.dart".

Then in this file, we'll import the following:

After importing, create a stateless widget called "FlippingPokemonCard".



class FlippingPokemonCard extends StatelessWidget {
  final String type;
  final int height;
  final int weight;
  final int id;
  final String name;
  final String sprites;
  final String abilities;

  const FlippingPokemonCard({
    super.key,
    required this.type,
    required this.height,
    required this.weight,
    required this.id,
    required this.name,
    required this.sprites,
    required this.abilities,
  });

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Center(
          child: Container(
              height: MediaQuery.of(context).size.height * 0.5,
              width: MediaQuery.of(context).size.width * 0.9,
              child: FlipCard(
                  front: Container(
                    decoration: BoxDecoration(
                      color: Colors.amberAccent,
                      borderRadius: BorderRadius.circular(20),
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black,
                            offset: Offset(0, 3.0),
                            blurRadius: 9.0,
                            spreadRadius: 2.0)
                      ],
                    ),
                    child: Column(
                      children: [
                        SizedBox(
                          height: 10,
                        ),
                        Expanded(
                          child: Image.network(sprites,
                              loadingBuilder: (context, child, loadingProgress) {
                            if (loadingProgress == null) {
                              return child;
                            }
                            return Center(child: CircularProgressIndicator());
                          }),
                        ),
                        SizedBox(height: 10),
                        Text(
                          'Name: $name',
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 30,
                          ),
                        ),
                      ],
                    ),
                  ),
                  back: LayoutBuilder(builder: (context, contraints) {
                    return Container(
                      decoration: BoxDecoration(
                        boxShadow: [
                          BoxShadow(
                              color: Colors.black,
                              offset: Offset(5.0, 5.0),
                              blurRadius: 10.0,
                              spreadRadius: 2.0)
                        ],
                        color: Colors.yellow,
                        borderRadius: BorderRadius.circular(20),
                      ),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.center,
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          SizedBox(
                            height: 20,
                          ),
                          Text(
                            'ID: ${id.toString()}',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 59,
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Text(
                            'Name: $name',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 30,
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          if(contraints.maxHeight > 300)
                          Expanded(
                            child: Text(
                              'Ability: $abilities',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 25,
                              ),
                            ),
                          ) else Text(
                              'Ability: $abilities',
                              style: TextStyle(
                                fontWeight: FontWeight.bold,
                                fontSize: 30,
                              ),
                            ),

                          SizedBox(
                            height: 10,
                          ),
                          Text(
                            'Type: $type',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 30,
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Text(
                            'Height: ${height.toString()} mm',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 30,
                            ),
                          ),
                          SizedBox(
                            height: 10,
                          ),
                          Text(
                            ' Weight: ${weight.toString()} LBS',
                            style: TextStyle(
                              fontWeight: FontWeight.bold,
                              fontSize: 30,
                            ),
                          ),
                        ],
                      ),
                    );
                  },),),),
        ),
        SizedBox(
          height: 10,
        ),
      ],
    );
  }
}

This is a lot of code, so you can take a minute to go through it and understand what is happening, but here is a breakdown of the layout and structure of the Pokémon card:

The "FlippingPokemonCard" widget extends "StatelessWidget", indicating it won't have any mutable state.
The widget's constructor takes several required parameters, such as type, height, weight, id, name, sprites, and abilities. These parameters represent the information about a specific Pokémon that will be displayed on the card.
Inside the "build()" method, the widget is structured as a "Column" widget. This allows us to vertically arrange the components of the card.
The card is implemented using the FlipCard widget from the "flip_card" package. It takes two child widgets: the card's front and back. The card flips horizontally to reveal the back when tapped.
The front side of the card is wrapped inside a "Container" widget. It has a decoration property that defines the appearance of the card. It includes a background color, border radius, and a shadow effect.
Inside the front side of the card, there is a "Column" widget containing the following components:
A "SizedBox" for adding some vertical spacing.
An "Image" widget to display the Pokémon's sprite. It loads the image from the given sprites URL. While the image is loading, a "CircularProgressIndicator" is shown.
A "Text" widget displaying the Pokémon's name.
The back side of the card is implemented using the "LayoutBuilder" widget. It allows us to adjust the layout based on the available space.
Inside the "LayoutBuilder" is a "Container" widget with similar decoration to the front side of the card. It includes a background color, border radius, and shadow effect.
Inside the back side of the card, there is a "Column" widget containing the following components:
A conditional rendering of the ability Text widget. If the card's height exceeds 300, the ability text is wrapped inside an "Expanded" widget to allow it to take up the remaining vertical space. Otherwise, it is displayed without the "Expanded" widget.
"Text" widgets display the Pokémon's name, ID type, height, and weight.

Create a Model Class to parse the JSON.

Create a folder inside the lib folder called models; then, in this models folder, Create a file called "pokemon.data"; this is the file where you will write the code for the Dart Object;

The model is a class that holds the data gotten from the API, like the name, height, etc., and this class will house a function to convert the JSON data to a Dart object.

class PokemonInfo {
  String type;
  int height;
  int weight;
  int id;
  String name;
  String? sprites;
  String abilities;

  PokemonInfo(
      {required this.type,
      required this.height,
      required this.weight,
      required this.id,
      required this.name,
      this.sprites,
      required this.abilities});
}

In the code snippet above, you just created a model, and the model is called “PokemonInfo”. The “PokemonInfo” class represents a Pokemon information object with properties like "type", "height", "weight", "id", "name", "sprites", and "abilities". The class has a constructor that assigns named parameters to the corresponding class properties.

Parse JSON Data and convert it into a Dart object.

As I mentioned earlier the “PokemonInfo” class is also going to have a function to convert the JSON data to a dart object so let’s do that.

Import the “dart:convert” file into the file so that we can convert the data.

import' dart:convert';

The next step is to write the function called “pokemonInfoFromJson” inside the “pokemonInfo” class.

The "pokemonInfoFromJson" function takes a JSON string as input (String str). It uses the "json.decode" function from the "dart:convert" library to parse the JSON string into a dynamic data structure. It calls the "PokemonInfo.fromJson" factory constructor passing the decoded JSON data and it returns the created "PokemonInfo" object.

PokemonInfo pokemonInfoFromJson(String str) => PokemonInfo.fromJson(json.decode(str));
factory PokemonInfo.fromJson(Map<String, dynamic> json) {
return PokemonInfo(
type: json['types'][0]['type']['name'] ?? 'Unkwown',
height: json['height'] ?? 0,
weight: json['weight'] ?? 0,
id: json['id'] ?? 0,
name: json['species']['name'] ?? 'Unkwown',
sprites: json['sprites'] != null ? json['sprites']['other']['home']['front_default'] : null,
abilities: json['abilities'][0]['ability']['name'] ?? 'Unkwown',
);
}

The function above has a factory constructor called "fromJson" that takes a "Map<String, dynamic>" as input (json).

Inside the "fromJson" factory constructor, it extracts the required data from the json map and assigns them to the class properties.
The "type" is extracted from the JSON structure: json['types'][0]['type']['name']. If it is not available, the default value 'Unknown' is used.
The "height" is extracted from json['height']. If it is not available, the default value 0 is used.
The "weight" is extracted from json['weight']. If it is not available, the default value 0 is used.
The "id" is extracted from json['id']. If it is not available, the default value 0 is used.
The "name" is extracted from json['species']['name']. If it is not available, the default value 'Unknown' is used.
The “sprites” are extracted from json['sprites']['other']['home']['front_default']. If it is not available, it is assigned as null.
The “abilities” are extracted from json['abilities'][0]['ability']['name']. If it is not available, the default value 'Unknown' is used.

The purpose of this code is to provide a way to convert the JSON data into a Dart object (PokemonInfo) that represents Pokemon information. The fromJson factory constructor is responsible for extracting the necessary data from the JSON map and creating an instance of the "PokemonInfo" class.

Fetch Pokémon Data from the API

Now that we have the foundation in place, let's fetch Pokémon data from the API and dynamically populate our cards. We'll modify our "fetchData()" function we talked about in the Making HTTP Requests with Dart section to handle this:

Create a folder inside the lib folder called services, and then in this services folder, you’ll create a file called "networking.data"; this is the file where you will write the code for the HTTP GET request;

Import the necessary packages which are “dart convert” and "http_package".

import' dart:convert';
import 'package:http/http.dart' as http;

The next thing you will do is to create a function similar to the one in “Making a GET request”

Get the API URL and endpoints

This is the API URL: 'https://pokeapi.co/api/v2/pokemon/

The endpoint is: /ditto

N/B: you will change the endpoint to use a number to index the character instead of a name.

Future<PokemonInfo> getpokemondata() async {
String url = 'https://pokeapi.co/api/v2/pokemon/1';
final response = await http.get(Uri.parse(url));
if (response.statusCode == 200) {
String data = response.body;
final decodedData = jsonDecode(data);
return PokemonInfo.fromJson(decodedData);
} else {
throw 'failed to load data : ${response.statusCode}';
}
}
}

There is a debugging technique to know if your request was successful or unsuccessful, which is to print the "response.statusCode" or the "response.body" in the if statement, it will tell you what status code you got; 200 means it was successful, but remember to remove the print statement after verifying.

print( response.statusCode);

nter")

Fig 2. Status code on debug console

print(data);

Fig 3. Response body on the debug console

The "getPokemonData()" function above uses the "HTTP GET" function from the HTTP package in Dart to request data from the Pokémon API by parsing the URL value into the GET function. If the response is successful, you receive the details of a specific Pokémon and parse them to the dart object you created earlier. If the response is unsuccessful, you will receive an error.

Parse the API Response and Extract Relevant Data

Once the API response is obtained, the next step is to parse the response and extract the relevant data. In this case, the response is in JSON format, so we use the "jsonDecode()" function from the "dart:convert" package to convert the JSON data into a Dart object.

final Data = jsonDecode(response.body);

The Data variable now holds the parsed JSON response as a Dart object. You can extract specific information about the Pokémon from this object, such as its name, abilities, stats, types, etc.

For example, if you want to extract the name of the Pokémon, you can access it using the appropriate key or field from the parsed object:

final pokemonName = Data['name'];

Similarly, you can extract other relevant information based on the structure of the API response. But you will not access the information like the above; you will access it from the "PokemonInfo" class you created that receives the response from the API and holds it for future use.

Display the Pokemon Data on the Pokemon Card

This section is where we use the data we have gotten from the API to populate our card.

Create a file in the lib folder called "home.dart", where you will use the flipping card we created to show the Pokemon data.

import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';
import 'package:pokemon_card/models/pokemon.dart';
import 'package:pokemon_card/services/networking.dart';
import 'utilities/fliping_card.dart';

class HomePage extends StatefulWidget {
  const HomePage({
    super.key,
  });
  @override
  State<HomePage> createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  late Future<PokemonInfo> getpokemon;
  @override
  void initState() {
    getpokemon = getpokemondata(context, number);
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.purpleAccent,
      appBar: AppBar(
        backgroundColor: Colors.purple,
        elevation: 0,
        title: const Center(child: Text('POKEMON CARD')),
      ),
      body: Column(
        children: [
          const SizedBox(height: 35),
          Expanded(
            child: FutureBuilder<PokemonInfo>(
                future: getpokemon,
                builder: (BuildContext context,
                    AsyncSnapshot<PokemonInfo> snapshot) {
                  if (snapshot.connectionState == ConnectionState.waiting) {
                    return const SpinKitRotatingPlain(
                      size: 20,
                      color: Colors.yellow,
                    );
                  }
                  if (snapshot.hasError) {
                    return Text(snapshot.error.toString());
                  } else {
                    return FlippingPokemonCard(
                      abilities: snapshot.data!.abilities,
                      height: snapshot.data!.height,
                      id: snapshot.data!.id,
                      name: snapshot.data!.name,
                      sprites: snapshot.data?.sprites ??
                          "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/1.png",
                      type: snapshot.data!.type,
                      weight: snapshot.data!.weight,
                    );
                  }
                }),
          ),
          const SizedBox(
            height: 10,
          ),
        ],
      ),
    );
  }
}

Let's start with the imports in the "home.dart" file;

package:flutter/material.dart: This import provides Flutter's Material UI components.
package:flutter_spinkit/flutter_spinkit.dart: This import includes pre-built loading spinners.
package:pokemon_card/models/pokemon.dart: This import refers to the PokemonInfo class that represents Pokémon information.
package:pokemon_card/services/networking.dart: This import refers to the "getpokemondata" function fetching Pokémon data from a network.
utilities/fliping_card.dart: This import is for the FlippingPokemonCard widget that represents the Pokémon card with flipping animation.

After that, Create a "StatefulWidget" called "HomePage", which represents the application's main page. The constructor doesn't have any parameters, and it overrides the "createState" method to create an instance of the "_HomePageState" class.

In the "HomePage" declare the necessary variable "getpokemon"

late Future<PokemonInfo> getpokemon;

The "getpokemon" variable is a Future variable with the type "PokemonInfo" that holds the result of fetching Pokémon data asynchronously.

In the "initState" method inside the HomePage stateful widget, call the "getpokemondata" function to fetch Pokémon data asynchronously and assign the result to the "getpokemon" variable.

@override
void initState() {
getpokemon = getpokemondata();
super.initState();
}

The "super.initState()" is called to ensure the parent class's initState method is executed.

In the build method, return a "Scaffold" widget that provides the basic structure of the page.

The "Scaffold" has a purple accent background color and an "AppBar" at the top with a purple background.

Scaffold(
backgroundColor: Colors.purpleAccent,

The "AppBar" contains a centered title with the text "POKEMON CARD".

appBar: AppBar(
backgroundColor: Colors.purple,
elevation: 0,
title: const Center(child: Text('POKEMON CARD')),),

The body of the "Scaffold" is a "Column" widget with the following necessary components:

A "SizedBox" for adding vertical spacing.
An "Expanded" widget that contains a FutureBuilder for asynchronously building the Pokémon card based on the fetched data.

Use the Future Builder to Display the Pokemon Card

Let me explain the future builder and how we use it in our project.

The "FutureBuilder" widget is a great tool in Flutter that allows you to handle asynchronous operations and update the user interface based on the current state of the future. It simplifies the process of managing and displaying data that is being fetched asynchronously.

future: "getpokemon" specifies the future that the FutureBuilder will monitor. In this case, "getpokemon" is a function or method that returns a "Future<PokemonInfo>" object.
builder: builder is a callback function that defines the UI based on the current state of the future. It takes in two parameters: the BuildContext and an "AsyncSnapshot<PokemonInfo>" object, representing the future's current state.

Inside the builder function, the code checks the "connectionState" property of the snapshot object to determine the current state of the future.

If the connection state is "ConnectionState.waiting", the future is still in progress. In this case, a SpinKitRotatingPlain widget is returned, which could be a loading indicator or any other widget indicating that the data is being fetched.

FutureBuilder<PokemonInfo>(
future: getpokemon,
builder:
(BuildContext context, AsyncSnapshot<PokemonInfo> snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return const SpinKitRotatingPlain(
size: 20,
color: Colors.yellow,
);
}

If the snapshot has an error, the snapshot.hasError condition will be true. In this case, an error message is displayed using a Text widget, showing the error message obtained from snapshot.error.toString().

if (snapshot.hasError) {
return Text(snapshot.error.toString());
}

If the connection state is not waiting and there is no error (else condition), the future has been completed successfully, and the data is available in "snapshot.data".

else {
return FlippingPokemonCard(
abilities: snapshot.data!.abilities,
height: snapshot.data!.height,
id: snapshot.data!.id,
name: snapshot.data!.name,
sprites: snapshot.data?.sprites ?? "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/1.png",
type: snapshot.data!.type,
weight: snapshot.data!.weight,
);

Inside the else block, our FlippingPokemonCard widget is returned, which uses the data obtained from "snapshot.data". This widget receives properties like abilities, height, id, name, sprites, `

So if everything works fine the picture below should be what you see;

Fig 4. Front of the card

Fig 4. Back of the card

And if it doesn’t work as planned you should see the picture below;

fig 5. Error message

Generate Pokémon Cards Dynamically

We have succeeded in showing a Pokemon character on our card. Still, it's just one character that is showing, and this project aims to randomly generate different Pokemon characters every time a button is pressed, so let's do that now.

So firstly, modify our "getpokemon" function to accept an int value parameter called "characterid";

dart Future<PokemonInfo> getpokemondata( int characterid) async { String url ='https://pokeapi.co/api/v2/pokemon/$characterid'; final response = await http.get(Uri.parse(url)); if (response.statusCode == 200) { String data = response.body; final decodedData = jsonDecode(data); return PokemonInfo.fromJson(decodedData); } else { throw 'failed to load data : ${response.statusCode}'; } } }

With this int variable in place, you now have a placeholder for the random numbers in the function,

Let's move on to the next part, which is in the "home.dart" file. In this file, create a variable of type int under the "getpokemon" variable and call it "number".

`dart

late int number;

The next thing you will do is give the number variable we just created a value inside the "initState", but there's a twist to it; you will not give the variable a static value; you will provide it with a value that changes.

`dart

@override
void initState() {
number = Random().nextInt(1000);
getpokemon = getpokemondata(number);
super.initState();
}

The value of the "number" variable is a method from "dart:math" that generates non-negative random numbers within a specific range; in this case, the range is 1000.

Parse this new variable into the instance of our "getpokemondata" function in the "initState", as shown above.

So now you should see a new Pokemon character every time you restart your app. But you are not done yet because you don't want to restart our app every time to display a new character, which brings us to the next part, creating a generate button to generate a new character every time it is pressed.

Create a Custom Button

Create a file in the "utilities" folder called "generate_button.dart", and in this file, you will create the custom button.

`dart

import 'package:flutter/material.dart';

class GenerateButton extends StatelessWidget {
const GenerateButton({super.key, required this.function});

final Function()? function;

@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: function,
child: Container(
height: 50,
width: 150,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.yellow,
boxShadow: const [
BoxShadow(
color: Colors.black,
offset: Offset(0, 3.0),
blurRadius: 1.0,
spreadRadius: 1.0)
],
),
child: const Center(
child: Text(
'Generate',
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w300),
)),
),
);
}
}

In the above code, we have successfully created a custom button, which is a stateless widget that returns a container wrapped with the GestureDetector widget.

The GestureDetector widget has a property called "onTap" this property is a "function?" that returns a function of type void, so we created a variable called "function" to receive a function when tapped later.

The "container" also has a child, which is a text widget saying "Generate".

It is time to use the custom button you created in the "home.dart" file,

At the bottom of the "column", let's use the custom button that we named "generateButton", When you use the button, you will see that we get an error saying we have a required parameter called "function" that we need to fill. It is now time to write the function that randomly generates the Pokemon characters.

Under the "initState" is where you’ll put the code below;

`dart

void generateRandomPokemon() {
setState(() {
number = Random().nextInt(1000);
getpokemon = getpokemondata(number);
});
}

The code above is a function called "generateRandomPokemon" That doesn't return any value. The main aim of this function is to recall the "number" variable and then parse the new value to the "getpokemondata" function.

The "setState" ensures that when a new int value is parsed, it marks the UI as dirty and reloads the UI with the Pokemon character corresponding with the present int value.

We have finished writing the function to generate a new character for the Pokemon card randomly. It's now time to use this function on the generate button.

dart GenerateButton(function: generateRandomPokemon),

Fig 6. A button called Generate is tapped, and the character changes

Now, whenever you tap the generate button, the app will reload with a different Pokemon character on the card.

Enhance the User Experience

Loading Indicators

To let the users know that the app is doing some work in the background, you display a loading indicator while fetching data from the API. You can use the CircularProgressIndicator or a package like flutter_spinkit for custom loading spinners, and we used both for this project.

Wrap your FutureBuilder widget's child with the loading indicator widget and conditionally show it based on "snapshot.connectionState".

For example, if the connection state is "ConnectionState.waiting", show the loading indicator widget.

Here's an example code snippet to demonstrate what we did earlier:

dart if (snapshot.connectionState == ConnectionState.waiting) { return Center( child: CircularProgressIndicator(), ) // or any other loading indicator widget ); }

Error Handling

Error handling in Flutter refers to gracefully handling and managing errors or exceptions that occur during the execution of your app. Flutter provides various mechanisms to handle errors effectively and provide a good user experience. Here are some common error-handling techniques in Flutter:

Try-Catch Blocks
Error Callbacks
Flutter Error Widget

We will be using the try-catch block for this project.

Try-Catch Blocks

dart try { // Code that might throw an exception } catch (e) { // Handle the exception }

You can use try-catch blocks to catch and handle exceptions in Dart. The "try" part of the function tries to execute a function and return a value, if, along the way an error occurs, the "catch" part handles it. We will place the "getpokemondata" function that might throw an exception inside a "try" block and use a generic catch block to handle any exception. This will allow us to handle errors and provide appropriate feedback to the user.

dart Future<PokemonInfo> getpokemondata(int characterid) async { try { String url = 'https://pokeapi.co/api/v2/pokemon/$characterid'; final response = await http.get(Uri.parse(url)); if (response.statusCode == 200) { String data = response.body; final decodedData = jsonDecode(data); return PokemonInfo.fromJson(decodedData); } else { throw 'failed to load data : ${response.statusCode}'; } } catch (e) { throw e.toString(); } }

At this point, the error handling of the app is 90 percent complete; the remaining 10 percent is the fact that we are catching the exception but not notifying the users of what is going on. Let's fix that by showing the users a dialog box anytime we catch an exception.

Create a Dialog Box

To create a dialog box for this project, Create a file in the "utilities" folder called "show_error_dialog.dart", where we will write the code to show the dialog box.

`dart
import 'package:flutter/material.dart';

Future showErrorDialog(
BuildContext context,
String text,
) {
return showDialog(
context: context,
builder: (context) {
return AlertDialog(
title: const Text('An error occurred'),
content: Text(text),
actions: [
TextButton(
onPressed: () {
Navigator.of(context).pop();
},
child: const Text('OK'))
],
);
});
}
`

This code snippet above is the function that will display an error dialog to the user.

Let's break it down step by step:

The function "showErrorDialog" takes two parameters: "context", which is the current "BuildContext" of the app, and "text", which is the error message to be displayed in the dialog.

Then inside the function, we call the "showDialog" function, which is a built-in Flutter method that displays a dialog on the screen.

The "showDialog" function takes a "context" parameter and a "builder" function that returns the content of the dialog. The "builder" function is defined as "(context)", where context represents the "BuildContext" passed to it. It returns an "AlertDialog" widget, a pre-designed dialog widget.

The "AlertDialog" widget has a title, content, and actions. The title is set to 'An error occurred', and the content is set to the "text" parameter containing the error message.

In the actions property, we set a list containing a single "TextButton" widget. This button is labeled 'OK' and has an "onPressed" callback that closes the dialog by calling "Navigator.of(context).pop()". Finally, the "showDialog" function is returned, which displays the error dialog for the user.

You have to change the "getpokemondata" function again to show a dialog box when an exception is caught.

dart Future<PokemonInfo> getpokemondata( BuildContext context, int characterid) async { try { String url = 'https://pokeapi.co/api/v2/pokemon/$characterid'; final response = await http.get(Uri.parse(url)); if (response.statusCode == 200) { String data = response.body; final decodedData = jsonDecode(data); return PokemonInfo.fromJson(decodedData); } else { throw 'failed to load data : ${response.statusCode}'; } } catch (e) { showErrorDialog(context, 'An error occurred: $e'); throw e.toString(); } }

The "BuildContext" which is added to the parameter of the "getpokemondata" function, is an object that represents the location of a widget within the widget tree hierarchy. It provides access to various information and functionalities related to the widget's position and the overall app context.

The "showErrorDialog" function, which we have added to the "catch" part of the try-catch block, is the custom function we created to display an error dialog to the user. It takes two parameters:

context: This is the "BuildContext" of the current widget. It is required to show the dialog within the appropriate context of the app.
text: This parameter represents the error message to be displayed in the dialog; in this case, it is the error that occurred.

You have successfully handled any exception that may occur during the fetching of the data from the API. Also, you have created a dialog box to notify the user about the exception.

If you can recall, you called "getpokemondata" at two places in the "home.dart" file, so at this point, you should be having an error saying, "2 positional arguments expected by 'getpokemondata', but 1 found. Try adding the missing arguments".

Don't panic; all you have to do is add "context" to the function, and the error should go away. By parsing the "context" from the calling widget to the getpokemondata" function, we ensure that the error dialog is displayed within the correct context of the app. This is important because the dialog needs to overlay the current screen and be aware of the app's state and navigation stack.

Anytime there’s an error, the "try-catch" block will catch it, and we will also let the user know what is going on.

Fig 7. Alert dialog box

In "home.dart", you can say we are handling errors because you are using the "FutureBuilder" widget's "snapshot.hasError" property to check if an error occurred, and if an error occurs, we display an error message to the user. but you are not giving the user any dialog box to execute an action.

Conclusion

This comprehensive guide taught you how to create an immersive Pokémon Card app using Dart and Flutter. By leveraging REST APIs, making network requests, handling data, and designing captivating user interfaces, you've gained valuable insights into the app development world using Flutter. The Pokémon Card app is a fun example of how to use APIs in our application and learn about Pokemon characters. With the foundation you've built, you can continue to enhance the app by implementing additional features such as search functionality and card sorting.

Here is the link to the GitHub repo: https://github.com/emjaycodes/pokemon_card

Don't forget to leave a star on the repo.

Top 10 Tips for Building Beautiful UIs in Flutter

emjaycodes — Sat, 18 Feb 2023 19:32:59 +0000

Introduction

Who does not love an eye-catching, immersive app? I'm guessing everyone does, and Flutter is a popular framework for building cross-platform mobile applications with beautiful and responsive user interfaces (UIs), which is so cool.

As a Flutter developer, you have access to a wide range of widgets, tools, and resources that will help you create stunning UIs for your apps. In this article, I'll share ten tips that can help you improve the design and aesthetics of your Flutter UIs. Let's get right into it.

Choose the Right Colors

Colors play a vital role in the overall look and feel of your app. Make sure you choose the right color palette that reflects your brand, target audience, and app's purpose. You can use tools like Coolors or the Material Color Tool to generate attractive color schemes.

Use Appropriate Fonts

Fonts can make or break the readability and user experience of your app. Choose a font that is easy to read and matches the tone and style of your app. Google Fonts provides a wide range of free and open-source fonts that you can use in your Flutter app.

Use Responsive Layouts

Flutter provides several layout widgets that can help you build responsive and flexible UIs that adapt to different screen sizes and orientations. Use widgets like Column, Row, and Expanded to create dynamic layouts that look great on any device.

Keep it Simple

I know sometimes we would like to add some extras to our UI, but don't overload your UI with too much information or elements. Keep it simple and focus on the essential features of your app. Use whitespace and hierarchy to create a clean and visually appealing UI and also pay attention to negative spaces

Use Animations

Animations can add a touch of magic and delight to your app. Flutter provides several animation widgets and classes that you can use to create smooth and engaging animations for your UI. Use them sparingly and purposefully to avoid overwhelming your users.

Provide Feedback

Provide feedback to your users when they interact with your app. Use animations, sounds, or haptic feedback to let them know that their action has been acknowledged. This creates a sense of responsiveness and enhances the user experience.

Use Icons

Icons are a great way to convey information and actions without using too much text. Use icons that are consistent with your brand and easy to recognize. Flutter Icons provides a set of customizable icons that you can use in your app.

Optimize Images

Images can significantly impact the performance and loading time of your app. Optimize your images by compressing them or using the right file format. You can use tools like TinyPNG or Squoosh to optimize your images.

Test on Real Devices

Testing your app on real devices can help you identify UI issues that you might have missed during development. Use tools like Firebase Test Lab or AWS Device Farm to test your app on a wide range of devices and platforms.

Get Inspired

Don't be afraid to get inspired by other apps and designs. Look for design patterns and elements that you can use in your app. Platforms like Dribbble, Behance, and Pinterest provide a wealth of design inspiration and ideas.

Conclusion

Building beautiful UIs in Flutter requires a combination of design skills and technical knowledge. With these ten tips, you can improve the aesthetics and user experience of your Flutter app. Remember to keep it simple. use the right colors and fonts and provide feedback and animations to create an engaging and delightful UI. Happy designing.

A Simplistic Review of the Lifecycle of Flutter Widgets

emjaycodes — Wed, 10 Aug 2022 19:12:28 +0000

This is a concept that I couldn’t wrap my head around for a while, so I searched and tried to explain it in the simplest way I could, and I guess you’re probably trying to do the same If so, you’re at the right place. Let's get into it.

Stateless and Stateful widget

Stateless widget

These types of widgets don’t change state after they have been created. They are immutable and they are mostly used for the UI to show information. It doesn’t update its state, so once they have been created, they can’t be changed. In this type of widget, the build context is called only once.

The way I understood stateless widgets was that I thought of them as building blocks, and we all know building blocks. Once a building block has been stacked on top of another, it can’t be changed unless it is destroyed and stacked again, but this time differently.

When the portion of the user interface we are describing is independent of any other widgets, stateless widgets can be helpful. The widget types text, icons, icon buttons, and raised buttons are examples of stateless widgets.

Stateful widget

Well, these widgets are different from the stateless widgets. They are dynamic in the way that they can change their state repeatedly and that they can be redrawn again at any time.

Stateful widgets can be combined, and the state of the widget can be tracked using a state object. The state object keeps track of variables such as the configuration of the widgets and the properties of the widget; these variables in the widget can be changed using a setstate, which then updates the app.

The state object lives longer, so it has more lifecycle methods. Just as humans pass through different stages of life and die, so do stateful widgets, but one of the difference is we could tap into those stages in the widget if we wanted different things to happen at various times. This is like going into a certain stage in your life and making a few changes.

Widget lifecycle methods

The methods are listed to show what happens to a widget from the time it is created to the time it is discarded.

initState
Build
didChangeDependencies
didUpdateWidget
setState
deactivate
Dispose

initState

This is the first method that is called when we create a stateful widget and it is inserted into the widget tree. This method can be used to control HTTP queries, subscribe to streams, or any other object that we know will change the widget's data.

The syntax looks like this;

@override
 void initState() {
//TODO: implement initState
   super.initState();
 }

From the documentation, the super.initState should be at the beginning of the call.

Build

This is the second point in the lifecycle and this method is called after the init state, It describes the area of the user interface that the widget is meant to represent, and it can be called in different situations, like calling initState. calling didUpdateWidget. receiving a call to setState or when the dependency of the state object changes, it can also used for calling deactivate and then reinserting the state object into the tree at another location.

The syntax looks like this;

@override
 Widget build(BuildContext context) {
   return Scaffold();
 }

didChangeDependencies

This comes after the initState in the lifecycle, and it will be triggered if a widget's dependent object changes.

The build method is always called after this method and the framework would call this method to inform it of the change, and it can be called multiple times.

The syntax like this;

@override
 void didChangeDependencies() {
//TODO: implement didChangeDependencies
   super.didChangeDependencies();
 }

The documentation doesn’t state whether the call should come after or before the super.didChangeDependencies

didUpdateWidget

The didUpdateWidget is called if the parent widget needs to rebuild the widget because it changed its configuration. An example is when a variable is passed down the constructor and then the variable is updated. The framework provides the old widget as a comparison point between it and the new widget.The build() method will then be called by Flutter and If you need to compare the new widget to the previous one, use this method.

Any additional calls to setState after using this method are unnecessary because Flutter always calls build().

The syntax looks like this;

@override
void didUpdateWidget(ProductSquare oldWidget) {
//TODO: implement didUpdateWidget
   super.didUpdateWidget(oldWidget);
}

The documentation states that the super.didUpdateWidget should also be at the beginning of the call

deactivate

This method is called when the widget is removed from the widget tree, but it can be reinserted before the current frame’s changes are finished, when the state is moved from one point in a tree to another.

This should not be mistaken for the dispose method, as the deactivate method can remove a widget and insert it later in the widget tree, but the dispose method removes it entirely.

The syntax looks like this;

@override
 void deactivate() {
//TODO: implement deactivate
   super.deactivate();
 }

According to the documentation, the super.deactivate comes after the call

Dispose

Dispose method is called when the state object has been removed entirely from the tree. It is like the opposite of initState; you can cancel all animations, streams, etc. with this method.

This function is called when an object is permanently removed from a tree. You should set all of your dispose logic here. This function is called by the framework when this state object won't ever be rebuilt. The State object is regarded as unmounted and the mounted attribute is false when the framework calls dispose.

The syntax looks like this;

@override
 void dispose() {
//TODO: implement dispose
   super.dispose();
 }

This is the same as the deactivate where the super.dispose comes last.

NOTABLE MENTIONS

constructor

During the creation of a stateful widget, Flutter executes the constructor function and then calls the createState() method. When we examine the stateful widget, the constructor function is executed first. But the lifecycle of the stateful widget's State object begins with the call to the createState() method.

create

The Framework instantly calls createState when told to build a StatefulWidget () and State objects are created with this method. All the mutable state for this widget is contained in this object. A StatefulWidget must use this method, although this step is not designated as an actual stage in the lifecycle, it is crucial to understand what is occurring behind the scenes.

The syntax looks like this;

class MyHomePage extends StatefulWidget {
 @override
 _MyHomePageState createState() => _MyHomePageState();
}

The difference between stateless and stateful

The stateless widget only updates when it is initialized while the stateless widget changes dynamically, RaisedButtons, Text, icons and can be implemented in the stateless widget, checkboxes, radio buttons, and sliders can be implemented in the stateful widget.

Stateless widget does not have a setState(). It will be rendered once and will not update itself but stateful widget has an internal setState() and can re-render if the input data changes, stateless widget is a Static widget while stateful widgets are dynamic, the stateless widget can’t update during runtime, that isn’t the case for the stateless widget as it can update during runtime based on user action

CONCLUSION

This topic has been one of the frequently asked questions by recruiters during job interviews and In this article, we have looked at the different lifecycles in a flutter widget and explained them. You can also try to use these methods in building your applications and In your flutter project, I hope this article gives you enough information about the widget lifecycle.

We are going to look into flutter widgets more in our future articles and try to explain them in digestible chunks for you to understand.
If there’s any thing I missed or you feel should be added to this article please do well to leave a comment below. Thanks for reading.😊

How To Use Flutter Packages In Your Flutter Project

emjaycodes — Sat, 23 Jul 2022 19:45:25 +0000

Have you ever wanted to implement a certain functionality in your flutter code but got stuck because you didn’t know how to go about it? Well this is where flutter packages come in as they help to facilitate the building of your applications.
Packages contributed by other developers to the Flutter and Dart ecosystem are referred to as Flutter packages. This allows quickly building an app without having to develop everything from scratch according to the flutter docs. In other words, they are just open source libraries of code that other people have created which you can import into your project with ease.

Using Flutter Packages in Your Project
There are a few steps you need to take to be able to use these packages:

STEP 1:

You need to know the type of package you want to use in your project either by the specific name or by similar keywords. Then go to https://pub.dev/packages where you’ll see varieties of packages for different problems.

We score packages from 1 to 100 so we can choose the most efficient one. While there may be many packages, you should look for those with the best ratings.
For our example we’ll be using english_words by filiph.net.

A few terms to familiarize yourself with when browsing these packages:

*LIKES: * Likes offer a measure of how many developers have liked a package

PUB POINTS: A new way to measure quality. This includes several dimensions of quality such as code style, platform support, and maintainability.

Popularity: This provides insight into what other developers are using by determining the number of developers who use a package.

STEP 2:

Clicking on the ‘installing’ tab on the page shows you how to use the package. Firstly, we depend on it by adding just two lines to our pubspec.yaml file:
dependencies: english_words: ^4.0.0
Note: We have to be really careful about the Indentation in the pubspec.yaml file so that we don’t end up messing it up.

Secondly, we can also add it to our project by running a command on the terminal.
flutter pub add english_words.
And this will automatically add the package to the pubspec.yaml file. You’ll be notified that the pubspec.yaml file has been edited and you need to run a flutter pub get command.

STEP 3:

Now in our code, we can import the package into our Main.dart file by adding it to the top of the file (the desired file) you want the package to be called in.

import 'package:english_words/english_words.dart';
Let’s take a little example 
import 'package:english_words/english_words.dart';
main() {
  nouns.take(50).forEach(print);
}

The code above will print the top 50 most used nouns in the English language.

Conclusion

It's done! You have successfully added a flutter package into your project.
If you have any questions or concerns, feel free to contact the package developers through their email addresses listed on the package pages.

You can also help the flutterdev community by creating your own package if one doesn't exist yet.

Thanks.

The simplest way to implement a dark mode feature in a flutter application

emjaycodes — Sat, 23 Jul 2022 19:09:00 +0000

Nowadays, the dark mode feature has become everyone’s default go-to display setting due to many reasons; like its ability to prolong the battery life of a device, reduce eye strain, and increase visibility for people with low vision who are sensitive to bright light.

Hence, it is essential for applications to give it's users a choice on their display theme. In this article, we are going to learn the easiest way to add the dark mode feature to a flutter app.

Prerequisite

Basic knowledge of dart
Basic knowledge of flutter
We are going to be making use of two useful built-in classes of flutter which are; ValueNotifier and valueListenableBuilder.

valueNotifier:

A valueNotifier is changeNotifier that holds just a single value which notifiers the widget that listens when the initial value has been changed. This value can be of any type and this helps in improving the performance of the app by rebuilding only the widget where the change needs to be applied.

valueListenableBuilder:

A valueListenableBuilder as the name implies is a widget that is always attached to a valueListenable and lt checks to see if the valueNotifier value has changed and then builds the new widget accordingly. Think of a feature that's used throughout your app, and you'd like your app to update whenever or wherever that feature changes.

Implementing a Dark Mode Feature

Let's get started on implementing the dark mode feature, we are going to create a new flutter app, the name of the app can be of your choice but for the purpose of this article, we will be naming our app dark_theme.

Main.dart file

The main.dart file is where our material app is going to be built and in the material app we are going to highlight of some of these properties : ValueNotifier, ValueListenableBuilder, ThemeMode, DarkTheme

This is how the code for the main.dart will look like:

import 'package:flutter/material.dart';
import 'firstscreen.dart';



void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  // Using "static" so that we can easily access it later
  static final ValueNotifier<ThemeMode> themeNotifier = ValueNotifier(ThemeMode.light);

  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder<ThemeMode>(valueListenable: themeNotifier,
        builder: (_, ThemeMode currentMode, __) {
          return MaterialApp(
            // Remove the debug banner
            debugShowCheckedModeBanner: false,
            title: 'Dark Mode',
            theme: ThemeData(primarySwatch: Colors.purple),
            darkTheme: ThemeData.dark(),
            themeMode: currentMode,
            home:  const FirstScreen(),
          );
        });
  }  //MaterialApp
}  //ValueListenerBuilder

In the above piece of code :

The valueNotifier has the ThemeMode property with the variable name as ThemeNotifier which is set to the default light mode.

The ValueListenerBuilder also has the ThemeMode property with a ValueNotifier that listens specifically to the ThemeNotifier to check if the value of the ThemeNotifier has changed and then notifies the builder if the value has changed, to rebuild the widget

The ThemeMode is going to determine the mode of the application if the Theme(which includes the ThemeMode.system and the ThemeMode.light) and darkTheme are available.
I added a little tweak to our ThemeData to change the look from our conventional blue color to purple color. You can also play around with the colors and find the one that suits your mode.

firstscreen.dart file

We are going to create another file called firstscreen to show us how buttons reacts to the change in themes and the colors.

This is what the code for the first screen looks like:

import 'package:dark_theme/secondscreen.dart';
import 'package:flutter/material.dart';
import 'main.dart';



class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Theme app'),
        actions: [
          IconButton(
              icon: Icon(MyApp.themeNotifier.value == ThemeMode.light
                  ? Icons.dark_mode
                  : Icons.light_mode),
              onPressed: () {
                MyApp.themeNotifier.value =
                    MyApp.themeNotifier.value == ThemeMode.light
                        ? ThemeMode.dark
                        : ThemeMode.light;
              })
        ],
      ),
      body: Center(

      child: SizedBox(
        width: 300,
        height: 100,
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
             shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(15))
          ),
          child:  const Text('Go to second Screen',
          style: TextStyle(fontSize: 20),
          ),
          onPressed: () {
            Navigator.push(context,
                MaterialPageRoute(builder: (context) => const SecondScreen()));
          },
        ),
      ),


      ),
    );
  }
}

In all the chunks of code above, what we are going to look at is the iconButton material widget which houses our icons and our ternary operator.
Now in the iconButton widget, we are going to have a ternary operation that includes two icons, one for the darkTheme and one for the lightTheme which are icons.dark_mode and icons.light_mode respectively and in the ternary operation, we are going to say if the themeNotifier value is set to thememode.light then the icons.light_mode icon should be rendered on the UI of the application else render the icons.dark_mode icon.

Now after that has been done we go to the onPressed property where we have another tenary operation which simply says when the iconsButton is pressed if the themeNotifier value is equal to the themeMode.light change to themeMode.dark else change the theme to ThemeMode.light

OUTPUT

secondscreen.dart file

Let's create another file called Secondscreen to show how the text will react to the changes and a better view of the UI layout.

This is the code for the Second screen:

import 'package:flutter/material.dart';


class SecondScreen extends StatelessWidget {
  const SecondScreen ({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('second Screen'),
      ),
      body: const Center(
        child: Text(
          'Hello',
          style: TextStyle(fontSize: 50),
        ),
      ),
    );
  }
}

OUTPUT

Conclusion

congratulations we have gotten to the end of the article, we are going to do a little rundown on what we've discussed, we learned about value notifier and how it holds a single value, we talked about ValueLIstenableBuilder widget and how it listens to check if the value in the valueNotifier has changed and rebuilds the specific widget attached to it. we also saw how to use the valueNotifier and valueLIstenableBuilder in this application and that we could customize our themeData to fit our various applications if the given ones like the lightTheme does not suit us. Using the iconButton we were able to change the icons accordingly and we set what happens when the iconButton is pressed using a ternary operation.

Please do well to leave a comment and share this article to help others understand how to use the feature in their project, thanks.