flutter_state_notifier 0.4.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 93

pub package

Welcome to flutter_state_notifier~

This repository is a side-package that is destined to be used together with state_notifier.

It adds extra Flutter bindings to StateNotifier, such as provider integration.

The available widgets #

StateNotifierProvider #

StateNotifierProvider is the equivalent of ChangeNotifierProvider but for StateNotifier.

Its job is to both create a StateNotifier and dispose it when the provider is removed from the widget tree.

If the created StateNotifier uses LocatorMixin, StateNotifierProvider will also do the necessary to make read/update work with provider.

It is used like most providers, with a small difference:
Instead of exposing one value, it exposes two values at the same time:

Which means that when you write:

class MyState {}

class MyStateNotifier extends StateNotifier<MyState> {
  MyStateNotifier(): super(MyState());
}

// ...

MultiProvider(
  providers: [
    StateNotifierProvider<MyStateNotifier, MyState>(create: (_) => MyStateNotifier()).
  ]
)

This allows you to both:

  • obtain the StateNotifier in the widget tree, by writing context.read<MyStateNotifier>()
  • obtain and observe the current [MyState], through context.watch<MyState>()

StateNotifierBuilder #

StateNotifierBuilder is equivalent to ValueListenableBuilder from Flutter.

It allows you to listen to a StateNotifier and rebuild your UI accordingly, but does not create/dispose/provide the object.

As opposed to StateNotifierProvider, this will not make read/update of StateNotifier work.

It is used as such:

class MyState {}

class MyStateNotifier extends StateNotifier<MyState> {
  MyStateNotifier(): super(MyState());
}

// ...

MyStateNotifier stateNotifier;

return StateNotifierBuilder<MyState>(
  stateNotifier: stateNotifier,
  builder: (BuildContext context, MyState state, Widget child) {
    return Text('$state');
  },
)

0.4.2 #

  • Fix the builder parameter of StateNotifierProvider not working

0.4.1 #

  • Add support for provider 4.0.x

0.4.0 #

  • Add an optional builder parameter on StateNotifierProvider

0.3.0 #

  • Add support for LocatorMixin.initState on StateNotifierProvider

0.2.0 #

  • Added .value contructor on StateNotifierProvider

0.1.0+1 #

  • Add example

0.1.0 #

  • initial release.

example/lib/main.dart

import 'package:example/my_state_notifier.dart';
import 'package:flutter/material.dart';
import 'package:flutter_state_notifier/flutter_state_notifier.dart';
import 'package:provider/provider.dart';

// This is the default counter example reimplemented using StateNotifier + provider
// It will print in the console the counter whenever it changes
// The state change is also animated.

// The "print to console" feature is abstracted through a "Logger" class like
// we would do in production.

// This showcase how our custom MyStateNotifier does not depend on Flutter,
// but is still able to read providers and be used as usual in a Flutter app.

void main() {
  runApp(
    MultiProvider(
      providers: [
        Provider<Logger>(create: (_) => ConsoleLogger()),
        StateNotifierProvider<MyStateNotifier, MyState>(
          create: (_) => MyStateNotifier(),
          // Override MyState to make it animated
          builder: (context, child) {
            return TweenAnimationBuilder<MyState>(
              duration: const Duration(milliseconds: 500),
              tween: MyStateTween(end: context.watch<MyState>()),
              builder: (context, state, _) {
                return Provider.value(value: state, child: child);
              },
            );
          },
        ),
      ],
      child: MyApp(),
    ),
  );
}

/// A [MyStateTween].
///
/// This will apply an [IntTween] on [MyState.count].
class MyStateTween extends Tween<MyState> {
  MyStateTween({MyState begin, MyState end}) : super(begin: begin, end: end);

  @override
  MyState lerp(double t) {
    final countTween = IntTween(begin: begin.count, end: end.count);
    // Tween the count
    return MyState(
      countTween.lerp(t),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Flutter Demo',
      home: MyHomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Counter example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              context.select((MyState value) => value.count).toString(),
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: context.watch<MyStateNotifier>().increment,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_state_notifier: ^0.4.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_state_notifier/flutter_state_notifier.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
87
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
97
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

We analyzed this package on May 24, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.1
  • pana: 0.13.8-dev
  • Flutter: 1.17.0

Maintenance suggestions

The package description is too short. (-3 points)

Add more detail to the description field of pubspec.yaml. Use 60 to 180 characters to describe the package, what it does, and its target use case.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
meta ^1.1.8 1.1.8
provider >=4.0.0 <5.0.0 4.1.2
state_notifier >=0.3.0 <1.0.0 0.4.0
Transitive dependencies
collection 1.14.12
nested 0.0.4
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test
matcher ^0.12.6
mockito ^4.1.1