Table of Contents
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.
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.
