RtMultiProvider

The RtMultiProvider widget is a container for multiple providers that allows you to provide multiple dependencies to the widget tree.

Note

The RtMultiProvider widget is a more efficient way to provide multiple dependencies to the widget tree than using multiple RtProvider widgets.

Syntax

RtMultiProvider(
  List<RtProvider> providers, {
  Key? key,
  Widget? child,
  Widget builder(
    BuildContext context,
    Widget child,
  )?,
})

Properties

• providers: A list of RtProvider widgets that are to be wrapped by the RtMultiProvider .
• key: An optional Key to use for identifying the widget.
• child: An optional Widget that remains static while the widget tree is rebuilt. It is passed to the builder function if it is defined.
• builder : An optional function which builds a widget depending on the RtMultiProvider . 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 RtMultiProvider in the widget tree.
  • child: The child widget passed to the RtMultiProvider widget.

Usage

In the following example, we have a simple counter application that uses the RtMultiProvider widget to provide multiple dependencies to the widget tree.

• main.dart
• counter_view.dart
• counter.dart
• counter_controller.dart

import 'package:flutter/material.dart';
import 'package:flutter_reactter/flutter_reactter.dart';
import 'counter_view.dart';
import 'counter_controller.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: RtMultiProvider(
        [
          RtProvider(() {
            print('CounterController created');
            return CounterController();
          }),
          RtProvider.lazy(
            () {
              print('Lazy CounterController created');
              return CounterController();
            },
            id: 'counterLazy',
          ),
        ],
        builder: (context, child) {
          return CounterView();
        },
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'counter.dart';

class CounterView extends StatelessWidget {
  const CounterView({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Counter"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Counter(),
            const SizedBox(height: 8),
            FutureBuilder(
              future: Future.delayed(Duration(seconds: 1)),
              builder: (context, snapshot) {
                if (snapshot.connectionState != ConnectionState.done) {
                  return const CircularProgressIndicator();
                }

                return const Counter(id: "counterLazy");
              },
            ),
          ],
        ),
      ),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:flutter_reactter/flutter_reactter.dart';
import 'counter_controller.dart';

class Counter extends StatelessWidget {
  final String? id;

  const Counter({Key? key, this.id}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Locale the `CounterController` dependency
    return RtConsumer<CounterController>(
      id: id,
      builder: (context, counterController, child) {
        return Row(
          mainAxisSize: MainAxisSize.min,
          children: [
            ElevatedButton(
              onPressed: counterController.decrement,
              child: const Icon(Icons.remove),
            ),
            const SizedBox(width: 8),
            // Observe the `count` property of the `counterController`
            // and rebuild the widget tree when the `count` value changes
            RtConsumer<CounterController>(
              id: id,
              listenStates: (counterController) => [counterController.count],
              builder: (context, counterController, child) {
                return Text("${counterController.count}");
              },
            ),
            const SizedBox(width: 8),
            ElevatedButton(
              onPressed: counterController.increment,
              child: const Icon(Icons.add),
            ),
          ],
        );
      },
    );
  }
}

import 'package:reactter/reactter.dart';

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

  void increment() {
    count.value++;
  }

  void decrement() {
    count.value--;
  }
}