deex

Description:

deex

Deex #
Deex is a state management library for Flutter, based on GetX but focused exclusively on state management. This README provides an overview of how to use Deex in a Flutter application.
Installation #
Add Deex to your pubspec.yaml file:
dependencies:
deex: # latest
copied to clipboard
Then run:
flutter pub get
copied to clipboard
Usage #
import 'package:deex/deex.dart';
copied to clipboard
Rebuilding Widgets #
Widget #
The Deex widget makes the UI reactive to changes in the controller state, rebuilding the UI whenever the observed state changes.
Deex(
() => Text('${controller.count.value}'),
),
copied to clipboard
The widget rebuilds itself every time the action is executed:
onPressed: controller.increment,
copied to clipboard
Controller #
The Controller extends DeexStore and contains the reactive state, using the .obs extension to make the variables observable.
class Controller extends DeexStore {
var count = 0.obs;
void increment() => count++;
}
copied to clipboard
Similar to Deex, but manages a local state. #
Pass the initial data in constructor.
Useful for simple local states, like toggles, visibility, themes, button states, etc.
Sample:
DeexValue((data) => Switch(
value: data.value,
onChanged: (flag) => data.value = flag,
),
false.obs,
),
copied to clipboard
Rebuilding Widgets with State #
Widget #
In this example, the Deex widget rebuilds the button each time the state changes. The button text is based on the current state of the RequestController.
Deex(() {
return ElevatedButton(
onPressed: stateController.sendRequest,
child: Text(
stateController.state.value.message,
),
);
}),
copied to clipboard
Controller #
The RequestController manages the state of the request. It sets the initial state, changes the state to "loading" when sending a request, and after a simulated delay, changes the state to "completed" with the data received.
class RequestController extends DeexStore {
final Rx<RequestState> state = Rx<RequestState>(InitialRequestState());

void sendRequest() {
_setLoadingState();
_simulateRequest()
.then((data) => _setCompletedState(data))
.catchError((error) => _setErrorState(error));
}

void _setLoadingState() {
state.value = LoadingRequestState();
}

void _setCompletedState(dynamic data) {
state.value = CompletedRequestState(data);
}

void _setErrorState(dynamic error) {
state.value = ErrorRequestState(error.toString());
}

Future<dynamic> _simulateRequest() {
return Future.delayed(const Duration(seconds: 2), () {
return {'data': 'Hello World!'};
});
}
}
copied to clipboard
States #
States represent different phases of a request. Each state has a message that describes its status.
abstract class RequestState {
final String message;
RequestState(this.message);
}

class InitialRequestState extends RequestState {
InitialRequestState() : super('Request State');
}

class LoadingRequestState extends RequestState {
LoadingRequestState() : super('Loading...');
}

class CompletedRequestState extends RequestState {
final dynamic data;
CompletedRequestState(this.data) : super('Request completed');
}

class ErrorRequestState extends RequestState {
ErrorRequestState(String message) : super('Error: $message');
}
copied to clipboard
This approach allows for efficient state management, ensuring that the user interface always reflects the most recent state of the application.
DeexConsumer #
The DeexConsumer is a Flutter widget designed to efficiently manage and respond to state changes in a DeexStore. It listens to updates from the store and rebuilds its UI based on the new state. This widget providing a convenient way to separate business logic from the UI.
Advantages of Using DeexConsumer #


Separation of Concerns: DeexConsumer helps in maintaining a clear separation between the business logic and the UI. This makes the code more maintainable and easier to understand.


Reactive Updates: By listening to changes in the DeexStore, DeexConsumer ensures that the UI is always up-to-date with the latest state, providing a reactive programming model.


Selective Listening: DeexConsumer allows you to specify which parts of the state to listen to using the listenIds parameter. This can help in optimizing performance by reducing unnecessary rebuilds.


Easy State Management: It simplifies state management in Flutter applications by providing a straightforward and consistent way to handle state changes and update the UI accordingly.


Usage Example #
Here's an example of how you might use the DeexConsumer in your application:
import 'package:flutter/material.dart';
import 'package:deex/deex.dart';

class CounterStore extends DeexStore {
int _count = 0;

int get count => _count;

void increment() {
_count++;
update();
}
}

class CounterPage extends StatelessWidget {
final CounterStore store = CounterStore();

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Counter')),
body: Center(
child: DeexConsumer<CounterStore>(
store: store,
builder: (context, store) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('You have pushed the button this many times:'),
Text('${store.count}', style: Theme.of(context).textTheme.headline4),
],
);
},
listener: (store) {
print('Store updated: ${store.count}');
},
),
),
floatingActionButton: FloatingActionButton(
onPressed: store.increment,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}

void main() {
runApp(MaterialApp(
home: CounterPage(),
));
}
copied to clipboard
Notifiers #
ListNotifierSingle #
The ListNotifierSingle is a notifier that allows you to add, remove, and check for individual listeners. It is useful for managing state changes where only a single listener needs to be notified of updates.
class MyWidget extends StatefulWidget {
@override
_MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
final ListNotifierSingle _notifier = ListNotifierSingle();

@override
void initState() {
super.initState();
_notifier.addListener(() {
setState(() {});
});
}

@override
void dispose() {
_notifier.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: () {
_notifier.refresh();
},
child: Text('Refresh'),
);
}
}
copied to clipboard
ListNotifierGroup #
The ListNotifierGroup is a notifier that supports managing groups of listeners identified by unique IDs. It is useful for scenarios where you need to manage and notify multiple listeners, organized by specific categories or groups.
class MyGroupWidget extends StatefulWidget {
@override
_MyGroupWidgetState createState() => _MyGroupWidgetState();
}

class _MyGroupWidgetState extends State<MyGroupWidget> {
final ListNotifierGroup _notifier = ListNotifierGroup();

@override
void initState() {
super.initState();
_notifier.addListenerId('button1', () {
setState(() {});
});
}

@override
void dispose() {
_notifier.dispose();
super.dispose();
}

@override
Widget build(BuildContext context) {
return Column(
children: [
ElevatedButton(
onPressed: () {
_notifier.refreshGroup('button1');
},
child: Text('Refresh Button 1'),
),
ElevatedButton(
onPressed: () {
_notifier.refreshGroup('button2');
},
child: Text('Refresh Button 2'),
),
],
);
}
}
copied to clipboard
License #
This project is licensed under the MIT license - see the LICENSE file for more details.
Contribution #
Contributions are welcome! Please open an issue or submit a pull request.
Author #
Maintained by Raphael Pontes.
Did I help you? Buy me a coffee.