Flutter is awesome! It’s by far the fastest way to create truly cross-platform apps without compromising beauty, performance, and features. With development experience unlike any other framework, it does tick most of the boxes. However, it’s not perfect. Some things slow down the development from time to time.
If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.
Enter GetX!:
GetX is a micro-framework that aims to provide a top-notch development experience by minimizing the boilerplate combined with neat syntax and a simple approach. When developing with GetX, everything feels self-evident and practical. It’s a solid blend of simplicity and power. It’s one of those rare packages that try to do everything and do it.
GetX provides a combination of State Management, Dependency Injection, and Route Management solutions that work great together. But things don’t end here, it provides a ton of utilities that make it easy to implement internationalization, theming, validation, etc.
All of these solutions and utilities are packed in individually compiled containers which give us the freedom to choose what to use and what not to, without compromising performance. However, once you’re using GetX, it’s hard to not use everything this package has to offer because everything works so seamlessly together. And, that’s what I call The GetX Ecosystem.
What’s so special?:
- Firstly, I love the syntax! Before I used GetX, I couldn’t imagine that things like navigating a route can be made this simple. We don’t need, a builder or anything. Just write
Get.to(SomePage())and that’s it. And that’s just one example. - The primary focus is on performance. Normally, we would have to choose which controllers to dispose of and manually dispose of them. With GetX, it’s the opposite. We have to choose which one to keep in the memory as they are disposed of automatically. Saves memory, and lines of code.
- 100% Decoupling! With GetX, it’s possible to achieve this. Business logic is separated from views, and even dependencies can be separated using something called Bindings.
- It just works. Working with GetX is quite a satisfying experience. Whenever I’ve to implement a certain feature, there’s always a simpler way to do it with GetX, no matter the use case.
- It’s well maintained and up-to-date. It can be challenging to keep all your packages updated and in sync with each other. Sometimes, there are breaking changes and things can get nasty. GetX centralizes most of our development needs under one package, so we don’t need to worry about compatibility and maintenance.
Let’s Start:
State Management? State Management!:
State Management is still the hottest topic in Flutter Community. There are tons of choices available and it’s super intimidating for a beginner to choose one. Also, all of them have their pros and cons. So, what’s the best approach? The answer is simple — The one you feel comfortable with. Can GetX be the one? Let’s take a look!
GetMaterialApp:
Step 0: Use GetMaterialApp instead of MaterialApp.
class MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return GetMaterialApp(
localizationsDelegates: context.localizationDelegates,
supportedLocales: context.supportedLocales,
locale: context.locale,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Easy localization'),
);
}
}Boom! Now you’re officially in the ecosystem.
GetxController:
Controllers are classes where all our business logic goes. All the variables and methods are placed here and can be accessed from the view. While we can just create a simple class for this purpose, GetX provides a class called GetxController which extends DisposableInterface.
This means that our controller will get deleted from memory as soon as the widgets using it are removed from the navigation stack. We don’t have to manually dispose of anything and the memory consumption is reduced, resulting in high performance.
class Controller extends GetxController {
TextEditingController ctrl = TextEditingController();
var buttonName = "edit".obs;
void upDate() {
if (ctrl.text.isNotEmpty) {
buttonName.value = 'Save';
} else {
buttonName.value = 'Edit';
}
}
void goToNexPage() {
if (ctrl.text.isNotEmpty) {
ctrl.clear();
upDate();
Get.to(() => const SecondScreen());
}
}
}Add .obs to any variable and you make it observable. You’re turning buttonName type String. This means that we can listen to the changes made to buttonName our view using GetX.
We use update() the method inside any method in the controller so that our widgets can listen to the changes made by the method. If you have used the Provider package, it’s just like notifyListeners().
Obx:
This one is a personal favorite. It has the simplest syntax and implementation. All we’ve to do is wrap the widget in Obx(() ⇒ ) and we’re done!
_buildButtonView() {
return GestureDetector(
onTap: ()
{
controller.goToNexPage();
},
child: Container(
height: 67,
alignment: Alignment.center,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(20),
),
child: Container(
alignment: Alignment.center,
padding: const EdgeInsets.symmetric(horizontal: 10),
child: Obx(
() => Text(
controller.buttonName.value,
textAlign: TextAlign.center,
style: const TextStyle(color: Colors.white, fontSize: 20),
),
),
),
),
);
}The syntax is shorter than, setState though there’s one extra step here. We need to initialize the Controller to use our variables and methods.
This is how we do it in GetX:
final controller = Get.put(Controller());❤ ❤ 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.
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! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn.
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.
