How to change variable with getx?

Question

As in the codes I mentioned below, my question is actually simple, but I couldn't find a simple answer on the internet. All the sources I found are going through the same example. There is no simple explanation, but there is good stackoverflow. Let me ask my question without further ado.

I can specify a variable in getx and print that variable on other pages. What I want to do now is I want to change the getx variable in the main file, how can I do that? I'm posting the wrong version of the code I want to do below for you to understand.

code in getx folder

class numcontroller extends GetxController {
  var derece = 20.obs;
}

code is second page

       numcontroller deneme = Get.put(numcontroller());


       Container(
                      margin: const EdgeInsets.fromLTRB(27, 10, 0, 0),
                      child: Row(
                        children: [
                          Container(
                            margin: const EdgeInsets.fromLTRB(5, 0, 0, 0),
                            child: Text('${deneme.derece.value}',
                              style: const TextStyle(
                                  fontSize: 45,
                                  fontFamily: 'YesevaOne',
                                  color: Color(0xFF2d4b70)),
                            ),
                          ),

The code I want to run in main.dart

derece = 20 

or

derece = 30

When I change the degree manually on main.dart, I want it to change on the second page as well.

EDİTİNG

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:teemapp4/Controller/switch_controller.dart';
import 'routes/app_pages.dart';
import 'routes/app_routes.dart';
import 'themes/app_theme.dart';
//0xFF2d4b70

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialRoute: AppRoutes.DASHBOARD,
      getPages: AppPages.list,
      debugShowCheckedModeBanner: false,
      theme: AppTheme.light,
      darkTheme: AppTheme.dark,
      themeMode: ThemeMode.system,
    );
  }
}

this is my main.dart code but i am using a bottombar i made with getx. I'm looking for how to change the data in that file through this code.

Answer 1

I don't think So you need to update your main.dart file.

You can add a button on your first page to update values like:

firstPage.dart

class FirstPage extends StatelessWidget {
  FirstPage({Key? key}) : super(key: key);
  NumController numController = Get.put(NumController());
  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                numController.updateDerece(30);
              },
              child: Text(
                "Update Value",
              ),
            ),
            ElevatedButton(
              onPressed: () {
                Get.to(() => SecondPage());
              },
              child: Text("Go To Second Screen"),
            ),
          ],
        ),
      ),
    );
  }
}

secondPage.dart

class SecondPage extends StatelessWidget {
  SecondPage({Key? key}) : super(key: key);
  NumController numController = Get.find<NumController>();
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(
        numController.derece.toString(),
      ),
    );
  }
}

Or You can directly update the value on your second page like:

secondPage.dart

class SecondPage extends StatelessWidget {
  SecondPage({Key? key}) : super(key: key);
  NumController numController = Get.put(NumController());

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                //Any Number You can pass in Function
                numController.updateDerece(30);
              },
              child: Text(
                "Update Value",
              ),
            ),
            Obx(
              () => Container(
                child: Text(
                  numController.derece.toString(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

numController.dart

import 'package:get/get.dart';

class NumController extends GetxController {
  var _derece = 20.obs;

  int get derece => _derece.value;

  void updateDerece(int value) {
    _derece.value = value;
  }
}

Answer 2

Try using this way. And update your derece variable value using updateDerece method.

var _derece = 20.obs;

double get derece => _derece.value;

void updateDerece(double value) {
    _derece.value = value;
}

////

Obx(() {
       return Container(
      margin: const EdgeInsets.fromLTRB(27, 10, 0, 0),
      child: Row(
        children: [
          Container(
            margin: const EdgeInsets.fromLTRB(5, 0, 0, 0),
            child: Text(
              '${deneme.derece}',
              style: const TextStyle(
                  fontSize: 45,
                  fontFamily: 'YesevaOne',
                  color: Color(0xFF2d4b70)),
            ),
          ),
        ],
      ),
    );
})