{"id":61829,"date":"2024-05-24T15:17:10","date_gmt":"2024-05-24T09:47:10","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=61829"},"modified":"2024-05-24T15:29:05","modified_gmt":"2024-05-24T09:59:05","slug":"getting-started-with-flutter-getx-state-management","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/getting-started-with-flutter-getx-state-management\/","title":{"rendered":"Getting started with Flutter GetX \u2013 State Management"},"content":{"rendered":"

Introduction<\/h2>\n

When starting a new Flutter application, choosing the right state management approach is crucial. This blog aims to simplify that decision for you. In this tutorial on Flutter state management with GetX, I will introduce you to GetX, a robust Flutter framework.<\/p>\n

GetX<\/h2>\n

State management facilitates data transfer within an application, triggering state updates and rebuilding the interface accordingly. This process is particularly critical in complex applications, where inefficient state updates can become costly. Flutter offers Stateful Widgets for managing state, but they come with certain limitations and are expensive to manage in terms of resource, performance and memory consumption.<\/p>\n

To address these limitations, we can use GetX for state management in Flutter. GetX is a robust and lightweight solution that also offers the below solutions:<\/p>\n

– State management
\n– Dependency injection
\n– Route management<\/p>\n

Why GetX<\/strong><\/p>\n

\n
\n
\n
\n

Let\u2019s explore why GetX is essential for state management in Flutter apps. GetX enhances Flutter applications in three key areas:<\/p>\n

    \n
  1. Performance<\/strong>: GetX optimizes resource consumption to enhance application performance. It avoids using ChangeNotifier or Streams, focusing instead on more efficient alternatives.<\/li>\n
  2. Organization and Readability<\/strong>: GetX separates the view from the business logic, offering a clear and simple syntax that improves the readability and organization of the code.<\/li>\n
  3. Productivity<\/strong>: With GetX’s straightforward syntax, developers can easily implement state management, even with complex code. This simplicity reduces development time and boosts productivity, ensuring maximum performance.<\/li>\n<\/ol>\n

    Installation<\/h2>\n
    \n
    flutter pub add get\r\n<\/em><\/strong><\/pre>\n<\/blockquote>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
    Counter App using Getx State Management<\/h2>\n
    In this tutorial, I will be taking example of a counter app by separating the UI logic and business logic using a controller and the Obx<\/strong> widget step by step.<\/p>\n
    class CounterRepository {\r\n  CounterRepository();\r\n<\/em><\/strong>\r\n  final Rx count = 0.obs;\r\n  final int _value = 1;\r\n\r\n  void increment() => count.value += _value;<\/em><\/strong>\r\n\r\n  void decrement() => count.value -= _value; \r\n}<\/em><\/strong><\/pre>\n
    Get.lazyPut() allows you to initialise your controller when necessary, such as when your screen becomes visible to the user, and removes the controller when your screen is no longer part of the widget stack.<\/p>\n
    void main() {<\/em><\/strong>\r\n  \/\/ Creating an instance of CounterRepository for dependency injection via Getx<\/em><\/strong>\r\n  Get.lazyPut(() => CounterRepository());\r\n  runApp(const MyApp());\r\n}\r\n\r\nclass MyApp extends StatelessWidget {\r\n  const MyApp({super.key});\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    return GetMaterialApp(\r\n      title: 'Getx Demo',\r\n      theme: ThemeData(\r\n        primarySwatch: Colors.blue,\r\n      ),\r\n      home: const CounterScreen(),\r\n    );\r\n  }\r\n}\r\n<\/em><\/strong><\/pre>\n
    Creating a Counter screen containing a number text, a button to navigate to another screen and a floating button to control the increment behaviour. The text widget is wrapped within Obx, enabling it to retrieve the value of the observable variable. Without Obx, the value would remain unchanged. The increment value is initialised in the controller as 0 which will be the initial value displayed at the run time.<\/p>\n
    class CounterScreen extends StatelessWidget {\r\n  const CounterScreen({Key? key}) : super(key: key);\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    final CounterRepository repo = Get.find();\r\n\r\n    return Scaffold(\r\n      appBar: AppBar(\r\n        title: const Text('Counter'),\r\n      ),\r\n      body: Center(\r\n        child: Column(\r\n          mainAxisAlignment: MainAxisAlignment.center,\r\n          children: [\r\n            ElevatedButton(\r\n              onPressed: () => {Get.to(() =>SecondScreen())},\r\n              child: const Text('Open New page'),\r\n            ),\r\n            const SizedBox(height: 16),\r\n            Obx(\r\n              () => Text(\r\n                '${repo.count.value}',\r\n                style: Theme.of(context).textTheme.headlineMedium,\r\n              ),\r\n            ),\r\n          ],\r\n        ),\r\n      ),\r\n      floatingActionButton: FloatingActionButton(\r\n        onPressed:repo.increment,\r\n        child: const Icon(Icons.add),\r\n      ),\r\n    );\r\n  }\r\n}<\/em><\/strong><\/pre>\n
    The second screen is navigated when we click the button using Getx’s Route management function Get.to\u00a0<\/em><\/strong>this function works similar to Navigator.of <\/strong><\/em>but without having to use context. Here also The text widget is wrapped within Obx which allows it to listen to changes and update accordingly. Since we are using the same object of CounterRepo\u00a0<\/strong><\/em>by getting it from getx dependency management the increment data will be preserved in the SecondScreen as well. We can use decrement function to make changes in the actual value using the instance of CounterController provided by Getx using Get.find()<\/strong><\/em>.<\/p>\n
    class SecondScreen extends StatelessWidget {\r\n  const SecondScreen({Key? key}) : super(key: key);\r\n\r\n  @override\r\n  Widget build(BuildContext context) {\r\n    final CounterRepository repo = Get.find();\r\n\r\n    return Scaffold(\r\n      appBar: AppBar(\r\n        title: const Text('Counter'),\r\n      ),\r\n      body: Center(\r\n        child: Column(\r\n          mainAxisAlignment: MainAxisAlignment.center,\r\n          children: [\r\n            ElevatedButton(\r\n              onPressed: () => {Get.back()},\r\n              child: const Text('Go to previous Screen'),\r\n            ),\r\n            const SizedBox(height: 16),\r\n            Obx(\r\n              () => Text(\r\n                '${repo.count.value}',\r\n                style: Theme.of(context).textTheme.headlineMedium,\r\n              ),\r\n            ),\r\n          ],\r\n        ),\r\n      ),\r\n      floatingActionButton: FloatingActionButton(\r\n        onPressed:repo.decrement,\r\n        child: const Icon(Icons.remove),\r\n      ),\r\n    );\r\n  }\r\n}<\/strong><\/em><\/pre>\n
    \"screenshot\"<\/p>\n
    Key Features:<\/b><\/p>\n