Scribd
Upload
63 views4 pages

Get X

GetX is a Flutter package for state management, dependency injection, and route management, designed for simplicity and efficiency in small to medium apps. It utilizes observable variables to automatically update the UI when values change, employing widgets like Obx to listen for these changes. The document includes a code example demonstrating the creation of a stateful widget that utilizes GetX for reactive programming and managing user input through text fields.

Uploaded by

fouziabibi780
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
63 views4 pages

Get X

GetX is a Flutter package for state management, dependency injection, and route management, designed for simplicity and efficiency in small to medium apps. It utilizes observable variables to automatically update the UI when values change, employing widgets like Obx to listen for these changes. The document includes a code example demonstrating the creation of a stateful widget that utilizes GetX for reactive programming and managing user input through text fields.

Uploaded by

fouziabibi780
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Get X

What is GetX?

GetX is a popular Flutter package used for:

 State management
 Dependency injection
 Route management

It's simple and efficient, especially for small to medium apps.

Obs:

 It stands for observable.


 Used to make a variable reactive so that when its value changes, the UI automatically
updates.
 Example: var count = 0.obs;

Obx:

 A widget that listens to observable variables.


 Rebuilds its child widget whenever the variable it’s watching changes.
 Example: Obx(() => Text('${controller.count}'));

getXpratice UI:

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:get/get_core/src/get_main.dart';
import 'getcontroller.dart';

 Import necessary packages.


 Import your controller file (getcontroller.dart).

Widget Definition

class getXpratice extends StatefulWidget {


const getXpratice({super.key});

 Create a stateful widget named getXpratice.


🔹 State Class

class _getXpraticeState extends State<getXpratice> {


final Controlllerclass controller = Get.put(Controlllerclass());

 Get.put(...) adds the controller to the memory and makes it accessible.


 Controlllerclass contains your logic (see below).

final num1controller = TextEditingController();


final num2controller = TextEditingController();

 Text controllers to handle input from two TextFields.

🔹 Build UI

return Scaffold(
body: Column(
children: [

 Basic UI inside a Column.

🔸 TextField for num1

TextField(
controller: num1controller,
onChanged: (value){
controller.num1.value = int.tryParse(value) ?? 0;
},
),

 Takes input from the user and assigns it to the observable variable num1.

🔸 TextField for num2

TextField(
controller: num2controller,
onChanged: (value){
controller.num2.value = int.tryParse(value) ?? 0;
},
),
 Same as above but for num2.

🔸 Reactive Result Using Obx

Obx(()=>Text('${controller.sum}')),

 Automatically updates and shows the result stored in controller.sum when it changes.

🔸 Button to Calculate Sum

ElevatedButton(
onPressed: () {
controller.add(); // triggers sum = num1 + num2
},
child: Text('+'),
),

 On button press, it triggers the add() function in your controller.

🔸 File 2: Controller (getcontroller.dart)

import 'package:get/get.dart';

 Required for GetX features.

class Controlllerclass extends GetxController {

 Create a controller by extending GetxController.

🔹 Reactive Variables

var count = 0.obs;


var num1 = 0.obs;
var num2 = 0.obs;
var sum = 0.obs;

 All four are observable integers.

🔹 Functions

void increament(){
count++;
}
 Simple counter function.

void add(){
sum.value = num1.value + num2.value;
}

 Adds num1 and num2, stores result in sum.

Obs Makes variables reactive (automatically updates UI).


Obx Listens to changes in obs and rebuilds the widget.
Get.put() Registers the controller to be used anywhere.
.value Access or assign value to an observable.

You might also like