easystate

Description:

easystate

EasyState: A Simple and Intuitive State Management Package #
EasyState is more than just a user-friendly state manager. It's a tool designed to simplify the learning process of Flutter's State Management system.
Many Flutter developers start their journey with Provider, often without a deep understanding of its internal mechanism. On my third day of using Flutter, I decided to create a simpler alternative for my own learning - and thus, EasyState was born.
For the past four years since EasyState's inception, I hesitated to recommend it for production apps, primarily because I wasn't using it in my own projects. However, times have changed. Recently, I've felt a strong need for a simpler state management tool. Now, I confidently use EasyState in my production apps and encourage others to experience its simplicity and effectiveness.
Tips of state management in Flutter #
Why do we need a state manager? #
In Flutter, setState() is a function that updates the state and triggers a rebuild of the widget. However, it's limited to updating widgets within the same stateful widget. What if you need to update the state on a different screen? Unfortunately, setState() won't work in this scenario.
The solution is to have a global state that can be accessed from anywhere in your app. This state can then be updated, triggering a rebuild of any widgets that depend on it. While there are various ways to implement this, such as using socket events or real-time database events, state management is a particularly effective solution.
State management tools provide a structured way to manage global state, making it easier to update and respond to changes in state across multiple screens.
Installation #
Add EasyState to your pubspec.yaml file:
dependencies:
easystate: latest-version
copied to clipboard
How to use #

Below is the simplest use case of EasyState.

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

// Define your state class extending(or mixing with) the ChangeNotifier
class MyState extends ChangeNotifier {
int count = 0;
void increment() {
count++;
// Notify listeners to rebuild the widgets.
notifyListeners();
}
}

void main() {
runApp(const MyApp());
}


class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
// Provide your state model
return EasyState(
state: MyState(),
child: MaterialApp(
home: const MyHomePage(),
),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text('EasyState Example'),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// Build your widget
EasyStateBuilder<MyState>(builder: (context, state) {
return Text(
'My Count: ${state.count}',
);
}),
ElevatedButton(
onPressed: () {
EasyState.of<MyState>(context).increment();
},
child: Text("Increment My Counter"),
),
],
),
);
}
}
copied to clipboard
Examples #

See src/main_full_example.dart to see the full example.

Common Pattern of State Management #


Define your state model


Provide it to the app


Inject the builder


Update & notify the listeners.


Listening the event #
You can use addListener to the model. If there is any chance that the context is not ready, you can delay for the attaching listener.
And don't forget to remove the listener.
class _ForumScreenState extends State<ForumScreen> {
scheduleMicrotask(() {
EasyState.of<AppState>(context).addListener(listener);
});
}

listener() {
// ...
}
@override
void dispose() {
EasyState.of<AppState>(context).removeListener(listener);
}
copied to clipboard
Reference #

See Easystate Sample App for examples.

Developers #

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