Halo semuanya, kembali lagi di sahretech. Pada kesempatan kali ini kita akan belajar cara mebuat aplikasi flutter dengan state management provider. Ayo ikuti tutorialnya di bawah ini.

Provider adalah salah satu paket atau library flutter yang cukup terkenal dan mudah digunakan. Provider sangat cocok untuk kalian yang baru belajar state management pada flutter. Sedikit informasi, salah satu manfaat state management adalah untuk peningkatan performa aplikasi. State management lebih efisien dari stateful, karena state management hanya merubah state widget-widget tertentu saja dan tidak semuanya.

Pada kesempatan kali ini kita akan belajar cara menggunakan state maangement dalam aplikasi counter. Aplikasi counter adalah aplikasi yang pertama kali dibuat saat kalian membuat project flutter. Kita akan modifikasi agar menggunakan state management. Scroll ke bagian bawah artikel ini untuk melihat hasil akhirnya.

Saya juga membuat beberapa tutorial state management dengan menggunakan getx. Berikut ini linknya jika kalian tertarik mempelajari state management dengan getx.

Cara Menampilkan Data Api dan Filter Data dengan Getx Flutter

State Management Flutter dengan GetX

Menggunakan State Management Flutter dengan GetX

Membuat State Management Flutter dengan Provider

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

2. Buka pubspec.yaml lalu tambahkan provider: lalu save file untuk mengunduh paket. Ikuti gambarbya seperti di bawah ini.

Menambahkan package

3. Buat file counter_controller.dart di dalam folder lib. File ini kita gunakan sebagai controller data angkanya.

import 'package:flutter/foundation.dart';

  class CounterController with ChangeNotifier{
  
    int count = 0;
  
    void increment(){
  
      count++;
      notifyListeners();
      
    }
  
  }

Penjelasan Script di atas

1. Import Package: Pada bagian ini, kita mengimpor package flutter/foundation.dart yang berisi kelas ChangeNotifier. Package ini diperlukan untuk menggunakan state management dengan provider.
2. Class CounterController: CounterController adalah sebuah class yang mengimplementasikan state management menggunakan provider. Class ini menggunakan mixin ChangeNotifier, yang memungkinkan class tersebut mengirim notifikasi kepada widget-widget yang menggunakan state tersebut tentang adanya perubahan state.
3. Method increment() bertugas untuk menambah nilai count dan kemudian memanggil notifyListeners(). Method ini akan dipanggil ketika kita ingin menambah nilai counter. Pada bagian ini, count akan ditambahkan dengan 1, dan kemudian notifyListeners() akan dipanggil untuk memberitahu widget-widget yang menggunakan state ini bahwa terjadi perubahan pada state. Hal ini akan memicu pembaruan tampilan widget yang menggunakan state tersebut.

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

  import 'package:flutter/material.dart';
  import 'package:provider/provider.dart';
  import 'counter_controller.dart';
  
  void main() {
    runApp(MyApp());
  }
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return ChangeNotifierProvider(
        create: (context) => CounterController(),
        child: MaterialApp(
          title: 'Counter App',
          home: CounterScreen(),
        ),
      );
    }
  }
  
  class CounterScreen extends StatelessWidget {
    const CounterScreen({super.key});
  
    @override
    Widget build(BuildContext context) {
      final counterController = Provider.of<CounterController>(context);
  
      return Scaffold(
        appBar: AppBar(
          title: Text('Counter App'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Count:',
                style: TextStyle(fontSize: 20),
              ),
              Text(
                '${counterController.count}',
                style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            counterController.increment();
          },
          child: Icon(Icons.add),
        ),
      );
    }
  }
  

Penjelasan Script di atas

1. Dengan menggunakan ChangeNotifierProvider, kita dapat dengan mudah mengakses dan mengelola state di berbagai widget yang berada di bawahnya.
2. Fungsi final counterController = Provider.of<CounterController>(context); digunakan untuk mengakses instance dari CounterController yang disediakan oleh ChangeNotifierProvider di dalam widget Flutter.

5. Ok, sekarang kita bisa melakukan uji coba. Silahkan jalankan emulator kalian. Jika berhasil maka tampilannya akan tampak seperti gambar di bawah ini.

Mudah, bukan?. Karena kita sudah menggunakan state management maka kita tidak perlu menggunakan stateful lagi. Kalian bisa melakukan improvisasi dengan membuat aplikasi flutter yang lebih kompleks lagi dengan provider.

Ok, sekian tutorial membuat state management flutter dengan provider. Semoga tutorial singkat ini bermanfaat. Jika ada yang ingin ditanyakan, silahkan tanya langsung di kolom komentar di bawah ini. Sekian dan terima gaji.