flutter pub add okito基于插件公开信息、社区数据与项目使用情况整理的选型参考。
Okito 是一个全面的 Flutter 工具包，旨在通过整合状态管理、导航、本地化、依赖注入和本地存储等核心功能来简化开发流程。它作为 Flutter 开发者的一站式助手，减少了样板代码并提升了代码组织性。凭借直观的 API，Okito 简化了常见任务，使应用开发更快速，同时不牺牲灵活性或性能。其模块化设计允许开发者仅使用所需组件。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
Q: What should I do to make it work?
A: Just create a regular class and extend OkitoController, if you want to change the state, call update() or setState()
Q: How does these methods notify the state?
A: They have a conversation between themselves, whenever you call these methods, the notifier checks all the builders, if they are watching, they will be re-built. So the scheme is;
Model -> Controller -> Model
View -> Controller -> View
The controller is the root of them.
class CounterController extends OkitoController {
int count = 0;
void increment() => setState(() => count++);
void decrement() {
count--;
update();
}
}
CounterController counterController = CounterController();
You can also use setStateAsync function to update data asynchronously.
// That simple!
OkitoBuilder(
controller: counterController,
builder: () => Text('${counterController.count}'),
);
main(){
// You can change state from anywhere without context!
counterController.increment();
}
// In Flutter
ElevatedButton(
onPressed: counterController.increment,
child: const Text('Increment'),
)
// Or
ElevatedButton(
onPressed: () => counterController
.setState(() => counterController.count--),
child: const Text('Decrement'),
)
Rockitos are our way to use state management with dependency injection!
If you don't know what is dependency injection, read Dependency Injection Guide first.
// Rockito - My favorite way to use Okito state.
Rockito<CounterController>(
(controller) => Text('${controller.count}')
);
// Isn't it simple ?
// To use _Rockito_, you should first inject the CounterController.
Okito.inject(CounterController);
// RockitoBuilder - Rockito but with more features and builder!
RockitoBuilder<CounterController>(
inject: CounterController(), // optionally, if you didn't inject it yet.
builder: (controller) => Text('${controller.count}'),
// You can use all of OkitoBuilder features here like otherControllers and etc.
);
OkitoWatcher(
watch: counterController,
onChange: (CounterController controller) {
// You can also update the state there.
// onChange gives to you is the instance of controller.
print(controller.count);
},
);
counterController.increment();
// OkitoWatcher also returns a function that stops watching which
// reduces the memory usage, you can use it when your usage ends.
final stopWatching = OkitoWatcher(/* code here */);
// do what you want to do while watching, then:
stopWatching();
// You can also watch with Rockitos.
RockitoWatcher<CounterController>(
(controller) => print(controller.count))
// You have to inject the controller first.
State methods are methods like the State class of Flutter.
class CounterController extends OkitoController{
int count = 0;
// This will be called whenever your [OkitoBuilder] is mounted
// to the widget tree.
@override
void initState() {
count++;
}
// This will be called whenever your [OkitoBuilder] is removed
// from the widget tree.
@override
void dispose() {
count = 0;
}
// This method will only be called when you use inject method of Okito.
@override
void onInject() {
count++;
}
}
I personally use State Methods when I use controllers as StatefulWidget replacers.
Example:
class EditProductController extends OkitoController {
// other nodes here
final priceFocusNode = FocusNode();
void submitForm(){
// I use my inputControllers here to get their values.
// then I use my Okito routing without context!
Okito.pushNamed('/productUpdatedSuccessfully/31')
}
@override
void dispose() {
// other nodes here to [dispose].
priceFocusNode.dispose();
}
}
You might have streams in your app and you might want to watch them, update state on changes etc.
This streams can also be Firestore streams, you can use it, too.
You might want to check examples folder for an example of it.
Firstly, we have to use OkitoStreamMixin
class YourController extends OkitoController with OkitoStreamMixin{
// your code, totally same.
}
// For regular streams.
class CounterController extends OkitoController with OkitoStreamMixin {
int count = 0;
@override
void onInject(){
initStream<int>(stream: yourIntStream, onData(data) {
count = data; // You don't need to do anything or update.
});
}
}
// For Firestore query stream
// To use, you have to get the snapshot as Stream of query.
class PeopleController extends OkitoController with OkitoStreamMixin {
List<Person> people = [];
@override // Alternatively, you can use the constructor.
void onInject(){
initFirestoreQueryStream(querySnapshot: querySnapshot, onData(data) {
// This data is a list of documents(it is a map) of your collection.
people = data;
});
}
}
// For Firestore query stream
// To use, you have to get the snapshot as Stream of query.
class PersonController extends OkitoController with OkitoStreamMixin{
Person person = Person();
@override // Alternatively, you can use the constructor.
void onInject(){
initFirestoreDocumentStream(
documentSnapshot: documentSnapshot,
onData(data) {
// This data is your document as map.
person = Person.fromMap(data);
});
}
}
// Basically, you should add *Okito* to the beginning of your app or provide key/observers manually.
OkitoMaterialApp(/* Everything is same with [MaterialApp] */);
// Or
OkitoCupertinoApp(/* Everything is same with [CupertinoApp] */);
// Or
Material/CupertinoApp(
navigatorKey: Okito.navigatorKey,
navigatorObservers: [OkitoObserver()]);
All of the properities has same usages with its long usage
For example: Okito.pushNamed('/secondPage') = Navigator.of(context).pushNamed('secondPage')
Okito.width;
Okito.height;
Okito.aspectRatio;
Okito.devicePixelRatio;
Okito.isLandscape;
Okito.isPortrait;
Okito.theme;
Okito.showSnackBar();
Okito.showToast(); // Snackbar without widget, usefull for simple usage.
Okito.showModal();
Okito.showDialog();
Okito.push();
Okito.pushReplacement();
Okito.pushNamed();
Okito.pushReplacementNamed();
Okito.pop();
Okito.arguments;
Okito.routeName;
/posts/:id
/posts/23
And this id is a dynamic variable, right?
With Okito, you can do that easily!
// You don't need to add something like OkitoPage or etc.
// Okito lets you do your job without code changes.
OkitoMaterialApp(
routes: {
'/': (ctx) => FirstPage(),
'/second/:id': (ctx) => SecondPage(),
}
);
Now, whenever you try this:
ElevatedButton(
onPressed: () => Okito.pushNamed(
// You can add any kind of arguments
'/second/33?name=Rago&postId=123&isMaterial=true',
arguments: 'This is an extra argument'),
child: const Text('Go to second page'),
)
It will push to second page with the argument [id] : [33]
Moreover, you will see your arguments like this:
print(Okito.arguments);
// result
{'id' : '33', 'name' : 'Rago', 'postId' : 123, 'isMaterial' : true, 'arguments': 'This is an extra argument'};
// Yes, you can even get extra arguments manually.
Check example/flutter_dynamic_routing/lib/main.dart for a live example.
// Firstly, the bottom method gives you the app controller, you can update anything manually.
Okito.app; /* or */ Okito.use<AppController>();
// Then you have all of its usages.
Okito.app.setThemeData();
Okito.app.setThemeMode();
Okito.app.setCupertinoThemeData();
Okito.app.locale;
Okito.app.setLocale();
// To use, you should init the storage, it is not required for web but required for all other platforms.
void main() async{
// Only init is asynchronous, you can also call without await but it is not recommended.
await OkitoStorage.init();
// Usage
final box = OkitoStorage; // For easier reference.
box.write('count', 0);
final int count = box.read<int>('count');
// Simple as this!
print('Count is $count');
// Rest of your code will be here.
}
Other Usages
box.watchKey('count', () =>
print('This function will be called whenever the count changes.');
);
box.watchAll(() =>
print('This function will be called whenever the storage changes.');
);
box.removeKey('count'); // Removes the key
box.readAllKeys(); // returns all keys in storage
box.readAllValues(); // returns all values in storage
box.readAll(); // returns all of the storage
box.clearStorage(); // removes everything from the storage but storage will still exists.
box.deleteStorage(); // removes the storage from file system completely, after this operation, OkitoStorage won't be able to write or read.
// Check the example/flutter_okito_storage/lib/main.dart for more examples!
// It will run whenever key 'count' changes.
OkitoBuilder(
controller: yourController,
watchStorageKeys: ['count'],
builder: () => Text('${box.read('count')}'),
);
For global apps, it might be hard to find a new library for localization or creating your own, then you will probably have another problems like updating the whole app after language change and etc. Why would you do that?
// It is also so simple to have!
// Firstly create your translations like this:
const translations = {
'en': {
'hello': 'Hello from Okito!',
},
'tr': {
'hello': "Okito'dan selamlar!",
},
};
// You can have unlimited amount of locales and translations
// You can make it dynamic, seperate files and etc. It is just a dart map!
// After creating it, give it to the app.
OkitoMaterialApp /* or OkitoCupertinoApp */(
translations: translations,
/* Your code here without any change */);
// Using it? It is the simplest! Lets use it in a text widget.
Text('hello'.loc); // It will show 'Hello from Okito!'
// Lets change the language and see it again.
Okito.app.setLocale(Locale('tr','TR'));
// Now it says: 'Okito'dan selamlar!' as it is declared in translations.
// You can also set it like this;
Okito.localize('hello'); // returns the translation as String.
For better examples check example/flutter_localization/lib/main.dart
// Context Extensions
context.width;
context.height;
context.aspectRatio;
context.devicePixelRatio;
context.isLandscape;
context.isPortrait;
context.theme;
context.arguments;
context.routeName;
// Example Variable
class Counter(){
count = 0;
}
// Inject it
Okito.inject(Counter());
// Use it anywhere!
Okito.use<Counter>();
// Asign it with type support!
final counter = Okito.use<Counter>();
// Update however you want
counter.count++;
// or
Okito.use<Counter>().count++;
Soo, lets say that your job is done with that class, why would we let it to use memory?
// Counter will be gone forever!
Okito.eject<Counter>();
It is useful when you want to storage with a String key instead of type which gives you advantage of multiple injects with same type.
// Example Variable
class Counter(){
count = 0;
}
// Inject it
Okito.injectWithKey('firstCounter',Counter());
Okito.injectWithKey('secondCounter',Counter());
// Use it anywhere with type support!
final firstCounter = Okito.useWithKey<Counter>('firstCounter');
final secondCounter = Okito.useWithKey<Counter>('secondCounter');
// Update however you want
firstCounter.count++;
secondCounter.count++;
Soo, lets say that your job is done with that class, why would we let it to use memory?
// Second counter will be gone forever!
Okito.ejectWithKey('secondCounter');
// In your widgets folder or any other folder, declare builder.
OkitoBuilder CounterBuilder({
required Widget Function() builder,
}) =>
OkitoBuilder(
controller: counterController,
builder: () => builder(),
);
// Usage
CounterBuilder(builder: () => Text('${counterController.count}'));
My Favorite Way
OkitoBuilder CounterBuilder({
required Widget Function(CounterController state) builder,
}) =>
OkitoBuilder(
controller: counterController,
builder: () => builder(counterController),
);
// Usage
CounterBuilder(builder: (state) => Text('${state.count}'));
class CounterController extends OkitoController {
int _count = 0;
int get count => _count;
set count(int count) {
_count = count;
// Now, whenever you change count like 'count++', it will update state.
update();
}
}
It is the controller of app, you can wrap your widgets that you want to change on big updates like theme changes if the data you wrote is not coming from a controller.
Rockito<AppController>(
(app) => // yourWidget
)
依赖清单 1 项
^2.0.11暂无相关数据。