Getx rabochee zerkalochrome

Flutter GetX Masterclass: Chapter 1 - Setting Up GetX in Your Flutter ProjectThis repository contains the code for Chapter 1 of the Flutter GetX Masterclass. In this chapter, we cover the installation of GetX, setting up a scalable folder structure, and creating a simple product listing app with navigation to a product details page.📹 Watch the Tutorial on YouTubeFollow the step-by-step tutorial in the video for a hands-on experience!🔗 Watch the full tutorial on YouTube📝 Chapter OverviewIn this chapter, you'll learn:How to install and set up GetX in a Flutter project.How to structure your project for scalability using MVC principles.How to create a product list and navigate to a product details page using GetX for routing.📂 Folder StructureHere’s the folder structure we’ve set up in this chapter:lib/│├── app/│ ├── modules/│ │ ├── product/│ │ │ ├── controllers/│ │ │ │ └── product_controller.dart│ │ │ ├── views/│ │ │ │ └── product_view.dart│ │ │ │ └── product_details_view.dart│ │ │ └── models/│ │ │ └── product_model.dart│ └── routes/│ └── app_pages.dart│ └── app_routes.dart└── main.dart🧑‍💻 How to Run the AppClone the repository:git clone git clone -b Chapter-1 to the project directory:cd flutter-getx-real-world-applicationInstall dependencies:Run the app:Feel free to fork and contribute to this repository!🔗 Useful LinksGetX Package: pub.dev/packages/getFlutter Documentation: flutter.dev/docsHappy Coding! 🎉

GetX codelabIn this example you will learn the basics of GetX. You will see how much easier it is to code with this framework, and you will know what problems GetX proposes to solve.If the default Flutter application were rewritten with Getx, it would have only a few lines of code. The Getx state manager is easier than using setState. You just need to add a ".obs" at the end of your variable, and wrap the widget you want to change within a Obx(). runApp(MaterialApp(home: Home()));class Home extends StatelessWidget { var count = 0.obs; @override Widget build(context) => Scaffold( appBar: AppBar(title: Text("counter")), body: Center( child: Obx(() => Text("$count")), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () => count ++, ));}">void main() => runApp(MaterialApp(home: Home()));class Home extends StatelessWidget { var count = 0.obs; @override Widget build(context) => Scaffold( appBar: AppBar(title: Text("counter")), body: Center( child: Obx(() => Text("$count")), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () => count ++, ));}However, this simple example deals with ephemeral state management. If you need to access this data in several places in your application, you will need global state management.The most common way to do this is to separate the business logic from its visualization. I know, you've heard this concept before, and it might have been scary for you, but with Getx, it's stupidly simple.Getx provides you with a class capable of initializing data, and removing it when it is no longer needed, and its use is very simple:Just create a class by extending GetxController and insert ALL your variables and functions there.class Controller extends GetxController { var count = 0; void increment() { count++; update(); }}Here you can choose between simple state management, or reactive state management.The simple one will update its variable on the screen whenever update() is called. It is used with a widget called "GetBuilder".( builder: (_) => Text( 'clicks: ${controller.count}', )), ElevatedButton( child: Text('Next Route'), onPressed: () { Get.to(Second()); }, ), ], ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: controller.increment(), ), ); }}class Second extends StatelessWidget { final Controller ctrl = Get.find(); @override Widget build(context){ return Scaffold(body: Center(child: Text("${ctrl.count}"))); }}">class Home extends StatelessWidget { final controller = Get.put(Controller()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("counter")), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ GetBuilderController>( builder: (_) => Text( 'clicks: ${controller.count}', )), ElevatedButton( child: Text('Next Route'), onPressed: () { Get.to(Second()); }, ), ], ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add),

OnPressed: controller.increment(), ), ); }}class Second extends StatelessWidget { final Controller ctrl = Get.find(); @override Widget build(context){ return Scaffold(body: Center(child: Text("${ctrl.count}"))); }}When instantiating your controller, you may have noticed that we use Get.put(Controller()). This is enough to make your controller available to other pages as long as it is in memory.You may have noticed that you have a new button using Get.to(Second()). This is enough to navigate to another page. You don't need aNavigator.of(context).push(context, MaterialPageRoute(context, builder: (context){ return Second(); },);all that huge code, it's reduced to a simple Get.to(Second()). Isn't that incredible?You may also have noticed that on the other page you simply used Get.find (), and the framework knows which controller you registered previously, and returns it effortlessly, you don't need to type the find with Get.find() so that he knows what you need.However, this is simple state management. You may want to control the output of each change of state, you may want to use and manipulate streams, you may want a variable to only be changed on the screen, when it definitely changes, you may need a debounce on changing the state, and to these and other needs, Getx has powerful, intelligent, and lightweight state management that can address any need, regardless of the size of your project. And its use is even easier than the previous one.In your controller, you can remove the update method, Getx is reactive, so when a variable changes, it will automatically change on the screen.You just need to add a ".obs" in front of your variable, and that's it, it's already reactive.class Controller extends GetxController { var count = 0.obs; void increment() { count++; }}Now you just need to change GetBuilder for GetX and that's it( builder: (_) => Text( 'clicks: ${controller.count}', )), ElevatedButton( child: Text('Next Route'), onPressed: () { Get.to(Second()); }, ), ], ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: controller.increment(), ), ); }}class Second extends StatelessWidget { final Controller ctrl = Get.find(); @override Widget build(context){ return Scaffold(body: Center(child: Text("${ctrl.count}"))); }}">class Home extends StatelessWidget { final controller = Get.put(Controller()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("counter")), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ GetXController>( builder: (_) => Text( 'clicks: ${controller.count}', )), ElevatedButton( child: Text('Next Route'), onPressed: () { Get.to(Second()); }, ), ], ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: controller.increment(), ), ); }}class Second extends StatelessWidget { final Controller ctrl = Get.find(); @override Widget build(context){ return

Scaffold(body: Center(child: Text("${ctrl.count}"))); }}GetX is a useful widget when you want to inject the controller into the init property, or when you want to retrieve an instance of the controller within the widget itself. In other cases, you can insert your widget into an Obx, which receives a widget function. This looks much easier and clearer, just like the first example Text( 'clicks: ${controller.count}', )), ElevatedButton( child: Text('Next Route'), onPressed: () { Get.to(Second()); }, ), ], ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: controller.increment(), ), ); }}class Second extends StatelessWidget { final Controller ctrl = Get.find(); @override Widget build(context){ return Scaffold(body: Center(child: Text("${ctrl.count}"))); }}">class Home extends StatelessWidget { final controller = Get.put(Controller()); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("counter")), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Obx(() => Text( 'clicks: ${controller.count}', )), ElevatedButton( child: Text('Next Route'), onPressed: () { Get.to(Second()); }, ), ], ), ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: controller.increment(), ), ); }}class Second extends StatelessWidget { final Controller ctrl = Get.find(); @override Widget build(context){ return Scaffold(body: Center(child: Text("${ctrl.count}"))); }}If you are a more demanding user, you must have said: BLoC separates the View from the business logic. But what about the presentation logic? Will I be obliged to attach it to the visualization? Will I be totally dependent on the context for everything I want to do? Will I have to insert a bunch of variables, TextEditingControllers in my view? If I need to hear the Scroll on my screen, do I need to insert an initState and a function into my view? If I need to trigger an action when this scroll reaches the end, do I insert it into the view, or in the bloc/changeNotifier class? Well, these are common architectural questions, and most of the time the solution to them is ugly.With Getx you have no doubts when your architecture, if you need a function, it must be on your Controller, if you need to trigger an event, it needs to be on your controller, your view is generally a StatelessWidget free from any dirt.This means that if someone has already done something you’re looking for, you can copy the controller entirely from someone else, and it will work for you, this level of standardization is what Flutter lacked, and it’s because of this that Getx has become so popular in the last few days. Flutter is amazing, and has minor