Showing
1 changed file
with
77 additions
and
41 deletions
@@ -71,7 +71,7 @@ No, you just need to play this variable inside an Obx widget. | @@ -71,7 +71,7 @@ No, you just need to play this variable inside an Obx widget. | ||
71 | Obx (() => Text (controller.name)); | 71 | Obx (() => Text (controller.name)); |
72 | ``` | 72 | ``` |
73 | 73 | ||
74 | -What do you need to memorize? "Obx(() =>" You are just passing that widget through an arrow-function into an Obx. Obx is smart, and will only be changed if the value of name is changed. If name is "John" and you change it to "John", it will not have any changes on the screen, and Obx will simply ignore this change, and will not rebuild the widget, to save resources. Isn't that amazing? | 74 | +What do you need to memorize? Only `Obx(() =>`. You are just passing that widget through an arrow-function into an Obx. Obx is smart, and will only be changed if the value of name is changed. If name is "John" and you change it to "John", it will not have any changes on the screen, and Obx will simply ignore this change, and will not rebuild the widget, to save resources. Isn't that amazing? |
75 | 75 | ||
76 | What if I have 5 observable variables within an Obx? It will update when any of them are changed. And if I have 30 variables in a class, when I update one, will it update all variables that are in that class? No, just the specific widget that uses that variable. | 76 | What if I have 5 observable variables within an Obx? It will update when any of them are changed. And if I have 30 variables in a class, when I update one, will it update all variables that are in that class? No, just the specific widget that uses that variable. |
77 | 77 | ||
@@ -91,43 +91,67 @@ Maximum performance: In addition to having a smart algorithm for minimal reconst | @@ -91,43 +91,67 @@ Maximum performance: In addition to having a smart algorithm for minimal reconst | ||
91 | 91 | ||
92 | The state only changes if the values change. That's the main difference between Get, and using Computed from MobX for example. When joining two observables, when one is changed, the hearing of that observable will change. With Get, if you join two variables (which is unnecessary computed for that), GetX (similar to Observer) will only change if it implies a real change of state. | 92 | The state only changes if the values change. That's the main difference between Get, and using Computed from MobX for example. When joining two observables, when one is changed, the hearing of that observable will change. With Get, if you join two variables (which is unnecessary computed for that), GetX (similar to Observer) will only change if it implies a real change of state. |
93 | 93 | ||
94 | -### Usage | 94 | +### Declaring a reactive variable |
95 | 95 | ||
96 | You have 3 ways to turn a variable into an observable. | 96 | You have 3 ways to turn a variable into an observable. |
97 | The first is using Rx{Type}. | 97 | The first is using Rx{Type}. |
98 | 98 | ||
99 | ```dart | 99 | ```dart |
100 | -var count = RxString(); | 100 | +// initial value is recommended but not mandatory |
101 | +final name = RxString(''); | ||
102 | +final isLogged = RxBool(false); | ||
103 | +final count = RxInt(0); | ||
104 | +final balance = RxDouble(0.0); | ||
105 | +final number = RxNum(0) // in case you don't remember num is a dart type that accepts doubles and integers | ||
106 | +final items = RxList<String>([]); | ||
107 | +final myMap = RxMap<String, int>({}); | ||
101 | ``` | 108 | ``` |
102 | 109 | ||
103 | The second is to use Rx and type it with `Rx<Type>` | 110 | The second is to use Rx and type it with `Rx<Type>` |
104 | 111 | ||
105 | ```dart | 112 | ```dart |
106 | -var count = Rx<String>(); | 113 | +final name = Rx<String>(''); |
114 | +final isLogged = Rx<Bool>(false); | ||
115 | +final count = Rx<Int>(0); | ||
116 | +final balance = Rx<Double>(0.0); | ||
117 | +final number = Rx<Num>(0) | ||
118 | +final items = Rx<List<String>>([]); | ||
119 | +final myMap = Rx<Map<String, int>>({}); | ||
120 | + | ||
121 | +// Custom classes - it can be any class, literally | ||
122 | +final user = Rx<User>(); | ||
107 | ``` | 123 | ``` |
108 | 124 | ||
109 | The third, more practical and easier approach, is just to add an .obs to your variable. | 125 | The third, more practical and easier approach, is just to add an .obs to your variable. |
110 | 126 | ||
111 | ```dart | 127 | ```dart |
112 | -var count = 0.obs; | 128 | +final name = ''.obs; |
129 | +final isLogged = false.obs; | ||
130 | +final count = 0.obs; | ||
131 | +final balance = 0.0.obs; | ||
132 | +final number = 0.obs; | ||
133 | +final items = <String>[]; | ||
134 | +final myMap = <String, int>{}; | ||
113 | 135 | ||
114 | -// or Rxint count = 0.obs; | ||
115 | -// or Rx<int> count = 0.obs; | 136 | +// Custom classes - it can be any class, literally |
137 | +final user = User().obs; | ||
116 | ``` | 138 | ``` |
117 | 139 | ||
118 | As we know, Dart is now heading towards null safety. Since that it is a good idea, from now on, you should start to use your variables always with an initial value. Transforming a variable into an observable with an initial value with Get is the simplest and most practical approach. You will literally add a ".obs" to the end of your variable, and that’s it, you’ve made it observable, and its value will be the initial value. | 140 | As we know, Dart is now heading towards null safety. Since that it is a good idea, from now on, you should start to use your variables always with an initial value. Transforming a variable into an observable with an initial value with Get is the simplest and most practical approach. You will literally add a ".obs" to the end of your variable, and that’s it, you’ve made it observable, and its value will be the initial value. |
119 | 141 | ||
120 | You can add variables, and if you want to type your widget to get your controller inside, you just need to use GetX widget instead of Obx | 142 | You can add variables, and if you want to type your widget to get your controller inside, you just need to use GetX widget instead of Obx |
121 | 143 | ||
122 | -### Example | 144 | +### Using the values in the view |
123 | 145 | ||
124 | ```dart | 146 | ```dart |
147 | +// controller file | ||
125 | final count1 = 0.obs; | 148 | final count1 = 0.obs; |
126 | final count2 = 0.obs; | 149 | final count2 = 0.obs; |
127 | int get sum => count1.value + count2.value; | 150 | int get sum => count1.value + count2.value; |
128 | ``` | 151 | ``` |
129 | 152 | ||
130 | ```dart | 153 | ```dart |
154 | +// view file | ||
131 | GetX<Controller>( | 155 | GetX<Controller>( |
132 | builder: (controller) { | 156 | builder: (controller) { |
133 | print("count 1 rebuild"); | 157 | print("count 1 rebuild"); |
@@ -197,7 +221,7 @@ Without decorations, without a code generator, without complications :smile: | @@ -197,7 +221,7 @@ Without decorations, without a code generator, without complications :smile: | ||
197 | Do you know Flutter's counter app? Your Controller class might look like this: | 221 | Do you know Flutter's counter app? Your Controller class might look like this: |
198 | 222 | ||
199 | ```dart | 223 | ```dart |
200 | -class CountCtl extends GetxController { | 224 | +class CountController extends GetxController { |
201 | final count = 0.obs; | 225 | final count = 0.obs; |
202 | } | 226 | } |
203 | ``` | 227 | ``` |
@@ -205,70 +229,82 @@ class CountCtl extends GetxController { | @@ -205,70 +229,82 @@ class CountCtl extends GetxController { | ||
205 | With a simple: | 229 | With a simple: |
206 | 230 | ||
207 | ```dart | 231 | ```dart |
208 | -ctl.count.value++ | 232 | +controller.count.value++ |
209 | ``` | 233 | ``` |
210 | 234 | ||
211 | You could update the counter variable in your UI, regardless of where it is stored. | 235 | You could update the counter variable in your UI, regardless of where it is stored. |
212 | 236 | ||
213 | ### Where .obs can be used | 237 | ### Where .obs can be used |
214 | 238 | ||
215 | -You can transform anything on obs: | 239 | +You can transform anything on obs. Here are two ways of doing it: |
216 | 240 | ||
241 | +* You can convert your class values to obs | ||
217 | ```dart | 242 | ```dart |
218 | class RxUser { | 243 | class RxUser { |
219 | final name = "Camila".obs; | 244 | final name = "Camila".obs; |
220 | final age = 18.obs; | 245 | final age = 18.obs; |
221 | } | 246 | } |
222 | - | ||
223 | -class User { | ||
224 | - User({String name, int age}); | ||
225 | - final rx = RxUser(); | ||
226 | - | ||
227 | - String get name => rx.name.value; | ||
228 | - set name(String value) => rx.name.value = value; | ||
229 | - | ||
230 | - int get age => rx.age.value; | ||
231 | - set age(int value) => rx.age.value = value; | ||
232 | -} | ||
233 | ``` | 247 | ``` |
234 | 248 | ||
249 | +* or you can convert the entire class to be an observable | ||
235 | ```dart | 250 | ```dart |
236 | - | ||
237 | -void main() { | ||
238 | - final user = User(); | ||
239 | - print(user.name); | ||
240 | - user.age = 23; | ||
241 | - user.rx.age.listen((int age) => print(age)); | ||
242 | - user.age = 24; | ||
243 | - user.age = 25; | 251 | +class User { |
252 | + User({String name, int age}); | ||
253 | + var name; | ||
254 | + var age; | ||
244 | } | 255 | } |
245 | -___________ | ||
246 | -out: | ||
247 | -Camila | ||
248 | -23 | ||
249 | -24 | ||
250 | -25 | ||
251 | 256 | ||
257 | +// when instantianting: | ||
258 | +final user = User(name: "Camila", age: 18).obs; | ||
252 | ``` | 259 | ``` |
253 | 260 | ||
254 | ### Note about Lists | 261 | ### Note about Lists |
255 | 262 | ||
256 | Lists are completely observable as are the objects within it. That way, if you add a value to a list, it will automatically rebuild the widgets that use it. | 263 | Lists are completely observable as are the objects within it. That way, if you add a value to a list, it will automatically rebuild the widgets that use it. |
257 | 264 | ||
258 | -You also don't need to use ".value" with lists, the amazing dart api allowed us to remove that, unfortunate primitive types like String and int cannot be extended, making the use of .value mandatory, but that won't be a problem if you work with gets and setters for these. | 265 | +You also don't need to use ".value" with lists, the amazing dart api allowed us to remove that. |
266 | +Unfortunaly primitive types like String and int cannot be extended, making the use of .value mandatory, but that won't be a problem if you work with gets and setters for these. | ||
259 | 267 | ||
260 | ```dart | 268 | ```dart |
269 | +// On the controller | ||
261 | final String title = 'User Info:'.obs | 270 | final String title = 'User Info:'.obs |
262 | final list = List<User>().obs; | 271 | final list = List<User>().obs; |
263 | -``` | ||
264 | 272 | ||
265 | -```dart | ||
266 | -Text(title.value), // String need to have .value in front of it | 273 | +// on the view |
274 | +Text(controller.title.value), // String need to have .value in front of it | ||
267 | ListView.builder ( | 275 | ListView.builder ( |
268 | - itemCount: list.length // lists don't need it | 276 | + itemCount: controller.list.length // lists don't need it |
269 | ) | 277 | ) |
270 | ``` | 278 | ``` |
271 | 279 | ||
280 | +When you are making your own classes observable, there is a different way to update them: | ||
281 | + | ||
282 | +```dart | ||
283 | +// on the model file | ||
284 | +// we are going to make the entire class observable instead of each attribute | ||
285 | +class User() { | ||
286 | + User({this.name = '', this.age = 0}); | ||
287 | + String name; | ||
288 | + int age; | ||
289 | +} | ||
290 | + | ||
291 | + | ||
292 | +// on the controller file | ||
293 | +final user = User().obs; | ||
294 | +// when you need to update the user variable: | ||
295 | +user.update( (user) { // this parameter is the class itself taht you want to update | ||
296 | +user.name = 'Jonny'; | ||
297 | +user.age = 18; | ||
298 | +}); | ||
299 | +// an alternative way of update the user variable: | ||
300 | +user(User(name: 'João', age: 35)); | ||
301 | + | ||
302 | +// on view: | ||
303 | +Obx(()=> Text("Name ${user.value.name}: Age: ${user.value.age}")) | ||
304 | +// you can also access the model values without the .value: | ||
305 | +user().name; // notice that is the user variable, not the class (variable has lowercase u) | ||
306 | +``` | ||
307 | + | ||
272 | You don't have to work with sets if you don't want to. you can use the "assign 'and" assignAll "api. | 308 | You don't have to work with sets if you don't want to. you can use the "assign 'and" assignAll "api. |
273 | The "assign" api will clear your list, and add a single object that you want to start there. | 309 | The "assign" api will clear your list, and add a single object that you want to start there. |
274 | The "assignAll" api will clear the existing list and add any iterable objects that you inject into it. | 310 | The "assignAll" api will clear the existing list and add any iterable objects that you inject into it. |
-
Please register or login to post a comment