import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
runApp(
ProviderScope(
child: MultiProvider(
providers: [
ChangeNotifierProvider(create: (_) => ProviderCounter()),
],
child: const MyApp(),
),
),
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'State Management Comparison',
home: const CounterScreen(),
);
}
}
class CounterScreen extends StatefulWidget {
const CounterScreen({super.key});
@override
State<CounterScreen> createState() => _CounterScreenState();
}
class _CounterScreenState extends State<CounterScreen> {
int setStateCounter = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('Counter State Management Comparison')),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('setState Counter: $setStateCounter', style: const TextStyle(fontSize: 18)),
ElevatedButton(
onPressed: () => setState(() => setStateCounter++),
child: const Text('Increment'),
),
const SizedBox(height: 24),
Consumer(builder: (context, watch, _) {
final providerCounter = context.watch<ProviderCounter>();
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Provider Counter: ${providerCounter.count}', style: const TextStyle(fontSize: 18)),
ElevatedButton(
onPressed: providerCounter.increment,
child: const Text('Increment'),
),
],
);
}),
const SizedBox(height: 24),
Consumer(
builder: (context, ref, _) {
final riverpodCounter = ref.watch(riverpodCounterProvider);
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Riverpod Counter: $riverpodCounter', style: const TextStyle(fontSize: 18)),
ElevatedButton(
onPressed: () {
ref.read(riverpodCounterProvider.notifier).state++;
},
child: const Text('Increment'),
),
],
);
},
),
],
),
),
);
}
}
class ProviderCounter extends ChangeNotifier {
int _count = 0;
int get count => _count;
void increment() {
_count++;
notifyListeners();
}
}
final riverpodCounterProvider = StateProvider<int>((ref) => 0);
This app shows three counters using different state management methods in Flutter.
1. setState: The simplest way. The counter is a local variable in the stateful widget. When the button is pressed, setState updates the UI.
2. Provider: Uses a ChangeNotifier class ProviderCounter to hold the count. The UI listens to changes and rebuilds when notifyListeners() is called.
3. Riverpod: Uses a StateProvider to hold the count. The UI watches the provider and updates automatically when the state changes.
This comparison helps beginners see how different methods manage and update state in Flutter apps.
