am_state
A state-management and data providing library. (Fast - Safe - Easy)
It has an easy technique to implement (Model, View, Controller) for flutter Pages
This lib gives (AmDataProvider<T>) as data provider and (AmRefreshWidget<T>) as wrapper to the widgets that must be changed when provider data changed.
Getting Started:
it will be great if you installed am-state extension in vsCode
https://marketplace.visualstudio.com/items?itemName=Amr-MAM.am-state
To import am_state:
import 'package:am_state/am_state.dart';
For well-organized code; we need to create 3 dart files
-
The first dart file is for UI and we use AmViewWidget
-
The second dart file is for State
..........we need to create a normal class which has all properity we need to display in the UI page -
The third file is for Controller Class
..........we need to create a class for the controller extended from [AmController<State_Class>]
It is time for an easy example for the home page
The first step ==> Creating UI dart file 'home_ui.dart' and adding this code
Easily if you installed the extension you can write amview then choose the snippet code and fill the fields
class MyHomePage extends AmViewWidget<HomeController> {
const MyHomePage({super.key});
@override
Widget build(BuildContext context, am) {
return Scaffold(
appBar: AppBar(
title: const Text('Hi Am State App Test'),
),
body: ListView(
padding: const EdgeInsets.all(8),
children: [
Text(
'Wow ${am.state.title}',
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.blue,
),
),
Text(
'num ---- ${am.state.number}',
style: const TextStyle(
fontSize: 22,
fontWeight: FontWeight.bold,
color: Colors.red,
),
),
],
),
floatingActionButton: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ElevatedButton(
onPressed: () => am.increaseby1(),
child: const Icon(Icons.plus_one),
),
ElevatedButton(
onPressed: () => am.decreaseby1(),
child: const Icon(Icons.remove),
),
ElevatedButton(
onPressed: () => am.changeTitle(),
child: const Icon(Icons.change_circle),
),
],
),
);
}
@override
get config => HomeController(HomeModel());
}
The second step ==> Creating State dart file 'home_state.dart' and adding this code
class HomeState {
int number = 0;
String title = 'hello';
}
The third step ==> Creating Controller dart file 'home_controller.dart' and adding this code
Easily if you installed the extension you can write amcont then choose the snippet code and fill the fields
class HomeController extends AmController<HomeState> {
HomeController(super.state);
void increaseby1() {
state.number++;
refresh();
}
void decreaseby1() {
state.number--;
refresh();
}
void changeTitle() {
state.title = '${state.title} Hi;\n';
refresh();
}
// use the command 'refresh();' inside functions to update the view widget
// ---------------------------------------------------------------------------
@override
void onDispose() {}
@override
void onInit() {}
}
And that is all you need to do to create a page in well-organized clean code
To Send And Get data by AmChannel in the whole app
To create a channel and save data in it
AmChannel<String>.of('/home/adminName').amSend = 'Amr Mostafa';
To get the last value saved in a channel
print(AmChannel<String>.of('/home/adminName').amGet);
To get the last previous value saved in a channel
print(AmChannel<String>.of('/home/adminName').amGetPrevious);
To Delete the channel
AmChannel.of('/home/adminName').delete();
For inner widgets working and AmDataProvider and AmRefreshWidget
To initialize data provider:
final dataProvider = AmDataProvider<int>(
initialData: 0,
providerId: 'providerId',
);
dataProvider.initialize; // you need to use this if you want to access the provider with its id instead of its name at first time.
// OR
final dataProvider = AmDataProvider<int>();
// You can't access this with id and dying if disposed.
// You can only access this with its name ex:[dataProvider] if still alive.
// if you added a providerId the provider won't die.
To get data anywhere after initializing the provider:
int? num = AmDataProvider<int>.of('providerId').data;
To Refresh widgets if data changed:
class Example extends StatelessWidget {
const Example({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
child: AmRefreshWidget<int>(
amDataProvider: AmDataProvider<int>.of('providerId'),
builder: (ctx, value) {
return Text('$value');
},
),
);
}
}
Note: you could use one provider for multiple (AmRefreshWidget)s
To change the provider data without refresh states:
dataProvider.silentDataSet = dataProvider.data! + 1;
// OR
AmDataProvider<String>.of('providerId').silentDataSet = 'any data';
To change provider data with refresh states:
dataProvider.data = dataProvider.data! + 1;
// OR
AmDataProvider<String>.of('providerId').data = 'Some Data';
To instantinously excute some code and then refresh states:
dataProvider.activeFunction = () {
//...Some Code....instantinously invoked then states refreshed
};
// OR
AmDataProvider<String>.of('providerId').activeFunction = () {
//...Some Code....instantinously invoked then states refreshed
};
To compare the data in the provider with data just before the last change:
if(dataProvider.data == dataProvider.previousData){
//...Some Code...
}else{
//...Some Code...
}
To save and get data using AmMemory (Data go out when the program is closed):
This feature is just to make data accessing more easier in the whole program files.
/// To save an object
object.amSave(id);
'Amr Mostafa'.amSave('userName123'); // Example
/// To get the saved object if null the defaultObject is Returned
/// Note: the saved object and the default object must be in the same type
var data = defaultObject.amGet(id);
var userName = 'Not found'.amGet('userName123'); //Example
/// OR you can get saved data in that way
/// Null is Returned if none is saved.
var data = AmMemory.amGetIfSaved<DataType>(id);
var userName = AmMemory.amGetIfSaved<String>('userName123') ?? 'Not found'; // Example
To initialize function trigger:
final listener = AmFunctionTrigger<int>(
amDataProvider: AmDataProvider<int>.of('providerId'),
function: (value){ ... some code ... }
);
listener.start; // You need to use this line anywhere
To cancel function trigger listening:
listener.cancel();
To reactivate the listener:
listener.activate();
To control the AmRefreshWidget and adding states to it:
child: AmRefreshWidget<int>(
amDataProvider: dataProvider,
builder: (ctx, value) {
/// This controller you may send as a parameter anyway but you have rarely to do this_
/// Because the [AmDataProvider] may do the same goal.
var controller = AmRefreshWidgetController.of(ctx);
/// When this code block is called this variable will have the last value.
/// if it is the frist time to call this code, this variable will have 5 as initial value.
var intState = controller.statePoint<int>(id: 1, initialValue: 5);
///Dummy Code to use the statePoint variable.
intState.value = value! * (intState.value);
return Text('${intState.value}');
},
),