ReactterProviders

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 of ReactterProvider widgets that are to be wrapped by the ReactterProviders .
key: An optional Key to use for identifying the widget.
child: An optional Widget which is independent of the ReactterProviders . If defined, it is passed to the builder function if it is defined.
builder : An optional function which builds a widget depending on the ReactterProviders . If it not defined, the child widget is returned. It receives the following arguments:
- context: The BuildContext of the widget. A handle to the location of ReactterProviders in the widget tree.
- child: The child widget passed to the ReactterProviders 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
1
import 'package:reactter/reactter.dart';
2

3
class CounterController {
4
  // Create a reactive state using the `Signal` class
5
  final count = Signal(0);
6

7
  void increment() {
8
    count.value++;
9
  }
10

11
  void decrement() {
12
    count.value--;
13
  }
14
}


78 collapsed lines
1
class CounterView extends StatelessWidget {
2
  const CounterView({super.key});
3

4
  @override
5
  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

31
class 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` instance
62
              listenStates: (counterController) => [counterController.count],
63
              builder: (context, counterController, child) {
64
                // Rebuilds the widget tree when the `count` value changes
65
                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
}

1
void 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

13
class MyApp extends StatelessWidget {
14
  const MyApp({Key? key}) : super(key: key);
15

16
  @override
17
  Widget build(BuildContext context) {
18
    return const MaterialApp(
19
      home: CounterView(),
20
    );
21
  }
22
}