Use Online JSON in Flutter

Create Free Backend With Appwrite

Introduction

In this section, you will learn how to use online JSON in your flutter application with the help of real-world example. Before we start, make sure you have basic knowledge of JSON. If you don’t know start from here.

Example 1: Profile App

In this example, you will learn to create a profile app using online JSON. Here are the steps to create a app:

Step 1: Install http Package

To use online JSON in your app, the first step is to add the http package in your project. Open terminal at your project folder and execute the following command:

flutter pub add http

Step 2: Import the http Package

Now, you need to import the http package in your flutter application. To import the http package, open your main.dart file and add the following import statement:

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

Step 3: Create Model Class

Now, you need to create a model class for the JSON data. Create a new file called person.dart inside lib folder and add the following code in it:

class Person {
  final String name;
  final String address;
  final int age;
  final String image;
  final String description;

// Constructor
    Person(
        {required this.name,
        required this.address,
        required this.age,
        required this.image,
        required this.description});

// Convert JSON to Person Object
    factory Person.fromJson(Map<String, dynamic> json) {
        return Person(
        name: json['name'],
        address: json['address'],
        age: json['age'],
        image: json['image'],
        description: json['description'],
        );
    }
}

Step 4: Load and Decode the JSON File

Now create a new file called onlineservice.dart inside lib folder and add the following code in it:

import 'dart:convert';
import 'person.dart';

class OnlineService {
    // Load and decode the JSON File
    Future<Person> loadPerson() async {
        final response = await http.get(Uri.parse('https://jsonguide.technologychannel.org/info.json'));
        if (response.statusCode == 200) {
            // json.decode() is used to convert JSON String to JSON Map
            final jsonResponse = json.decode(response.body);
            return Person.fromJson(jsonResponse);
        } else {
            throw Exception('Failed to load data from server');
        }
    }
}

Step 5: Display the JSON Data

Now, you can use the OnlineService class to display the JSON data. Here is how you can use it on your main.dart file:

import 'package:flutter/material.dart';
import 'onlineservice.dart';
import 'person.dart';

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

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

  @override
  Widget build(BuildContext context) {
    const appTitle = 'JSON in Flutter';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(
          title: const Text(appTitle),
        ),
        body: FutureBuilder(
          future: OnlineService().loadPerson(),
          builder: (context, snapshot) {
            if (snapshot.hasData) {
              Person person = snapshot.data as Person;
              return Center(
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Card(
                    elevation: 4.0,
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          CircleAvatar(
                            backgroundImage: NetworkImage(person.image),
                            radius: 50.0,
                          ),
                          const SizedBox(height: 10),
                          Text(
                            person.name,
                            style: const TextStyle(
                              fontSize: 24,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                          const SizedBox(height: 5),
                          Text(
                            person.address,
                            style: TextStyle(
                              fontSize: 16,
                              color: Colors.grey[600],
                            ),
                          ),
                          const SizedBox(height: 5),
                          Text(
                            'Age: ${person.age}',
                            style: TextStyle(
                              fontSize: 16,
                              color: Colors.grey[800],
                            ),
                          ),
                          const SizedBox(height: 10),
                          Text(
                            person.description,
                            textAlign: TextAlign.center,
                            style: const TextStyle(
                              fontSize: 16,
                              fontStyle: FontStyle.italic,
                            ),
                          ),
                        ],
                      ),
                    ),
                  ),
                ),
              );
            } else {
              return const Center(child: CircularProgressIndicator());
            }
          },
        ),
      ),
    );
  }
}

Run Online

Challenge

Create quote app using online JSON. Use this JSON file to display the quotes.