**Course Title:** Flutter Development: Build Beautiful Mobile Apps **Section Title:** Working with APIs and Data Persistence **Topic:** Build a Flutter app that fetches data from a public API and displays it in a list.(Lab topic) **Objective:** In this lab topic, you will learn how to build a Flutter app that fetches data from a public API and displays it in a list. You will understand how to make HTTP requests, parse JSON data, and handle network connectivity. **Prerequisites:** - Completion of the previous lab topics: Introduction to Flutter and Development Environment, Introduction to Dart programming language, Creating your first Flutter application, Understanding Flutter widgets: Stateless and Stateful widgets, Using layout widgets: Column, Row, Stack, and Container, Creating responsive layouts for different screen sizes, Best practices for widget composition, Introduction to state management concepts, Exploring different state management solutions: setState, Provider, and Riverpod, Implementing local state management with Provider, Managing global state in Flutter applications, Making HTTP requests and consuming RESTful APIs, Parsing JSON data and displaying it in Flutter apps, Introduction to local storage: Shared Preferences and SQLite, Handling network connectivity and data persistence. **Step 1: Choose a Public API** Select a public API that provides data relevant to your app's purpose. Some popular options include: - [JSONPlaceholder](https://jsonplaceholder.typicode.com/) - [OpenWeatherMap](https://openweathermap.org/api) - [GitHub API](https://docs.github.com/en/rest/reference/repos) **Step 2: Make an HTTP Request** Use the `http` package to make an HTTP request to the API endpoint. You can install the package using the following command: ```bash flutter pub add http ``` Create a new file called `api.dart` and add the following code: ```dart import 'package:http/http.dart' as http; class Api { static const String _baseUrl = 'https://jsonplaceholder.typicode.com/'; static Future<List<dynamic>> getPosts() async { final response = await http.get(Uri.parse('$_baseUrl/posts')); if (response.statusCode == 200) { return jsonDecode(response.body); } else { throw Exception('Failed to load posts'); } } } ``` **Step 3: Parse JSON Data** Use the `json` package to parse the JSON data. You can install the package using the following command: ```bash flutter pub add json ``` Create a new file called `post.dart` and add the following code: ```dart import 'dart:convert'; class Post { final int userId; final int id; final String title; final String body; Post({this.userId, this.id, this.title, this.body}); factory Post.fromJson(Map<String, dynamic> json) { return Post( userId: json['userId'], id: json['id'], title: json['title'], body: json['body'], ); } } ``` **Step 4: Display Data in a List** Create a new file called `main.dart` and add the following code: ```dart import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:your_app/api.dart'; import 'package:your_app/post.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePageState createState() => _MyHomePageState(); } class _MyHomePageState extends State<MyHomePage> { List<Post> _posts = []; Future<void> _loadPosts() async { final posts = await Api.getPosts(); setState(() { _posts = posts.map((post) => Post.fromJson(post)).toList(); }); } @override void initState() { super.initState(); _loadPosts(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Flutter Demo'), ), body: ListView.builder( itemCount: _posts.length, itemBuilder: (context, index) { return ListTile( title: Text(_posts[index].title), subtitle: Text(_posts[index].body), ); }, ), ); } } ``` **Step 5: Handle Network Connectivity** Use the `connectivity` package to check the network connectivity. You can install the package using the following command: ```bash flutter pub add connectivity ``` Create a new file called `network.dart` and add the following code: ```dart import 'package:flutter/services.dart'; class Network { static Future<bool> checkConnectivity() async { final connectivityResult = await Connectivity().checkConnectivity(); if (connectivityResult == ConnectivityResult.mobile || connectivityResult == ConnectivityResult.wifi) { return true; } else { return false; } } } ``` **Practical Takeaways:** * Use the `http` package to make HTTP requests to public APIs. * Use the `json` package to parse JSON data. * Use the `connectivity` package to check network connectivity. * Handle errors and exceptions when making HTTP requests. * Use a state management solution to manage global state in Flutter applications. **Leave a comment or ask for help if you have any questions or need further clarification on any of the steps.**