Flutter Riverpod :
In this part of the tutorial we will be covering riverpod implementation in flutter app.We will be going through the easiest way to implement state management in flutter.
Flutter Riverpod is a state management library for Flutter, which is designed to simplify the way developers handle state in their apps. It’s an alternative to the popular Flutter provider package, and it offers a more modern, flexible, and intuitive API.
The key concept in Riverpod is the provider, which is a class that exposes some value or functionality to other parts of the app. Providers can be declared as either “read-only” or “read-write”, depending on whether they allow modifications to the value they contain.
Riverpod uses a dependency injection approach, which means that providers can be easily injected into widgets, making it easy to access state from anywhere in the app. Providers can also be scoped to certain parts of the app, so that they only exist within a certain subtree of the widget tree.
One of the benefits of flutter riverpod architecture is that it allows developers to write testable code. Because providers are declared separately from the widgets that use them, it’s easy to test the logic of the app independently of the UI.
Overall, Riverpod is a powerful and flexible state management library that can make it easier to write complex Flutter apps. However, it does have a bit of a learning curve, and some developers may prefer the simplicity of the provider package.
Flutter Riverpod Video Tutorial :
Go through the below tutorial for more detailed updates on riverpod implementation.
pubspec.yaml :
Add the required flutter riverpod with the latest version.
dependencies:
flutter:
sdk: flutter
flutter_riverpod: ^2.3.4
main.dart :
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter/material.dart';
void main(){runApp(ProviderScope(child: MyApp()));}
final dataProvider = StateNotifierProvider<DataStateNotifier, String>((ref) { return DataStateNotifier(); });
class DataStateNotifier extends StateNotifier<String>{
DataStateNotifier(): super('AmplifyAbhi');
void dataMessage(String data){
state = data;
}
}
class MyApp extends ConsumerWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context, WidgetRef ref) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text("Riverpod"),),
body: Padding(
padding: const EdgeInsets.all(24.0),
child: Column(
children: [
const SizedBox(height: 100,),
Consumer(builder: (context, watch, _){
final data = ref.watch(dataProvider);
return Text(data,
style: Theme.of(context).textTheme.headlineLarge,);
},
),
const SizedBox(height: 200,),
TextField(
onChanged: (newData){
ref.read(dataProvider.notifier).dataMessage(newData);
},
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter a message',
),
)
],
),
),
),
);
}
}
If you have any query’s in this tutorial on flutter riverpod example do let us know in the comment section below.If you like this tutorial do like and share us for more interesting updates.
