get_notifier 0.0.13

Flutter plugin to use the power of ChangeNotifier and GetIt together.

get_notifier plugin

GetNotifier aims to combine the power of ChangNotifier and GetIt DI plugin to work together. It is the way to avoid context tracking over a different part of the app.

Features:

• Use Get_It plugin get_it to inject singleton or factory dependencies anywhere in the code;
• Easely perform ChangeNotifier UI mutation using Consumer widget;

Getting Started

• Add get_it and get_notifier to the pubspec.yaml file.

dependencies:
  ...
  get_notifier:

copied to clipboard

Then run

flutter pub get

copied to clipboard

• Create state file extending ChangeNotifier app_model.dart

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

class AppModel extends ChangeNotifier {
  AppModel() {
  int _counter = 0;
  int get counter => _counter;
  set counter(int val) {
    _counter = val;
    notifyListeners();
  }
}

copied to clipboard

• Register it into the application together with other DI parts main.dart

import 'package:flutter/material.dart';
import 'package:get_notifier/get_notifier.dart';
import 'package:get_notifier_example/app_model.dart';
import 'package:get_notifier_example/service.dart';

// This is our global ServiceLocator
GetIt getIt = GetIt.instance;
void main() {
  getIt
    ..registerSingleton(AppModel(), signalsReady: true)
    ..registerFactory(() => Service());

  runApp(const MyApp());
}

copied to clipboard

• You now can separate state from mutation actions for the sake of code readability service.dart

import 'package:get_notifier_example/app_model.dart';

class Service {
  final appModel = GetIt.I.get<AppModel>();

  void incrementCounter() {
    appModel.counter += 1;
  }
}

copied to clipboard

Usage in UI

To utilise simple DI fuctionality inject singleton or factory just as GetIt plugin recomends:

final appModel = GetIt.I.get<AppModel>();

copied to clipboard

To make statless part of the UI, which does not rebuild due to the notifyListrers() method of ChangeNotifier ancestor simply use one of six Workers to collect up to 6 different ChangeNotifier classes in one snipet:

1. Worker<A>(builder: (a, child)=> ...)
2. Worker2<A, B>(builder: (a,b, child)=> ...)
3. Worker3<A, B, C>(builder: (a,b,c, child)=> ...)
4. Worker4<A, B, C, D>(builder: (a,b,c,d, child)=> ...)
5. Worker5<A, B, C, D, E>(builder: (a,b,c,d,e, child)=> ...)
6. Worker6<A, B, C, D, E, F>(builder: (a,b,c,d,e,f, child)=> ...)

where A, B, C, D, E, and F are ChangeNotifier state classes

To make reactive part of the UI, which rebuilds due to the notifyListrers() method of ChangeNotifier ancestor simply use one of six Consumers:

1. Consumer<A>(builder: (a, child)=> ...)
2. Consumer2<A, B>(builder: (a,b, child)=> ...)
3. Consumer3<A, B, C>(builder: (a,b,c, child)=> ...)
4. Consumer4<A, B, C, D>(builder: (a,b,c,d, child)=> ...)
5. Consumer5<A, B, C, D, E>(builder: (a,b,c,d,e, child)=> ...)
6. Consumer6<A, B, C, D, E, F>(builder: (a,b,c,d,e,f, child)=> ...)

where A, B, C, D, E, and F are ChangeNotifier state classes

For example:

import 'package:flutter/material.dart';
import 'package:get_it/get_it.dart';
import 'package:get_notifier/get_notifier.dart';
import 'package:get_notifier_example/app_model.dart';
import 'package:get_notifier_example/service.dart';

class MyHomePage extends StatelessWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Material(Scaffold(
                appBar: AppBar(
                  title: Text('Title'),
                ),
                body: Center(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        const Text(
                          'You have pushed the button this many times:',
                        ),
                        Consumer<AppModel>(builder: (appModel, child) {
                          return Text(
                          appModel.counter.toString(),
                          style: Theme.of(context).textTheme.headline4,
                          ),
                        }),
                      ],
                    ),
                  );
                floatingActionButton: Worker<Service>(builder: (s, child) {
                  return FloatingActionButton(
                    onPressed: () {
                      s.incrementCounter();
                    },
                    tooltip: 'Increment',
                    child: const Icon(Icons.add),
                  );
                }),
              );
            
          }),
    );
}

copied to clipboard

That's it!

More about

This project is a starting point for a Flutter plug-in package, a specialized package that includes platform-specific implementation code for Android and/or iOS.

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Happy coding.