State Management
Untuk Mengelola State atau Data Pada Aplikasi.
Requirements
Kita akan menggunakan Package “Provider” dapat di cek di https://pub.dev dan di kombinasikan dengan class “ChangeNotifier”
- Provider.
- Package untuk membantu mengelola state di flutter
- https://pub.dev/packages/provider
- ChangeNotifier
- Class yang disediakan oleh flutter,
- untuk mengikuti segala perubahan yang ada dan memberitahukan nya kepada yang “penggunanya”
- ChangeNotifierProvider
- Sama dengan ChangeNotifier, hanya saja lebih dikhususkan untuk package Provider
- Lebih baik dalam me-rebuild ulang dan mengelola widget saat tidak dibutuhkan lagi
Install Package
Bisa menggunakan CLI, jalankan perintah tersebut:
flutter pub add provider
atau
Bisa dengan mengedit file ini:
pubspec.yaml
name: belajar_state_managementdescription: A new Flutter project.# The following line prevents the package from being accidentally published to# pub.dev using `flutter pub publish`. This is preferred for private packages.publish_to: 'none' # Remove this line if you wish to publish to pub.dev# The following defines the version and build number for your application.# A version number is three numbers separated by dots, like 1.2.43# followed by an optional build number separated by a +.# Both the version and the builder number may be overridden in flutter# build by specifying --build-name and --build-number, respectively.# In Android, build-name is used as versionName while build-number used as versionCode.# Read more about Android versioning at https://developer.android.com/studio/publish/versioning# In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion.# Read more about iOS versioning at# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.htmlversion: 1.0.0+1environment: sdk: ">=2.17.0 <3.0.0"# Dependencies specify other packages that your package needs in order to work.# To automatically upgrade your package dependencies to the latest versions# consider running `flutter pub upgrade --major-versions`. Alternatively,# dependencies can be manually updated by changing the version numbers below to# the latest version available on pub.dev. To see which dependencies have newer# versions available, run `flutter pub outdated`.dependencies: flutter: sdk: flutter # The following adds the Cupertino Icons font to your application. # Use with the CupertinoIcons class for iOS style icons. cupertino_icons: ^1.0.2 # Tambahan provider: ^6.0.3dev_dependencies: flutter_test: sdk: flutter # The "flutter_lints" package below contains a set of recommended lints to # encourage good coding practices. The lint set provided by the package is # activated in the `analysis_options.yaml` file located at the root of your # package. See that file for information about deactivating specific lint # rules and activating additional ones. flutter_lints: ^2.0.0# For information on the generic Dart part of this file, see the# following page: https://dart.dev/tools/pub/pubspec# The following section is specific to Flutter packages.flutter: # The following line ensures that the Material Icons font is # included with your application, so that you can use the icons in # the material Icons class. uses-material-design: true # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg # An image asset can refer to one or more resolution-specific "variants", see # https://flutter.dev/assets-and-images/#resolution-aware # For details regarding adding assets from package dependencies, see # https://flutter.dev/assets-and-images/#from-packages # To add custom fonts to your application, add a fonts section here, # in this "flutter" section. Each entry in this list should have a # "family" key with the font family name, and a "fonts" key with a # list giving the asset and other descriptors for the font. For # example: # fonts: # - family: Schyler # fonts: # - asset: fonts/Schyler-Regular.ttf # - asset: fonts/Schyler-Italic.ttf # style: italic # - family: Trajan Pro # fonts: # - asset: fonts/TrajanPro.ttf # - asset: fonts/TrajanPro_Bold.ttf # weight: 700 # # For details regarding fonts from package dependencies, # see https://flutter.dev/custom-fonts/#from-packagesMenggunakan Provider
Pada tahapan ini kita akan belajar untuk membuat dan menggunakan provider untuk mengelola state
Create
Untuk Kerapihan, kita akan membuat struktut folder seperti ini:
Kita Perlu mendefinisikan dulu provider yang ingin kita gunakan:
lib/providers/kucing.dart
import 'package:flutter/material.dart';// Buat Class dengan Nama KucingProvider// Extends Class dari ChangeNotifierclass KucingProvider extends ChangeNotifier { // Buat Variable Dulu int jumlahKucing; // Buat Constructor Class nya // Berikan nilai default KucingProvider({ this.jumlahKucing = 0 }); // Buat Contoh Function void gantiJumlahKucing(int jumlahBaru) { // Set nilai pada variable jumlahKucing = jumlahBaru; // Beritahukan jika ada perubahan notifyListeners(); }}Activate
Untuk Kerapihan, kita akan membuat struktut folder seperti ini:
Konsep
- Menggunakan “MultiProvider”
- Gunakan sebelum MaterialApp dijalankan, untuk memastikan Provider telah tersedia sebelum MaterialApp.
- Bisa gunakan lebih dari 1 provider
- Ditandai dengan Array.
- Menggunakan “ChangeNotifierProvider”
Sebelumnya, kita buat dulu class atau widget untuk layar home:
lib/screens/home.dart
import 'package:flutter/material.dart';import 'package:flutter/src/foundation/key.dart';import 'package:flutter/src/widgets/framework.dart';class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); Widget build(BuildContext context) { // Disini akan kita tambahkan variable untuk menampung nilai dari variable return Scaffold( appBar: AppBar( title: const Text('Home Screen'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text('Jumlah Kucing'), // Disini akan kita tampilkan nanti data dari provider ... ], ) ), floatingActionButton: FloatingActionButton( onPressed: () { // Disini akan kita panggil function dari Provider ... }, tooltip: 'Tambah', child: const Icon(Icons.add), ), ); }}Kita bisa langsung aktifkan provider pada file utama kita:
lib/main.dart
import 'package:belajar_state_management/providers/kucing.dart';import 'package:belajar_state_management/screens/home.dart';import 'package:flutter/material.dart';import 'package:provider/provider.dart';void main() { runApp(const MyApp());}class MyApp extends StatelessWidget { const MyApp({Key? key}) : super(key: key); Widget build(BuildContext context) { return MultiProvider( providers: [ ChangeNotifierProvider( create: (context) => KucingProvider(), ) ], child: MaterialApp( title: 'Belajar Provider', theme: ThemeData( primarySwatch: Colors.blue ), initialRoute: '/', routes: { '/':(context) => const Home() }, ), ); }}Use
Kita langsung dapat menggunakan provider yang telah kita buat sebelumnya:
lib/screens/home.dart
import 'package:belajar_state_management/providers/kucing.dart';import 'package:flutter/material.dart';import 'package:provider/provider.dart';class Home extends StatelessWidget { const Home({Key? key}) : super(key: key); Widget build(BuildContext context) { int jumlah_kucing = Provider.of<KucingProvider>(context).jumlahKucing; return Scaffold( appBar: AppBar( title: const Text('Home Screen'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ const Text('Jumlah Kucing'), Text( '$jumlah_kucing', style: const TextStyle( fontWeight: FontWeight.bold, fontSize: 20 ), ) ], ) ), floatingActionButton: FloatingActionButton( onPressed: () { Provider.of<KucingProvider>(context, listen: false) .gantiJumlahKucing(jumlah_kucing + 1); }, tooltip: 'Tambah', child: const Icon(Icons.add), ), ); }}Hasil
Berikut Hasil dari Penggunaan Provider
Kita bisa mengelola state dari widget yang berbeda.
