ngex

Description:

ngex

Welcome to Ngex! #
Ngex is a simple state management framework for Flutter, which allows having a data store globally or even using it as a data manager for an application controller.
Import the library #
import 'package:ngex/ngex.dart';
copied to clipboard
StoreValue #
StoreValue allows us to create a value within the store, passing the initial value as the only parameter.



Property
Description




Value
Current property value


notify
Method to notify a change that is not of type setter


watch
Method that listens for new changes



Let's see an example of StoreValue:
import 'package:ngex/ngex.dart';
class Store {

final counter = StoreValue<int>(10);
void increment() => counter++; // set increment value

final list = StoreValue<List<int>>([]);
void addItem(int item){
list.value.add(item);
list.notify();
}

void ListWatch(){
// Begins to hear property changes
list.watch((element)=> print(element));
}
}
copied to clipboard
StoreBuilder #
StoreBuilder is a flutter widget that allows us to manage state changes in the application view, this widget receives a value and a builder as parameters that will allow state management.
Let's see an example of StoreBuilder:
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

final counter = StoreValue<int>(10);

void increment(){
counter.value++;
}

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Example')
),
body: Container(
child: StoreBuilder(
value: counter,
builder:(context, state){
return Text("${state.value}");
}
)
),
floatingActionButton: FloatingActionButton(
onPressed: () => increment(),
child: const Icon(Icons.navigation),
),
);
}
}
copied to clipboard
NgexStore #
NgexStore is an interface that allows you to create a store which you can use to extend your controller class, thus allowing you to separate your data layer from your business logic.
In addition, NgexStore has a method called initStore that is executed when starting to use the store, allowing the execution of necessary methods or validations depending on the case.
Let's see an example of NgexStore:
For the example we are going to create 3 files, store.dart, controller.dart and view.dart.
store.dart
class AppStore extends NgexStore {
final counter = StoreValue<int>(10);
void increment() {
counter.value++;
}
}
copied to clipboard
controller.dart
class AppController extends AppStore{
@override
void initStore() {
counter.watch((val) => print("Counter value is: ${val}"));
super.initStore();
}

void incrementCounter(){
increment();
}
}

copied to clipboard
view.dart
class _MyAppState extends State<MyApp> {

final ctrl = AppController();

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Example')
),
body: Container(
child: StoreBuilder(
value: ctrl.counter,
builder:(context, state){
return Text("${state.value}");
}
)
),
floatingActionButton: FloatingActionButton(
onPressed: () => incrementCounter(),
child: const Icon(Icons.navigation),
),
);
}
}
copied to clipboard
Motivation #
The motivation of this project is purely educational, which evolved to have a library based on ChangeNotifier that allows managing the state of the application, although the library can be used directly in the view, it is recommended to use it under a software architecture that allows separating the UI of your business logic, when using StoreBuilder the re-rendering is only done in this code snippet avoiding rendering the view completely.
This is how easy we can manage the state of our application, I hope it will be helpful for those who want to use Ngex in their project.
Who I am ? #
My name is Luis Vilches and I am a software developer with a few years of experience. If you have questions about the library or suggestions you can write to me at [email protected].
Greetings.