easystate 0.1.4

EasyState is the simplest and the easiest state management for Flutter.

EasyState

• EasyState is the easiest and the simplest Flutter state management package for beginners.

• This is not the perfect state manager, but will give you great understanding about what state management is.

• To use EasyState,

  • Create your model,
  • Use it with StreamBuilder to render UI. (You may optioanlly use EasyBuilder.)
  • Call update() whenever you need to re-render the UI.

Installation

Add EasyState to your pubspec.yaml file:

dependencies:
  easystate:

Examples

• Import easystate.dart.

import 'package:easystate/easystate.dart';

• Define your model

class CountModel extends EasyState {
  int value = 0;
  increase() {
    value ++;
    update();
  }
}
class TestModel extends EasyState {
  int value = 100;
  decrease() {
    value--;
    update();
  }
}

• Create instance before using it. You can instantiate the model any where before use.

CountModel countModel;
void main() {
  countModel = CountModel();
  runApp(MyApp());
}

  @override
  Widget build(BuildContext context) {
    TestModel(); // You can instantiate before use.
     return Scaffold({...});
  }

• And use it with StreamBuidler.

StreamBuilder(
  stream: countModel.stream,
  initialData: countModel.stream,
  builder: (context, snapshot) => Text(snapshot.data.value.toString()),
),
floatingActionButton: FloatingActionButton(
  onPressed: () => countModel.increase(), // trigger UI update.
  tooltip: 'Increase',
  child: Icon(Icons.add),
),

That's it. This is how I recommend to use EasyState.

Common State Management Pattern

• A lot of state management packages have a common pattern on their usage. That is;
  • First, create a model
  • Second, register the model (and put it into container).
  • Third, render the model value with some custom widget like Consumer in Provider or GetBuilder in GetX.
  • Forth, get instance and do something(or update the UI). Provider.of() and Get.find() are one of those.

Why? Because it is more easy with this pattern.

• EasyState has also provide the same pattern.
  • First, create a model. When the model is instantiated, the model is automactially registered into container. So, you need to simple create the model and instantiate it somewhere. No need to register explicitly.
  • Second, render the model value with EasyBuilder widget.
  • Third, to get the instance of the model, do EasyState.get<T>().

class CountModel extends EasyState { // your model
  int value = 0;
  increase() {
    value++;
    update();
  }
}

void main() {
  CountModel countModel = CountModel(); // instantiate your model.
  runApp(MyApp());
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Column( childiren: [
          EasyBuilder<CountModel>( // use it with generic class type.
              builder: (context, CountModel model) => Text(
                model.value.toString(),
              ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: () {
              EasyState.get<CountModel>().increase(); // get instance and re-render
            }
          ),
       ])

Listening the stream event

• You can listen the stream and do some logic without updating UI.

  StreamSubscription stream;

  @override
  void initState() {
    stream = countModel.stream.listen((value) { /* do something */ });
    super.initState();
  }

  @override
  void dispose() {
    stream.cancel();
    super.dispose();
  }

Reference

• See Easystate Sample App for examples.

Developers

• To develop easystate package, clond https://github.com/thruthesky/easystate in your project and test it.