GteX Tutorial - Udemy

GetX is one of the most popular state management solution in flutter. In addition to state management, GetX provides easy way to manage page routes.

YouTube

Video on YouTube

For JSON Viewer Pro

0. GetX
1. Navigation
2. State Management
3. GetX Controller
4. Dependency Management
5. Translation
6. Themes
7. GetXService & GetView
8. GetWidget
9. GetConnect
10. GetX Pattern
11. Utils

JSON files are hosted by jsonkeeper

Table of Contents

No.	Name	Contents	Screenshots
1	Navigation	Get.to() Get.back() Get.off() Get.ofAll() Get.toNamed() Get.offNamed() Get.offAllNamed()
2	Reactive State Management	final name = ''.obs; final isLogged = false.obs; final count = 0.obs; final balance = 0.0.obs; final number = 0.obs; final items = [].obs; final myMap = {}.obs; Obx(() =>Text('${count.value}')); onPressed: () => increment()
3	Simple State Management	class Controller extends GetxController {} static Controller get to => Get.find(); update(); GetBuilder() init: Controller(), builder: (controller) => Text('${controller.counter}')
4	Reactive State Controller	GetX() init: Controller(), builder: (controller) => Text() In 'Controller' class: final count = 0.obs;    void increment() {      count.value++;    }    void clearCount() {      count.value = 0;    }    void onInit() { {      super.onInit();      ever(count, (_));      everAll([count], (_));      once(count, (_));      debounce(count, (_));      interval(count, (_))    }
5	Simple State Controller	final controller = Get.put(Controller()); GetBuilder() id: 'count1', builder: (controller) =>Text() In 'Controller' class: int count = 0;    void increment() {      count++;      update();    }    void clearCount() {      count = 0;      update();    }
6	Dependency Management	Instancing methods   Get.put()   Get.lazyPut()   Get.putAsync()   Get.create()   Get.delete() Find controller   final controller = Get.find< Controller>();   Controller controller = Get.find(); Alternate controller   Get.replace()   Get.lazyReplace() Binding   void dependency(){}   Named route > getPages > BindingBuilder() > void Function   Named route   initialBinding SmartManagement   ✰ full   onlyBuilder   keepFactory
7	Internationalization	Custom class   @override   Map< String, Map< String, String>> get keys tr > Text('key'.tr) @key > trParams({'key':'value'}) translations   Custom class that extends Translations locale   Locale()   Get.deviceLocale()   Get.updateLocale() fallbackLocale   Locale()
8	Change Theme	void main() async {   await GetStorage.init();   runApp(const MyApp()); } Create theme file Config lightTheme & darkTheme Change theme dynamically   Get.isDarkMode > bool   Get.changeThemeMode()   Get.changeTheme() Store them in local storage   GetStorage() > read() & write()
9	GetX Service & GetView	void main() async {   WidgetsFlutterBinding.ensureInitialized();   await initServices();   runApp(const MyApp()); } GetView< SettingsService> late SharedPreferences _prefs; final counter = 0.obs;

Directory

    lib/
    ├── 1_navigation/
    │   ├── navigation.dart
    │   └── next_screen.dart
    ├── 2_state_management/
    │   ├── reactive/
    │   │   ├── reactive_state_management.dart
    │   │   └── user.dart
    │   └── simple/
    │       ├── simple_state_controller.dart
    │       └── simple_state_management.dart
    ├── 3_getx_controller/
    │   ├── controller.dart
    │   ├── detail_page.dart
    │   └── view.dart
    ├── 4_dependency_management/
    │   ├── binding.dart
    │   ├── class.dart
    │   ├── controller.dart
    │   ├── detail_page.dart
    │   └── view.dart
    ├── 5_translations/
    │   ├── messages.dart
    │   ├── translations_controller.dart
    │   ├── translations_example.dart
    │   └── translations_view.dart
    ├── 6_themes/
    │   ├── themes_controller.dart
    │   ├── themes_example.dart
    │   ├── themes_view.dart
    │   └── themes.dart
    ├── 7_getx_service_&_get_view/
    │   ├── service_view.dart
    │   ├── service_example.dart
    │   └── settings_service.dart
    ├── 8_get_widget/
    │   └── get_widget_example.dart
    ├── 9_get_connect/
    │   └── get_connect_example.dart
    ├── 10_get_pattern/
    │   └── get_pattern_example.dart
    ├── main.dart
    └── routes.dart

Life Cycle of GetX Controller

Dependency Management using GetX

Internationalization/Translations using GetX

For language code: http://lingoes.net/en/translator/langcode.htm
For language code: https://www.science.co.il/language/Codes.php