Flutter Easy GetX
Description
People ask me how I manage state,dependency,routes etc when I work with flutter,Here is the Simple Brief About GetX which I used for Dummy Basic Ecommerce Concept based flutter app development . Here I cover
- State Management
- Route Management
- Dependency Management
- Internationalization
- Storage
Getting Started
Dependencies
dependencies: get: ^4.3.0
get_storage: ^2.0.3
Installing
- flutter pub add get
Executing program
- State Management
class Purchase extends GetxController {
var products = <Product>[].obs;
.........
obs to observe the products that can be changed. similarly when any user will do add to cart it needs to be observed so
class DemoController extends GetxController {
var cartItems = <Product>[].obs;
int get cartCount => cartItems.length;
For More Check Out the Controller and Home.dart and Demo.dart
- Route Management
Initialize the routes in main.dart
routes: {
//routes for named navigation
'/': (context) => HomePage(),
'/cart': (context) => DemoPage(),
},
-------
Now You can called By named route using getX.
IconButton(
onPressed: () => Get.toNamed('/cart',
arguments:
"Home Page To Demo Page -> Passing arguments"), //sending arguments
icon: Icon(
Icons.arrow_forward_ios_rounded,
color: Colors.white,
))
......
- Dependency Management handle controller for Dependency Injection (Controller).
final var ctrl = Get.put(DemoController());
.......
After you add this once in your project you can find it out , you dont need to re connect it again and again Just Use Get.find()
final DemoController ctrl = Get
.find(); //getting the cart controller , you can show amount or anything
.......
- Internationalization
Change Theme or Language Easily . here is the demo main.dart
void main() async {
await GetStorage.init();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
final DemoController ctrl = Get.put(DemoController());
@override
Widget build(BuildContext context) {
return SimpleBuilder(builder: (_) {
// for darkmode instant change
return GetMaterialApp(
//for navigation dont forget to use GetMaterialApp
title: 'Easy GetX',
theme: ctrl.theme,
debugShowCheckedModeBanner: false,
initialRoute: '/',
routes: {
//routes for named navigation
'/': (context) => HomePage(),
'/cart': (context) => DemoPage(),
},
);
});
}
}
in the controller End :
bool get isDark => storage.read('darkmode') ?? false;
ThemeData get theme => isDark ? ThemeData.dark() : ThemeData.light();
void changeTheme(bool val) => storage.write('darkmode', val);
.......
to trigger it from anywhere [Checkout the DemoPage.dart file]
SwitchListTile(
value: ctrl.isDark,
title: Text("Touch to change ThemeMode"),
onChanged: ctrl.changeTheme,
),
.......
- Storage [alternative of shared preference] Just need to Write GetStorage();
final storage = GetStorage();
bool get isDark => storage.read('darkmode') ?? false;
ThemeData get theme => isDark ? ThemeData.dark() : ThemeData.light();
void changeTheme(bool val) => storage.write('darkmode', val);
Help
If you need any help regarding this
Thanks
46 Dec 27, 2022
0 Dec 20, 2021
4k Dec 28, 2022
0 Jan 27, 2022
2 Dec 1, 2022
6 Aug 27, 2022
20 Dec 20, 2022
214 Jan 9, 2023
7 Dec 18, 2022
2 May 30, 2022