ReactterProviders
Esta página aún no está disponible en tu idioma.
The ReactterProviders
widget is a container for multiple providers that allows you to provide multiple dependencies to the widget tree.
Syntax
ReactterProviders( List<ReactterProvider> providers, { Key? key, Widget? child, Widget builder( BuildContext context, Widget child, )?,})
Properties
providers
: A list ofReactterProvider
widgets that are to be wrapped by theReactterProviders
.key
: An optionalKey
to use for identifying the widget.child
: An optionalWidget
which is independent of theReactterProviders
. If defined, it is passed to thebuilder
function if it is defined.-
builder
: An optional function which builds a widget depending on theReactterProviders
. If it not defined, thechild
widget is returned. It receives the following arguments:context
: TheBuildContext
of the widget. A handle to the location ofReactterProviders
in the widget tree.child
: Thechild
widget passed to theReactterProviders
widget.
Example
In the following example, we have a simple counter application that uses the ReactterProviders
widget to provide multiple dependencies to the widget tree.
14 collapsed lines
1import 'package:reactter/reactter.dart';2
3class CounterController {4 // Create a reactive state using the `Signal` class5 final count = Signal(0);6
7 void increment() {8 count.value++;9 }10
11 void decrement() {12 count.value--;13 }14}
78 collapsed lines
1class CounterView extends StatelessWidget {2 const CounterView({super.key});3
4 @override5 Widget build(BuildContext context) {6 return Scaffold(7 appBar: AppBar(8 title: const Text("Counter"),9 ),10 body: Center(11 child: Column(12 children: [13 const Counter(),14 FutureBuilder(15 future: Future.delayed(Duration(seconds: 1)),16 builder: (context, snapshot) {17 if (snapshot.connectionState != ConnectionState.done) {18 return const CircularProgressIndicator();19 }20
21 return const Counter(id: "counterLazy");22 },23 ),24 ],25 ),26 ),27 );28 }29}30
31class Counter extends StatelessWidget {32 final String? id;33
34 const Counter({Key? key, this.id}) : super(key: key);35
36 Widget build(BuildContext context) {37 final counterController = context.use<CounterController>(id);38
39 if (counterController == null) {40 return const Text('CounterController is not provided');41 }42
43 print(44 'CounterController created: ${counterController}, '45 '${id == null ? '' : 'with id: $id'}'46 );47
48 return Column(49 children: [50 Text("Counter id: $id"),51 Row(52 mainAxisAlignment: MainAxisAlignment.center,53 children: [54 ElevatedButton(55 onPressed: counterController.decrement,56 child: const Icon(Icons.remove),57 ),58 const SizedBox(width: 8),59 ReactterConsumer<CounterController>(60 id: id,61 // Observes the `count` property of the `counterController` instance62 listenStates: (counterController) => [counterController.count],63 builder: (context, counterController, child) {64 // Rebuilds the widget tree when the `count` value changes65 return Text("${counterController.count}");66 },67 ),68 const SizedBox(width: 8),69 ElevatedButton(70 onPressed: counterController.increment,71 child: const Icon(Icons.add),72 ),73 ],74 ),75 ],76 );77 }78}
1void main() {2 runApp(3 ReactterProviders(4 [5 ReactterProvider(() => CounterController()),6 ReactterProvider.lazy(() => CounterController(), id: 'counterLazy'),7 ],8 child: const MyApp(),9 ),10 );11}11 collapsed lines
12
13class MyApp extends StatelessWidget {14 const MyApp({Key? key}) : super(key: key);15
16 @override17 Widget build(BuildContext context) {18 return const MaterialApp(19 home: CounterView(),20 );21 }22}