GetX In Flutter
In this article, we will explore GetX In Flutter. We will see how to implement a demo program using GetX and show you how easily we can do everything in the application.
Table Of Contents:
About GetX:
GetX is an extra-light and powerful solution for flutter by using getx we can easily manage routing, states and can efficiently perform dependency injection.
If we use GetX then we can not have to use the StatefulWidgets, it can surely reduce some RAM consumption, no need to use the initState() and other such methods which are used in StatefulWidgets.
GetX has 3 basic principles. This means that these are the priority for all resources in the library:
1:-PERFORMANCE: it is focused on performance and minimum consumption of resources. it does not use Streams or ChangeNotifier.
2:-PRODUCTIVITY: it has an easy syntax that can easily remember. No matter what you want to do, there is always an easier way with GetX. It will save hours of development and will provide the maximum performance your application can deliver.
3:-ORGANIZATION: it allows us to do away with business logic on views and separate dependency injection and navigation from the UI. You don’t require the context to navigate between screens.
Installation :
Add Get to your package’s pubspec.yaml file:
dependencies:
get: ^4.6.1Import it in a file that it will be used:
import 'package:get/get.dart';Features Of GetX:
GetX has multiple features you will need in your daily app development in Flutter:
> State Management
Get has two different state managers:
1:-Simple state manager (known as GetBuilder).
The Simple state Management uses extremely low resources since it does not use Streams or ChangeNotifier. But your widgets can listen to changes of your state, we use the update() method.
import 'package:get/get.dart';
class CounterController extends GetxController {
var counter = 0;
increment() {
counter++;
update();
} }After doing some changes to your state in your controller, you have to call the update method to notify the widgets, which are listening to the state. As you can see, we have to simply declare the state of the variable as we normally do. So, you don’t need to transform your state variables into something else.
2:-Reactive state manager (known as GetX/Obx).
Reactive State Management: In this, we’ll not able to use streams for this we have to use GetX class. syntax of GetX is very similar to GetBuilder. GetX has all the required Reactive Programming features we don’t need to use StreamControllers, StreamBuilders for each variable, and class for each state, even we do not need to use any auto-generated classes by code generators.
Let’s imagine that you have a named variable and want that every time you change it, all widgets that use it are automatically changed.
This is a count variable:
var name = 'Jonatas Borges';To make it observable, you just need to add “.obs” to the end of it:
var name = 'Jonatas Borges'.obs;And in the UI, when you want to show that value and update the screen whenever the values change, simply do this:
Obx(() => Text("${controller.name}"));> Route Management
GetX provides API for navigating within the Flutter application. This API is simple and with less code needed.
in the old way, we can use this
Navigator.push(context, MaterialPageRoute(builder: (context)=>Profile()));but in getx, we can simply navigate through this// Before:
MaterialApp(
GetMaterialApp(
home: MyHome(),
)Get.to(Profile());
Get.toNamed('/profile');
Get.back();
Get.off(Profile());
Get.offAll(Profile());> Dependency Management
it provides a smart way to manage dependencies in your Flutter application like the view controllers. GetX will remove any controller not being used at the moment from memory. This was a task you as the developer will have to do manually but GetX does that for you automatically out of the box.
Controller controller = Get.put(Controller());if you navigate through multiple routes, and you require data that was left behind in your controller, you would need a state manager combined with the Provider or Get_it, correct? Not with Get. You just need to ask to Get to “find” for your controller, you don’t need any additional dependencies:
Controller controller = Get.find();And then you will be able to recover your controller data that was obtained:
Text(controller.textFromApi);> Internationalization
Internationalization is an activity that developers, perform and it provides the multiple language support feature in an application.
GetX provides API for navigating within the Flutter application. This API is simple and with less code needed.
import 'package:get/get.dart';
class Messages extends Translations {
@override
Map<String, Map<String, String>> get keys => {
'en_US': {
'hello': 'Hello World',
},
'de_DE': {
'hello': 'Hallo Welt',
}};}Using translations
Just append .tr to the specified key and it will be translated, using the current value of Get.locale and Get.fallbackLocale.Text(‘title’.tr);
Using translation with singular and plural
var products = [];
Text('singularKey'.trPlural('pluralKey', products.length, Args));Using translation with parameters
import 'package:get/get.dart';
Map<String, Map<String, String>> get keys => {
'en_US': {
'logged_in': 'logged in as @name with email @email',
},
'es_ES': {
'logged_in': 'iniciado sesión como @name con e-mail @email',
}
};
Text('logged_in'.trParams({
'name': 'Jhon',
'email': 'jhon@example.com'
}));Locales
Pass parameters to GetMaterialApp to define the locale and translations.
return GetMaterialApp(
translations: Messages(), // your translations
locale: Locale('en', 'US'), // translations will be displayed in that locale
fallbackLocale: Locale('en', 'UK'), // specify the fallback locale in case an invalid locale is selected.
);Change locale
var locale = Locale('en', 'US');
Get.updateLocale(locale);> Change Theme
While we are using GetX we don’t need to use any higher level widget than GetMaterialApp.
You can create your custom theme and simply add it within Get.changeTheme without any boilerplate for that:
Get.changeTheme(ThemeData.light());> GetConnect
GetConnect is an easy way to communicate from your back to your front with HTTP or WebSockets.
Default configuration
You can simply extend GetConnect and use the GET/POST/PUT/DELETE/SOCKET.
class UserProvider extends GetConnect {
// Get request
Future<Response> getData() => get('url');
// Post request
Future<Response> postData(Map data) => post('Url', body: data);
}When we run the application, we ought to get the screen’s output like the underneath screen video.
Conclusion:
In this article, we discussed how this GetX is being used, what are all the features provided by Getx also you can use to minimize the ram consumption, and also it provides multiple features that minimize our work.
I have explained the basic structure of the GetX in a flutter; you can use this code according to your choice. This was a small introduction to Getx On User Interaction from my side, and it’s working using Flutter
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
find the source code of the Getx:
GitHub – flutter-devs/flutter_Getx
A new Flutter project. This project is a starting point for a Flutter application. A few resources to get you started…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
