|
| 1 | +[](https://pub.dartlang.org/packages/june) |
| 2 | + |
| 3 | + |
| 4 | + |
| 5 | +# June |
| 6 | +[](https://discord.gg/zXXHvAXCug) |
| 7 | +[](https://open.kakao.com/o/gEwrffbg) |
| 8 | + |
| 9 | +The main reason you need a state management library in Flutter is because managing state changes or sharing states from the outside is difficult with the native Flutter state management. However, many state management libraries deviate from their original purpose and end up containing much more code, attempting to control the app development pattern itself. We need a state management library that stays true to its original purpose without straying too far from the native Flutter state management. |
| 10 | + |
| 11 | +June is a lightweight and modern state management library that focuses on providing a pattern very similar to Flutter's native state management. |
| 12 | + |
| 13 | +## Features |
| 14 | + |
| 15 | +- ✨ **Native Flutter State Pattern**: By adopting the native Flutter state management pattern, you can declare variables and manage them with setState, facilitating an easy transition to app-level scalability. |
| 16 | +- 🦄 **No Widget Modification Required**: Use MaterialApp, StatelessWidget, and StatefulWidget as is, with no changes needed for enhanced state management. |
| 17 | +- 🚀 **No State Initialization**: Simplifies Flutter app development by automatically setting up state management, eliminating manual initialization, and reducing boilerplate. This approach ensures a cleaner, more maintainable codebase and a quicker start to development. |
| 18 | + |
| 19 | +## Usage |
| 20 | +1. Declare the states. |
| 21 | +```dart |
| 22 | +class CounterVM extends JuneState { |
| 23 | + int count = 0; |
| 24 | +} |
| 25 | +``` |
| 26 | +2. The state management wraps the widget(or page) to be managed with JuneBuilder.(You can place it in multiple locations.) |
| 27 | +```dart |
| 28 | +JuneBuilder( |
| 29 | + () => CounterVM(), |
| 30 | + builder: (vm) => Column( |
| 31 | + mainAxisAlignment: MainAxisAlignment.center, |
| 32 | + children: <Widget>[ |
| 33 | + Text('${vm.count}' |
| 34 | + ), |
| 35 | + ], |
| 36 | + ), |
| 37 | +) |
| 38 | +``` |
| 39 | + |
| 40 | +3. Update the states using the setState method. |
| 41 | +```dart |
| 42 | +// You can call state from anywhere. |
| 43 | +var state = June.getState(CounterVM()); |
| 44 | +state.count++; |
| 45 | +
|
| 46 | +state.setState(); |
| 47 | +``` |
| 48 | + |
| 49 | +4. That's All! |
| 50 | + |
| 51 | + |
| 52 | + |
| 53 | +#### Example |
| 54 | +```dart |
| 55 | +import 'package:flutter/material.dart'; |
| 56 | +import 'package:june/june.dart'; |
| 57 | +
|
| 58 | +void main() => runApp(const MyApp()); |
| 59 | +
|
| 60 | +class MyApp extends StatelessWidget { |
| 61 | + const MyApp({super.key}); |
| 62 | +
|
| 63 | + @override |
| 64 | + Widget build(BuildContext context) { |
| 65 | + return MaterialApp( |
| 66 | + home: Scaffold( |
| 67 | + body: Center( |
| 68 | + child: JuneBuilder( |
| 69 | + () => CounterVM(), |
| 70 | + builder: (vm) => Column( |
| 71 | + mainAxisAlignment: MainAxisAlignment.center, |
| 72 | + children: <Widget>[ |
| 73 | + const Text('You have pushed the button this many times:'), |
| 74 | + Text( |
| 75 | + '${vm.count}', |
| 76 | + style: Theme.of(context).textTheme.headlineMedium, |
| 77 | + ), |
| 78 | + ], |
| 79 | + ), |
| 80 | + ), |
| 81 | + ), |
| 82 | + floatingActionButton: const FloatingActionButton( |
| 83 | + onPressed: incrementCounter, |
| 84 | + tooltip: 'Increment', |
| 85 | + child: Icon(Icons.add), |
| 86 | + ), |
| 87 | + ), |
| 88 | + ); |
| 89 | + } |
| 90 | +} |
| 91 | +
|
| 92 | +void incrementCounter() { |
| 93 | + // You can call state from anywhere. |
| 94 | + var state = June.getState(CounterVM()); |
| 95 | + state.count++; |
| 96 | +
|
| 97 | + state.setState(); |
| 98 | +} |
| 99 | +
|
| 100 | +class CounterVM extends JuneState { |
| 101 | + int count = 0; |
| 102 | +} |
| 103 | +
|
| 104 | +``` |
| 105 | + |
| 106 | +## Advance |
| 107 | +### Object State Management |
| 108 | +June offers the ability to create multiple instances of declared states as objects. This feature is extremely useful for managing different data in repetitive formats, such as feed content. |
| 109 | + |
| 110 | +Simply add a tag to JuneBuilder and June.getState to utilize this functionality. |
| 111 | + |
| 112 | +#### Example |
| 113 | +```dart |
| 114 | +import 'package:flutter/material.dart'; |
| 115 | +import 'package:june/june.dart'; |
| 116 | +
|
| 117 | +void main() => runApp(const MyApp()); |
| 118 | +
|
| 119 | +class MyApp extends StatelessWidget { |
| 120 | + const MyApp({super.key}); |
| 121 | +
|
| 122 | + @override |
| 123 | + Widget build(BuildContext context) { |
| 124 | + return MaterialApp( |
| 125 | + home: Scaffold( |
| 126 | + body: Center( |
| 127 | + child: Column( |
| 128 | + mainAxisAlignment: MainAxisAlignment.center, |
| 129 | + children: <Widget>[ |
| 130 | + JuneBuilder( |
| 131 | + () => CounterVM(), |
| 132 | + builder: (vm) => Column( |
| 133 | + children: [ |
| 134 | + const Text('Basic instance counter'), |
| 135 | + Text( |
| 136 | + '${vm.count}', |
| 137 | + style: Theme.of(context).textTheme.headlineMedium, |
| 138 | + ), |
| 139 | + ], |
| 140 | + ), |
| 141 | + ), |
| 142 | + JuneBuilder( |
| 143 | + () => CounterVM(), |
| 144 | + tag: "SomeId", |
| 145 | + builder: (vm) => Column( |
| 146 | + children: [ |
| 147 | + const Text('Object instance counter created with tags'), |
| 148 | + Text( |
| 149 | + '${vm.count}', |
| 150 | + style: Theme.of(context).textTheme.headlineMedium, |
| 151 | + ), |
| 152 | + ], |
| 153 | + ), |
| 154 | + ), |
| 155 | + ], |
| 156 | + ), |
| 157 | + ), |
| 158 | + floatingActionButton: const Stack( |
| 159 | + children: <Widget>[ |
| 160 | + Positioned( |
| 161 | + right: 0, |
| 162 | + bottom: 80, |
| 163 | + child: FloatingActionButton.extended( |
| 164 | + onPressed: increaseBasicInstance, label: Text("Increase basic instance"))), |
| 165 | + Positioned( |
| 166 | + right: 0, |
| 167 | + bottom: 10, |
| 168 | + child: FloatingActionButton.extended( |
| 169 | + onPressed: increaseObjectInstanceCreatedWithTags, label: Text("Increase object instance created with tags"))), |
| 170 | + ], |
| 171 | + ), |
| 172 | + ), |
| 173 | + ); |
| 174 | + } |
| 175 | +} |
| 176 | +
|
| 177 | +void increaseBasicInstance() { |
| 178 | + var state = June.getState(CounterVM()); |
| 179 | + state.count++; |
| 180 | + state.setState(); |
| 181 | +} |
| 182 | +
|
| 183 | +void increaseObjectInstanceCreatedWithTags() { |
| 184 | + var state = June.getState(CounterVM(), tag: "SomeId"); |
| 185 | + state.count++; |
| 186 | + state.setState(); |
| 187 | +} |
| 188 | +
|
| 189 | +class CounterVM extends JuneState { |
| 190 | + int count = 0; |
| 191 | +} |
| 192 | +``` |
| 193 | + |
| 194 | + |
| 195 | + |
| 196 | + |
| 197 | + |
| 198 | + |
| 199 | + |
| 200 | + |
| 201 | + |
0 commit comments