flutter_state 1.0.0-beta

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • new61

flutter_state

A lightweight framework for stateless UI in Flutter, and an alternative to Redux.

Marked as beta until tests are published, and Travis is set up.

Why?

UI state management in complex applications is a solved problem. Immutable application state, combined with asynchronous, functional updates, is generally the way to go.

Perhaps the most common implementation of such a pattern is Redux, which is commonly used with React.

Redux, though, comes with a lot of boilerplate, in addition to not being well-suited for an object-oriented language like Dart.

The solution outlined in flutter_state is simple - to use built-in functionality from dart:async to handle updates, and to use the InheritedWidget pattern to inject application state everywhere.

Usage

To inject an application state into the tree, simply use the ImmutableManager<T> widget.

For example:

import 'package:flutter/material.dart';
import 'app_state.dart';
import 'example_app.dart';

void main() {
  runApp(ExampleApp(
    initialValue: new AppState(
      title: 'Hello, immutables!',
      checked: false,
      dates: [],
    ),
  ));
}

To access the current value of the state, you simply need an ImmutableView<T>. The builder callback can be used to query the current state and render a view:

import 'package:flutter/material.dart';
import 'package:flutter_state/flutter_state.dart';
import 'app_state.dart';

class TitleEditor extends StatelessWidget {
  const TitleEditor();

  @override
  Widget build(BuildContext context) {
    return ImmutableView<AppState>(
      builder: (context, immutable) {
        return TextField(
          onChanged: (title) => immutable.change((s) => s.changeTitle(title)),
          controller: new TextEditingController(text: immutable.current.title),
        );
      },
    );
  }
}

By using the Immutable<T>.change method, you can update the state with a modified version of the current one. However, there are often cases where you need read-only access only, and writing data is unnecessary. For such a case, call ImmutableView<T>.readOnly:

Widget build(BuildContext contet) {
  return new ImmutableView<AppState>.readOnly(
    builder: (context, state) {
      return Text(state.title);
    },
  );
}

Nesting and Properties

Redux is nice, in part because of its combineReducers functionality, which allows you to split application logic into smaller units. In Dart, this doesn't map so well, as objects need to have specific type, and the language has no concept of a spread operator.

For this, the Immutable<T> class has a method property that produces a child immutable that points to a property of the main state. This child state can also process updates, thereby triggering a change in the parent. Through the use of Immutable<T>.property, you can build infinitely-nested trees of immutable application state.

Because of how often this is used, the ImmutablePropertyManager<T> class exists:

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ImmutableView<AppState>(
      builder: (context, immutable) {
        return Scaffold(
          body: Padding(
            padding: EdgeInsets.all(16.0),
            child: Column(
              children: <Widget>[
                TitleEditor(),
                CheckedView(),

                // We can create a child state that modifies the title.
                //
                // By passing an `ImmutableManager<String>` pointing to this child state down the tree,
                // we can have child widgets access infinitely nested parts of a single
                // application state.
                ImmutablePropertyManager<AppState, List<DateTime>>(
                  current: (state) => state.dates,
                  child: DateView(),
                ),
              ],
            ),
          ),
        );
      },
    );
  }
}

1.0.0

  • First release.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'app_state.dart';
import 'example_app.dart';

void main() {
  runApp(ExampleApp(
    initialValue: new AppState(
      title: 'Hello, immutables!',
      checked: false,
      dates: [],
    ),
  ));
}

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_state: ^1.0.0-beta

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages 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/flutter_state.dart';
  
Version Uploaded Documentation Archive
1.0.0-beta Jun 25, 2018 Go to the documentation of flutter_state 1.0.0-beta Download flutter_state 1.0.0-beta archive
Popularity:
Describes how popular the package is relative to other packages. [more]
23
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
98
Overall:
Weighted score of the above. [more]
61
Learn more about scoring.

We analyzed this package on Jul 20, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.0.0-dev.69.0
  • pana: 0.11.7
  • Flutter: 0.5.5

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Suggestions

Package is pre-release.

Pre-release versions should be used with caution, their API may change in breaking ways.

Format lib/flutter_state.dart.

Run flutter format to format lib/flutter_state.dart.

Format lib/src/stateful_widgets.dart.

Run flutter format to format lib/src/stateful_widgets.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.28.0 <3.0.0
flutter 0.0.0
meta ^1.0.0 1.1.5 1.1.6
Transitive dependencies
collection 1.14.6 1.14.11
sky_engine 0.0.99
typed_data 1.1.5 1.1.6
vector_math 2.0.6 2.0.7
Dev dependencies
flutter_test