ProviderScope
- Flutter course
- Intermediate
- Lesson 14/99
- 4 min
Wrap the root with ProviderScope.
ProviderScope
ProviderScope is the widget that wraps the app root and manages the lifecycle of all providers. It sits at the outermost layer of the runApp call.
void main() {
runApp(ProviderScope(child: MyApp()));
}Every provider lives inside this scope.
Scope and lifecycle
ProviderScope manages the lifecycle of all providers inside it. When the app closes, providers are disposed. Multiple scopes can be used; the nearest one wins.
ProviderScope(
overrides: [],
child: MyApp(),
)With overrides, providers can be overridden for testing.
Practice Display name with ProviderScope
Declare a Provider<String> named isimP returning 'Riverpod'. Wrap the root with ProviderScope. In Ekrani ConsumerWidget, get the value with ref.watch(isimP) and display it. In main, call print('başladı').
Starter code
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
// isimP: Provider<String> 'Riverpod'
void main() {
print('başladı');
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ekrani());
}
}
class Ekrani extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(body: Center(child: Text('?')));
}
}Sample solution
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
final isimP = Provider<String>((ref) => 'Riverpod');
void main() {
print('başladı');
runApp(ProviderScope(child: MyApp()));
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(home: Ekrani());
}
}
class Ekrani extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) {
final isim = ref.watch(isimP);
return Scaffold(body: Center(child: Text(isim)));
}
}Expected output
başladı
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 When is ProviderScope used?
- Only in StatelessWidgets
- Only in debug mode
- At the app root, outermost in the runApp call Correct answer
- Only during testing
Explanation: ProviderScope sits outermost in the runApp call and manages the lifecycle of all providers.
2 Pass overrides to ProviderScope
void main() {
runApp(ProviderScope(
____: [isimP.overrideWithValue('Test')],
child: MyApp(),
));
}void main() {
runApp(ProviderScope(
overrides: [isimP.overrideWithValue('Test')],
child: MyApp(),
));
}Explanation: ProviderScope's overrides parameter overrides providers for testing.
3 ProviderScope parts
| Term | Meaning |
|---|---|
ProviderScope |
Widget wrapping app root |
runApp |
Function that starts the app |
overrides |
Overrides providers for testing |
scope |
Environment where providers live |