ngex 0.0.7

Effortless state management for Flutter apps. Simplify your workflow and enhance user experience.

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';

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));
	}
}

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),
			),
		);
	}
}

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++;
	}
}

controller.dart

class AppController extends AppStore{
	@override
	void  initStore() {
		counter.watch((val) =>  print("Counter value is: ${val}"));
		super.initStore();
	}
	
	void incrementCounter(){
		increment();
	}
}

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),
			),
		);
	}
}

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 [e-mail].

Greetings.