How to Create a Loading Skeleton when Displaying Data from an API

Hello everyone, welcome back again at porkaone. On this occasion we will learn how to create a loading skeleton while waiting for data to be displayed from the API in Flutter. Are you curious? Let's follow the tutorial below?

Read Another Article ✨

📰 1. How to Display a Website in Flutter with Webview  read more

📰 2. How to Make a Bubble Bottom Bar in Flutter read more

📰 3. How to Install Java Development Kit and Add Variable Path to ENV read more

📰 4. How to Make Copy Feature in Flutter Apps read more

How to Create a Loading Skeleton when Displaying Data from an API

1. Create a new flutter project with the name you want. Use the latest version of Flutter or use a version that supports null safety.

2. Open the pubspec.yaml file then add the http: package as shown below.

Add Package

3. Create a new file with the name skeleton_loading_widget.dart in the lib folder. The skeleton display will later follow the card display.

  import 'package:flutter/material.dart';

  class CardSkeletonLoading extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Card(
        child: ListTile(
          leading: Container(
            width: 80,
            height: 80,
            color: Colors.grey[300],
          ),
          title: Container(
            height: 16,
            width: double.infinity,
            color: Colors.grey[300],
          ),
          subtitle: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              SizedBox(height: 5),
              Container(
                height: 16,
                width: 150,
                color: Colors.grey[300],
              ),
              SizedBox(height: 5),
              Container(
                height: 16,
                width: 100,
                color: Colors.grey[300],
              ),
              SizedBox(height: 5),
            ],
          ),
        ),
      );
    }
  }

Explanation of the script above:

1. Import Statement: In this section, we import the required Flutter library, namely 'package:flutter/material.dart'. This library provides components and widgets for building user interfaces using Material Design.
2. SkeletonLoadingWidget Class: This is a Flutter class defined with the name “SkeletonLoadingWidget”. This class is an instance of StatelessWidget, which means that this widget has no state and does not change throughout its life cycle.
3. build() Method: This method is part of the SkeletonLoadingWidget class and is used to build the widget hierarchy that forms the appearance of this widget. This method should return a Widget.
4. Card Widget: Card Widget is used to create content in card form, such as in Material Design. This card will contain a loading skeleton.
5. ListTile Widget: The ListTile widget is used to create content in list form with leading, title, and subtitle. Here, the card content will contain the ListTile widget.
6. leading Container: This container is used to display a gray box placeholder as the leading (image or icon on the left) in the ListTile. This box has a width and height of 80.
7. title Container: This container is used to display a gray box placeholder as the title in the ListTile. This box has a height of 16 and a width that fills the entire width of the ListTile.
8. Column subtitle: Column Widget is used to arrange widgets in column form. Here, the card content will contain a subtitle column containing several Containers as placeholders for the text.
9. Container: This container is used to display gray box placeholders as subtitles in a ListTile. These boxes are 16 in height and vary in width.

4. Open lib/main.dart then replace it with the script below.

  import 'dart:convert';

  import 'package:flutter/material.dart';
  import 'package:http/http.dart' as http;
  
  import 'skeleton_loading_widget.dart';
  
  void main() {
    runApp(UserListPage());
  }
  
  class UserListPage extends StatelessWidget {
    Future<List<dynamic>> fetchUsers() async {
      final response = await http.get(Uri.parse(
          'https://dummyjson.com/users')); // get data from dummy.json
  
      if (response.statusCode == 200) {
        final jsonData = jsonDecode(response.body);
        return jsonData['users'];
      } else {
        throw Exception('Failed to load users');
      }
    }
  
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: Text('User List'),
          ),
          body: FutureBuilder<List<dynamic>>(
            future: fetchUsers(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                final users = snapshot.data;
                return ListView.builder(
                  itemCount: users?.length,
                  itemBuilder: (context, index) {
                    final user = users![index];
                    return Card(
                      child: ListTile(
                        leading: Image.network(
                          user['image'], 
                          fit: BoxFit.cover, 
                          width: 80, 
                          height: 80,
                        ),
                        title: Text(
                          user['firstName'],
                          style: TextStyle(fontWeight: FontWeight.w500),
                        ),
                        subtitle: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            SizedBox(height: 5),
                            Text(user['email']),
                            Text(user['phone']),
                            SizedBox(height: 5),
                          ],
                        ),
                      ),
                    );
                  },
                );
              } else if (snapshot.hasError) {
                return Text('Error: ${snapshot.error}');
              } else {
                return ListView.builder(
                  itemCount: 10, // The number of loading skeletons you want to display
                  itemBuilder: (context, index) {
                    return SkeletonLoadingWidget();
                  },
                );
              }
            },
          ),
        ),
      );
    }
  }

Ok, we have done all the steps. It's time for us to do a test. Please run the emulator and if successful, the display will look like the image below.

    

OK, that's the tutorial on how to create a loading skeleton when displaying data from the API in Flutter. Hopefully this short tutorial is useful. If you have any questions, please ask directly in the comments column below. That's all and receive a salary.