Fetching and Displaying a Single User's Data from an API in Flutter

{
"id": 1,
"name": "Leanne Graham",
"username": "Bret",
"email": "Sincere@april.biz",
"address": {
"street": "Kulas Light",
"suite": "Apt. 556",
"city": "Gwenborough",
"zipcode": "92998-3874",
"geo": {
"lat": "-37.3159",
"lng": "81.1496"
}
},
"phone": "1-770-736-8031 x56442",
"website": "hildegard.org",
"company": {
"name": "Romaguera-Crona",
"catchPhrase": "Multi-layered client-server neural-net",
"bs": "harness real-time e-markets"
}

} 

Introduction

Fetching data from an API and displaying it in a mobile app is a common requirement for many applications. In this tutorial, we will walk you through the steps to fetch data from an API and display a single user's data in a Flutter application.

Create Dart classes to represent the user and its nested structures.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({super.key});

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  User? _user;
  bool _isLoading = true;
  String? _error;

  @override
  void initState() {
    super.initState();
    _fetchData();
  }


  Future<User> fetchUser() async {
    final url = "https://jsonplaceholder.typicode.com/users/1"; // Replace with your actual URL
    try {
      final response = await http.get(Uri.parse(url));
      if (response.statusCode == 200) {
        return User.fromJson(jsonDecode(response.body));
      } else {
        throw Exception('Failed to load user');
      }
    } catch (error) {
      rethrow;
    }
  }


  Future<void> _fetchData() async {
    try {
      User user = await fetchUser();
      setState(() {
        _user = user;
        _isLoading = false;
      });
    } catch (error) {
      setState(() {
        _isLoading = false;
        _error = error.toString();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User Data'),
      ),
      body: _isLoading
          ? Center(child: CircularProgressIndicator())
          : _error != null
          ? Center(child: Text('Error: $_error'))
          : _user != null
          ? Padding(
        padding: EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('Name: ${_user!.name}', style: TextStyle(fontSize: 18)),
            Text('Username: ${_user!.username}', style: TextStyle(fontSize: 18)),
            Text('Email: ${_user!.email}', style: TextStyle(fontSize: 18)),
            Text('Phone: ${_user!.phone}', style: TextStyle(fontSize: 18)),
            Text('Website: ${_user!.website}', style: TextStyle(fontSize: 18)),
            SizedBox(height: 16),
            Text('Address:', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            Text('${_user!.address.street}, ${_user!.address.suite}', style: TextStyle(fontSize: 18)),
            Text('${_user!.address.city}, ${_user!.address.zipcode}', style: TextStyle(fontSize: 18)),
            Text('Geo: ${_user!.address.geo.lat}, ${_user!.address.geo.lng}', style: TextStyle(fontSize: 18)),
            SizedBox(height: 16),
            Text('Company:', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            Text(_user!.company.name, style: TextStyle(fontSize: 18)),
            Text(_user!.company.catchPhrase, style: TextStyle(fontSize: 18)),
            Text(_user!.company.bs, style: TextStyle(fontSize: 18)),
          ],
        ),
      )
          : Center(child: Text('No user found')),
    );
  }
}

class Geo {
  final String lat;
  final String lng;

  Geo({required this.lat, required this.lng});

  factory Geo.fromJson(Map<String, dynamic> json) {
    return Geo(
      lat: json['lat'],
      lng: json['lng'],
    );
  }
}

class Address {
  final String street;
  final String suite;
  final String city;
  final String zipcode;
  final Geo geo;

  Address({
    required this.street,
    required this.suite,
    required this.city,
    required this.zipcode,
    required this.geo,
  });

  factory Address.fromJson(Map<String, dynamic> json) {
    return Address(
      street: json['street'],
      suite: json['suite'],
      city: json['city'],
      zipcode: json['zipcode'],
      geo: Geo.fromJson(json['geo']),
    );
  }
}

class Company {
  final String name;
  final String catchPhrase;
  final String bs;

  Company({
    required this.name,
    required this.catchPhrase,
    required this.bs,
  });

  factory Company.fromJson(Map<String, dynamic> json) {
    return Company(
      name: json['name'],
      catchPhrase: json['catchPhrase'],
      bs: json['bs'],
    );
  }
}

class User {
  final int id;
  final String name;
  final String username;
  final String email;
  final Address address;
  final String phone;
  final String website;
  final Company company;

  User({
    required this.id,
    required this.name,
    required this.username,
    required this.email,
    required this.address,
    required this.phone,
    required this.website,
    required this.company,
  });

  factory User.fromJson(Map<String, dynamic> json) {
    return User(
      id: json['id'],
      name: json['name'],
      username: json['username'],
      email: json['email'],
      address: Address.fromJson(json['address']),
      phone: json['phone'],
      website: json['website'],
      company: Company.fromJson(json['company']),
    );
  }
}