Membuat Swipe Refresh atau Refresh Indicator di Flutter dan Data API

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara menambahkan refresh indicator pada daftar di flutter. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Swipe refresh, atau refresh indicator adalah salah satu widget yang disediakan oleh flutter untuk menyegarkan atau mereset halaman agar mendapatkan status yang baru. Status ini bisa berupa perubahan data. Cara memperbarui data dengan refresh indictor adalah dengan menarik ke bawah atau swipe ke bawah pada layar smartphone. 

Jadi pada tutorial kali ini, kita akan belajar cara membuat refresh indicator dan membuat list view data user yang berasal dari dummy.json/users. Silahkan scroll ke paling bawah artikel ini untuk melihat hasil akhirnya.

Baca Artikel Lain ✨

📰 1. Membuat Aplikasi Berita dari Blogger API di Flutter read more

📰 2. Menampilkan Video Youtube Populer di Aplikasi Flutter dengan Youtube API read more

📰 3.Membuat Aplikasi Berita dengan API Wordpress read more

📰 4. Menggunakan State Management Provider pada Aplikasi Todo List Flutter read more

Cara Membuat Swipe Refresh atau Refresh Indicator pada Flutter dan Data API

1. Buatlah sebuah project flutter baru dengan nama bebas. Gunakan flutter versi terbaru atau flutter versi null safety. Untuk flutter yang saya gunakan adalah flutter versi 2.10 dengan sdk: ">=2.16.2 <3.0.0"

2. Buka pubspec.yaml lalu tambahkan paket http: ikuti contohnya seperti gambar di bawah ini dan jangan lupa save file untuk mengunduh paket.

Mengunduh Paket

3. Buat sebuah file baru di dalam folder lib dengan nama api_service.dart ikuti scriptnya seperti script di bawah ini.

  import 'dart:convert';
  import 'package:http/http.dart' as http;
  
  class ApiService {
  
    Future<List<dynamic>> fetchNews() async {
      final response = await http.get(Uri.parse('https://dummyjson.com/users'));
      if (response.statusCode == 200) {
        final List<dynamic> jsonResponse = jsonDecode(response.body)['users'];

        return jsonResponse.toList();

      } else {

        throw Exception('Failed to load news');
      }
    }
  }

4. Buat sebuah file baru di dalam folder lib dengan nama list_users.dart ikuti scriptnya seperti di bawah ini.

import 'package:flutter/material.dart';
  import 'api_service.dart';
  
  class ListUsers extends StatefulWidget {
    const ListUsers({Key? key}) : super(key: key);
  
    @override
    State<ListUsers> createState() => _ListUsersState();
  }
  
  class _ListUsersState extends State<ListUsers> {
  
    Future<void> _refreshNews() async {
      setState(() {
        ApiService().fetchNews();
      });
    }
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Swipe Refresh'),
        ),
        body: Center(
          child: RefreshIndicator(
            onRefresh: _refreshNews,
            child: FutureBuilder<List<dynamic>>(
              future: ApiService().fetchNews(),
              builder: (_, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  // While data is being fetched, show a loading indicator
                  return CircularProgressIndicator();
                } else if (snapshot.hasError) {
                  // If there's an error in fetching data, show an error message
                  return Text('Error: ${snapshot.error}');
                } else if (snapshot.hasData) {
                  // If data is available, display it in a list
                  final newsList = snapshot.data!;
                  return ListView.builder(
                    padding: EdgeInsets.only(
                      top: 16,
                    ),
                    itemCount: newsList.length,
                    itemBuilder: (_, index) {
                      final news = newsList[index];
                      return ListTile(
                        contentPadding: EdgeInsets.only(
                          bottom: 10,
                        ),
                        title: Text(
                          news['firstName']+' '+news['lastName'],
                        ),
                        subtitle: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              'Phone Number: '+news['phone'],
                            ),
                            Text(
                              'Email Address: '+news['email'],
                            ),
                          ],
                        ),
                        leading: Image.network(
                          news['image'],
                          fit: BoxFit.cover,
                          width: 80,
                          height: 80,
                        ),
                      );
                    },
                  );
                } else {
                  // If no data is available, show a message
                  return Text('No data available');
                }
              },
            ),
          ),
        ),
      );
    }
  }

Penjelasan Script di atas:

1. _refreshNews() adalah metode yang akan dijalankan saat aplikasi di swipe ke bawah. Isinya simple yaitu mengambil ulang data API. Ini bisa kalian improvisasi dengan menambahkan proses lain.
2. child: RefreshIndicator( onRefresh: _refreshNews, ... ) ini adalah widget yang disediakan oleh flutter untuk merefresh halaman. Kita perlu mengisi metode apa yang akan dijalankan di dalam onRefresh:

5. Buka file lib/main.dart lalu ganti dengan script di bawah ini.

import 'package:flutter/material.dart';
  import 'list_users.dart';
  
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'WordPress News',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: ListUsers(),
        );
      }
    }

Sekarang kita bisa melakukan uji coba. Silahkan jalankan emulator. jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Mudah bukan?, sekarang kita sudah bisa menambahkan swipe refresh atau refresh indicator pada flutter dan menggabungkannya dengan data api. Sekarang kalian bisa melakukan improvisasi dengan menambahkan wigdet lain atau data api lain agar lebih powerful.

Sekian tutorial kita kali ini tentang cara membuat swipe refresh di flutter dengan data api. Semoga tulisan singkat ini bermanfaat. Jika ada pertanyaan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.