flutter_immutable_state 1.0.0
flutter_immutable_state #
🦋 A lightweight framework for stateless UI in Flutter, and an alternative to Redux.
Why? #
View the rationale, along with the documentation for the underlying
package:immutable_state
library at the homepage:
https://github.com/thosakwe/immutable_state
This package is useless without understanding of the purpose thereof.
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: [],
),
));
}
Where your ExampleApp
might look like:
class ExampleApp extends StatelessWidget {
final AppState initialValue;
const ExampleApp({Key key, this.initialValue}) : super(key: key);
@override
Widget build(BuildContext context) {
return ImmutableManager<AppState>(
initialValue: initialValue,
child: MaterialApp(
home: HomeScreen(),
),
);
}
}
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.
import 'package:flutter/material.dart';
import 'package:flutter_immutable_state/flutter_immutable_state.dart';
/// TLDR; Use `ImmutableManager`, `ImmutablePropertyManager`, and `ImmutableView`.
void main() {
var initialValue = AppState(
titleState: TitleState(
title: 'Hello!',
),
);
runApp(ImmutableManager<AppState>(
initialValue: initialValue,
child: MaterialApp(
home: TitleText(),
),
));
}
class TitleText extends StatelessWidget {
final Key textKey;
const TitleText({Key key, this.textKey}) : super(key: key);
@override
Widget build(BuildContext context) {
return ImmutableView<AppState>.readOnly(
builder: (context, state) {
return Text(
state.titleState.title,
key: textKey,
);
},
);
}
}
class PropertyTitleText extends StatelessWidget {
final Key textKey;
const PropertyTitleText({Key key, this.textKey}) : super(key: key);
@override
Widget build(BuildContext context) {
return ImmutableView<TitleState>.readOnly(
builder: (context, state) {
return Text(
state.title,
key: textKey,
);
},
);
}
}
class TitleChanger extends StatelessWidget {
final Key buttonKey;
const TitleChanger({Key key, this.buttonKey}) : super(key: key);
@override
Widget build(BuildContext context) {
return ImmutableView<TitleState>(
builder: (context, state) {
return FlatButton(
key: buttonKey,
child: const Text('CLICK ME'),
onPressed: () => state.change((state) => state.changeTitle('world')),
);
},
);
}
}
class AppState {
final TitleState titleState;
AppState({this.titleState});
@override
int get hashCode => titleState.hashCode;
@override
bool operator ==(other) =>
other is AppState && other.titleState == titleState;
AppState changeTitleState(TitleState titleState) =>
new AppState(titleState: titleState);
}
class TitleState {
final String title;
TitleState({this.title});
@override
int get hashCode => title.hashCode;
@override
bool operator ==(other) => other is TitleState && other.title == title;
TitleState changeTitle(String title) => new TitleState(title: title);
}
Use this package as a library
1. Depend on it
Add this to your package's pubspec.yaml file:
dependencies:
flutter_immutable_state: ^1.0.0
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_immutable_state/flutter_immutable_state.dart';
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
28
|
Health:
Code health derived from static analysis.
[more]
|
100
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
55
|
Overall:
Weighted score of the above.
[more]
|
55
|
We analyzed this package on Dec 7, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
- Dart: 2.6.1
- pana: 0.12.21
- Flutter: 1.9.1+hotfix.6
Platforms
Detected platforms: Flutter
References Flutter, and has no conflicting libraries.
Maintenance suggestions
Package is getting outdated. (-44.93 points)
The package was last published 75 weeks ago.
Dependencies
Package | Constraint | Resolved | Available |
---|---|---|---|
Direct dependencies | |||
Dart SDK | >=2.0.0-dev.28.0 <3.0.0 | ||
flutter | 0.0.0 | ||
immutable_state | ^1.0.0 | 1.1.0 | |
meta | ^1.0.0 | 1.1.7 | 1.1.8 |
Transitive dependencies | |||
collection | 1.14.11 | 1.14.12 | |
sky_engine | 0.0.99 | ||
typed_data | 1.1.6 | ||
vector_math | 2.0.8 | ||
Dev dependencies | |||
flutter_test |