Menggunakan State Management Provider pada Aplikasi Todo List Flutter

Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar state management flutter dengan provider. Studi kasusnya adalah aplikasi todolist. Penasaran?, ayo ikuti tutorialnya berikut ini.

Provider adalah salah satu library state management yang sangat mudah untuk dipelajari. State management adalah cara untuk mengatur status dari setiap widget di dalam aplikasi. Jika menggunakan stateful maka semua widget akan diperbarui, tidak peduli apakah widget tersebut memiliki perubahan atau tidak. Sedangkan jika menggunakan state management, maka widget-widget tertentu saja yang statenya diperbarui. Dengan cara ini performa aplikasi jauh lebih baik.

Pada kesempatan kali ini kita akan membuat aplikasi todolist. Terdapat tombol tambah di bagian bawah lalu memunculkan dialog popup berisi form. Jika disimpan maka akan ditampilkan dalam bentuk list. Scroll ke bagian bawah layar untuk melihat hasilnya.

Baca Artikel Lain ✨

📰 1. Membuat Restful Api di Laravel Tanpa Library Tambahan Part 1 read more

📰 2. Menampilkan Data dengan API dan Token di Laravel Part 2 read more

📰 3. Cara Membuat Custom Registrasi dan Prosesnya di Laravel Part 1 read more

📰 4. Cara Membuat Custom Login di Laravel Part 2 read more

Menggunakan State Management Provider pada Aplikasi Todo List Flutter

1. Buatlah sebuah project flutter baru dengan nama yang kalian inginkan. Gunakan flutter versi terbaru atau flutter yang mendukung null safety.

2. Buka pubspec.yaml lalu tambahkan provider: di dalamnya. Lihat contoh di bawah ini.

Menambahkan Paket

3. Buat sebuah file baru di dalam folder lib dengan nama todo_model.dart. Ikuti script di bawah ini.

  import 'package:flutter/foundation.dart';

  class TodoModel extends ChangeNotifier {
    List<String> todos = []; // Membuat list todos sebagai sumber data
  
    // Metode untuk menambahkan todo baru
    void addTodo(String todo) {
      todos.add(todo);
      notifyListeners(); //Memberi tahu aplikasi bahwa terjadi perubahan
    }
  
    // Metode untuk menghapus todo
    void removeTodo(String todo) {
      todos.remove(todo);
      notifyListeners(); //Memberi tahu aplikasi bahwa terjadi perubahan
    }
  }

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

 
  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  
  import 'todo_model.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return ChangeNotifierProvider(
        create: (context) => TodoModel(),
        child: MaterialApp(
          title: 'My Todo App',
          home: TodoListScreen(),
        ),
      );
    }
  }
  
  class TodoListScreen extends StatelessWidget {
    final TextEditingController _todoController = TextEditingController(); // Membuat TextEditingController untuk mengelola input pengguna
  
    @override
    Widget build(BuildContext context) {
      final todoModel = Provider.of<TodoModel>(context); // Mengakses data model TodoModel dari Provider
  
      return Scaffold(
        appBar: AppBar(
          title: Text('Todo List'), // Menampilkan judul pada AppBar
        ),
        body: ListView.builder(
          itemCount: todoModel.todos.length, // Menghitung jumlah item dalam list todos
          itemBuilder: (context, index) {
            final todo = todoModel.todos[index]; // Mengambil todo berdasarkan indeks
            return ListTile(
              title: Text(todo), // Menampilkan teks todo sebagai judul ListTile
              trailing: IconButton(
                icon: Icon(Icons.delete), // Menampilkan ikon delete pada bagian trailing ListTile
                onPressed: () {
                  todoModel.removeTodo(todo); // Menghapus todo ketika tombol delete ditekan
                },
              ),
            );
          },
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            //menampilkan dialog popup
            showDialog(
              context: context,
              builder: (BuildContext context) {
                return AlertDialog(
                  title: Text('Add Todo'), // Menampilkan judul pada dialog AlertDialog
                  content: TextField(
                    controller: _todoController, // Menghubungkan TextEditingController dengan TextField
                    decoration: InputDecoration(labelText: 'Todo'), // Menampilkan label "Todo" pada TextField
                  ),
                  actions: [
                    TextButton(
                      child: Text('Cancel'), // Menampilkan teks "Cancel" pada tombol TextButton
                      onPressed: () {
                        Navigator.of(context).pop(); // Menutup dialog ketika tombol Cancel ditekan
                      },
                    ),
                    TextButton(
                      child: Text('Add'), // Menampilkan teks "Add" pada tombol TextButton
                      onPressed: () {
                        final newTodo = _todoController.text; // Mengambil nilai input pengguna dari TextEditingController
                        if (newTodo.isNotEmpty) {
                          todoModel.addTodo(newTodo); // Menambahkan todo baru ke dalam list todos jika input tidak kosong
                        }
                        _todoController.clear(); // Mengosongkan nilai input pada TextEditingController
                        Navigator.of(context).pop(); // Menutup dialog setelah menambahkan todo
                      },
                    ),
                  ],
                );
              },
            );
          },
          child: Icon(Icons.add), // Menampilkan ikon add pada tombol FloatingActionButton
        ),
      );
    }
  }

Semua step sudah kita kerjakan, Saatnya untuk melakukan uji coba. Silahkan jalankan emulator dan jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Mudah, bukan?. Sekarang kalian sudah bisa menggunakan provider untuk meningkatkan performa aplikasi. Saya juga membuat beberapa tutorial lain yang berkaitan dengan state management. Kalian bisa mengikutinya di link berikut ini.

Membuat State Management Flutter dengan Provider

State Management Flutter dengan GetX

Menggunakan State Management Flutter dengan GetX

Cara Menampilkan Data Api dan Filter Data dengan Getx Flutter

Sekian tutorial cara menggunakan state management provider pada aplikasi todo list flutter. Semoga tutorial singkat ini bermanfaat. Jika ada pertanyaan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.