Nipodemos

done in english README

@@ -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.