State Management in Flutter is an important topic not to be overlooked. Obviously, you can't just use set state(); throughout a project consisting of 3000 lines of code over 20 different files! There are many approaches in Flutter that you can use for managing your state and for dependency injection.
Some of the Darttastical State Management Approaches are:
- BLoC
- Riverpod
- GetX And many more...
Note: I am not including Provider as Riverpod is a better version of Provider itself.
So Now let's understand Riverpod.
As I mentioned before, Riverpod is an improved version of Providers and hence, Providers play an important role in Riverpod.
What are Providers tho...
final thisIsProvider = Provider((ref) {
return MyValue();
});
The final thisIsProvider is the declaration of the variable. The Provider(); comes from Riverpod Class. MyValue() refers to object that our Provider is returning. It could be a string, int, or any other data type.
To understand more vividly using real code examples let's learn to import riverpod.
Installing Riverpod
There are 3 types of riverpod
-
riverpodto be used only with Dart -
flutter_riverpodwhen we use Flutter and riverpod -
riverpod_hookswhen we useflutter_hooksin our flutter Project.
For this blog, we will use flutter_riverpod
In pubspec.yaml Under dependencies add flutter_riverpod
dependencies:
flutter_riverpod:
Wrap the root of your widget tree (MyApp() Class) with ProviderScope()
void main() {
runApp(
//Right Here👇
ProviderScope(
child: MyApp(),
),
);
}
And don't forget to import riverpod in your .dart files
import 'package:flutter_riverpod/flutter_riverpod.dart';
Let's play with riverpod now
Ok...so after all this, let's actually use the riverpod with a basic Provider().
Copy the following code
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
runApp(
//Don't forget to wrap MyApp() with ProviderScope()
const ProviderScope(child: MyApp()),
);
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
class Home extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Riverpod')),
body: Center(
child:
return Text('Riverpod says Hello');
),
);
}
}
The code is self-explanatory to any flutter developer with basic knowledge of flutter with changes that we discussed before while installing riverpod. Now we will use riverpod's Provider to display the text in the Text() in the Center() of the Scaffold()
- Change
StatelessWidget()toConsumerWidget()
class Home extends ConsumerWidget {
...
}
- Pass another object named
WidgetRef refinbuild()method ofConsumerWidget()
class Home extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
...
}
- Now let's create a
Provider()the most basic of all.
void main() {
runApp(
//Don't forget to wrap MyApp() with ProviderScope()
const ProviderScope(child: MyApp()),
);
}
//Right Here😉
final helloTextProvider = Provider((ref) {
return "Hello Riverpod";
});
class Home extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
...
}
- Let's
watch()ourhelloTextProvider()
class Home extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(title: const Text('Riverpod')),
body: Center(
child:
//Over here Brother and Sisters😊,
return Text(ref.watch(helloTextProvider()));
),
);
}
}
The Final Code
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
runApp(
//Don't forget to wrap MyApp() with ProviderScope()
const ProviderScope(child: MyApp()),
);
}
//Right Here😉
final helloTextProvider = Provider((ref) {
return "Hello Riverpod";
});
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(home: Home());
}
}
class Home extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
return Scaffold(
appBar: AppBar(title: const Text('Riverpod')),
body: Center(
child:
//Over here Brother and Sisters😊,
return Text(ref.watch(helloTextProvider()));
),
);
}
}
And Congrats🎉🎉, you made your first Riverpod App(if it runs successfulllyðŸ¤ðŸ˜‰) .
In my next blog, we will learn to use StateProvider() where you will actually get to know the advantages of flutter_riverpod.
Till that Oh Boy! you all need to wait!
Originally published on Hashnode on 29th December 2020
Top comments (0)