Tutorial Cara Membuat Swipe Action pada List di Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara membuat swipe action pada list di flutter atau saat menggeser baris ke kiri menampilkan action. Penasaran?, ayo ikuti tutorialnya di bawah ini.

Swipe Action?

Swipe Action atau Swipe Gesture adalah tindakan user menggeser ke kanan atau ke kiri pada elemen seperti card atau list untuk mengaktifkan aksi tertentu. Biasanya fungsi ini digunakan untuk menghapus data tertentu, menandainya sebagai data favorit atau aksi-aksi lainnya.

Pada tutorial kita kali ini, kita akan membuat sebuah aplikasi sederhana. Dimana aplikasi ini akan menampilkan list data user. jika digeser ke kiri maka data user akan hilang. Silahkan scroll ke bagian 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 Action dengan Dismissible di Flutter

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

Versi Flutter yang Saya Gunakan

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

  import 'package:flutter/material.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(),
      );
    }
  }
  
  class ListUsers extends StatefulWidget {
    const ListUsers({Key? key}) : super(key: key);
  
    @override
    State<ListUsers> createState() => _ListUsersState();
  }
  
  class _ListUsersState extends State<ListUsers> {
    //membuat list data user
    List<Map<String, dynamic>> userList = [
      {
        'id': '1',
        'name': 'Terry Medhurst',
        'email': 'terry@sohu.com',
        'image': 'https://robohash.org/hicveldicta.png',
      },
      {
        'id': '2',
        'name': 'Sheldon Quigley',
        'email': 'sheldon@sohu.com',
        'image': 'https://robohash.org/doloremquesintcorrupti.png',
      },
      {
        'id': '3',
        'name': 'Terrill Hills',
        'email': 'terrill@sohu.com',
        'image': 'https://robohash.org/consequunturautconsequatur.png',
      },
    ];
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Flutter Swipe Action'),
        ),
        body: ListView.builder(
          itemCount: userList.length,
          itemBuilder: (_, index) {
            final user = userList[index];
            final userId = user['id'];
            return Dismissible(
              key: Key(userId),
              background: Container(
                color: Colors.red,
                alignment: Alignment.centerRight,
                padding: EdgeInsets.symmetric(horizontal: 16.0),
                child: Icon(
                  Icons.delete,
                  color: Colors.white,
                ),
              ),
              onDismissed: (direction) {
                setState(() {
                  userList.removeAt(index);
                });
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('User $userId dismissed')),
                );
              },
              child: ListTile(
                contentPadding: EdgeInsets.only(
                  bottom: 10,
                ),
                title: Text(user['name']),
                subtitle: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('Email Address: ' + user['email']),
                  ],
                ),
                leading: Image.network(
                  user['image'],
                  fit: BoxFit.cover,
                  width: 80,
                  height: 80,
                ),
              ),
            );
          },
        ),
      );
    }
  }

Penjelasan Script di atas:

1. import 'package:flutter/material.dart';: Mengimpor package flutter/material.dart yang diperlukan untuk membangun aplikasi Flutter dengan menggunakan Material Design.
2. void main(): Fungsi utama aplikasi Flutter.
3. runApp(MyApp());: Memulai aplikasi dengan menjalankan widget MyApp() sebagai root widget.
4. class MyApp extends StatelessWidget {: Mendefinisikan kelas MyApp sebagai turunan dari StatelessWidget.
5. @override: Anotasi yang menandakan bahwa metode berikutnya adalah penggantian (override) metode dari superclass.
6. Widget build(BuildContext context) {: Metode build yang menggambarkan tampilan widget MyApp.
7. return MaterialApp(...): Mengembalikan widget MaterialApp, yang merupakan root widget aplikasi dengan konfigurasi dan tema yang ditentukan.
8. title: 'WordPress News',: Judul aplikasi.
9. theme: ThemeData(...),: Tema aplikasi yang menggunakan primarySwatch warna biru.
10. home: ListUsers(),: Menetapkan ListUsers sebagai halaman beranda (home) aplikasi.
11. class ListUsers extends StatefulWidget {: Mendefinisikan kelas ListUsers sebagai turunan dari StatefulWidget.
12. const ListUsers({Key? key}) : super(key: key);: Konstruktor untuk kelas ListUsers, menerima kunci (key) opsional.
13. @override: Anotasi yang menandakan bahwa metode berikutnya adalah penggantian (override) metode dari superclass.
14. State<ListUsers> createState() => _ListUsersState();: Mengganti metode createState yang mengembalikan instance dari _ListUsersState, yaitu state untuk widget ListUsers.
15. class _ListUsersState extends State<ListUsers> {: Mendefinisikan kelas _ListUsersState sebagai turunan dari State yang memegang state untuk widget ListUsers.
16. List<Map<String, dynamic>> userList = [...];: Mendefinisikan list userList yang berisi beberapa map data pengguna.
17. @override: Anotasi yang menandakan bahwa metode berikutnya adalah penggantian (override) metode dari superclass.
18. Widget build(BuildContext context) {: Metode build yang menggambarkan tampilan widget _ListUsersState.
19. return Scaffold(...): Mengembalikan widget Scaffold yang menyediakan kerangka dasar untuk halaman aplikasi.
20. appBar: AppBar(...): Menetapkan widget AppBar sebagai app bar di atas halaman.
21. body: ListView.builder(...): Menetapkan widget ListView.builder sebagai isi halaman untuk menampilkan daftar item pengguna.
22. final user = userList[index];: Mengambil data pengguna pada indeks tertentu dari userList.
23. final userId = user['id'];: Mengambil nilai 'id' dari data pengguna saat ini.
24. return Dismissible(...): Mengembalikan widget Dismissible yang mengimplementasikan swipe action pada elemen daftar pengguna.
25. background: Container(...): Menetapkan tampilan latar belakang saat elemen digeser ke arah kanan.
26. onDismissed: (direction) {...},: Menentukan aksi yang dilakukan ketika elemen digeser dan dilepaskan.
27. child: ListTile(...): Menampilkan widget ListTile yang menampilkan informasi pengguna seperti nama, email, dan gambar profil.
28. leading: Image.network(...): Menampilkan gambar profil pengguna sebagai leading widget dalam ListTile.

3. Jalankan aplikasi, jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Mudah bukan?, kalian sekarang bisa membuat swipe action di flutter dengan mudah dan cepat. Kalian juga dapat melakukan improvisasi dengan menambahkan aksi lainnya. Memberikan aksi ke data api, menggabungkannya dengan swipe refresh atau refresh indicator dan lain sebagainya.

Sekian tutorial singkat kita hari ini tentang cara membuat swipe action pada list di flutter. Semoga tutorlal singkat ini bermanfaat. Jika ada yang ingin ditanyakan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.