使用带有 GetX/Obx() 的 Switch() 小部件

Question

I am back with the question: How can I use the Switch() widget with GetX/Obx()? At many places i have read that with GetX/Obx no need of StatefullWidget. So in my app I use only StatelessWidgets. Problem is that i can not make a Switch() working because SetState() is not usable in StatelessWidget.

Can someone help, please? Thank for your kindness. A.KOTE

Answer 1

For simple Switch state toggle you should not use a controller. Controller is for more complex business logic implementation which can be shared among screens. You can use ValueBuilder from Get package which can give desired result with less code. Here is an example:

Center(
          child: ValueBuilder<bool>(
            initialValue: true,
            builder: (isChecked, updateFn) => Switch(
              value: isChecked,
              onChanged: (newValue) => updateFn(newValue),
            ),
          ),
        ),

Answer 2

I can give you an example and then you can implement in your code.

You can use a GetxController to handle the widget state.

Counter example:

class YourController extends GetxController {
  //The current value
  int counter = 0;

  void increment() {
    counter++;
    update(); // use update() to update counter variable on UI when increment be called
  }
}

Then in your statelessWidget you can listen.

class YourWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: GetBuilder<YourController>(
        init: Controller(), // INIT IT ONLY THE FIRST TIME
        builder: (_) => Text(
          '${_.counter}',
        ),
      ),
    ));
  }
}

DOCS: https://github.com/jonataslaw/getx/blob/master/documentation/en_US/state_management.md#simple-state-manager

How can you update the value?

Add a line to your controller

class YourController extends GetxController {
      //New line added
      static YourController  get to => Get.find();
      int counter = 0;

      void increment() {
        counter++;
        update(); // use update() to update counter variable on UI when increment be called
      }
    }

Update the UI

return Scaffold(
      // body: /*... */
      floatingActionButton: FloatingActionButton(
        child: Text('Hit'),
        onPressed: () {
          //Apply the logic to your Switch widget
          YourController.to.update();
        },
      ),
    );
  }

Answer 3

GetX + Switch

Here's a copy/paste example of using GetX with a Switch widget, within a StatelessWidget .

import 'package:flutter/material.dart';
import 'package:get/get.dart';

/// GetX Controller for holding Switch's current value
class SwitchX extends GetxController {
  RxBool on = false.obs; // our observable

  // swap true/false & save it to observable
  void toggle() => on.value = on.value ? false : true;
}

/// Stateless Page here
class SwitchGetxPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SwitchX sx = Get.put(SwitchX()); // Instantiate Get Controller, *in* build()

    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Field'),
      ),
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Obx will rebuild Text & Switch when "on" observable changes
              Obx(() => Text('Switch Setting: ${sx.on}')),
              Obx(() => Switch(
                onChanged: (val) => sx.toggle(), 
                value: sx.on.value),
              )
            ],
          ),
        ),
      ),
    );
  }
}

GetX + State

With GetX you don't need StatefulWidgets because you're holding "state" outside of widgets and "inside" a GetxController .

In the example above, RxBool on = false.obs is the "state" of your application. It will be true or false throughout the life of your app.

When Switch's value changes, any widgets you need rebuilt, put them in Obx , GetX or GetBuilder and use the observable variable.

Obx , GetX will rebuild themselves whenever their observable changes. GetBuilder requires you call update() for it to rebuild. Just like a setState() call.

Why Two Obx in Example?

To make painfully obvious that Obx/GetX must directly wrap an observable variable.

GetX asks you to use observable variables directly in Obx/GetX , not further nested down, like in child of a child.

For example, this below, will throw an Error:

class SwitchGetxPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SwitchX sx = Get.put(SwitchX());

    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Field'),
      ),
      body: SafeArea(
        child: Center(
          child: Obx(() => MyTextSwitch(sx)), // don't do this, will explode
        ),
      ),
    );
  }
}

class MyTextSwitch extends StatelessWidget {
  final SwitchX sx;

  MyTextSwitch(this.sx);

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Switch Setting: ${sx.on}'),
        Switch(
            onChanged: (val) => sx.toggle(),
            value: sx.on.value)
      ],
    );
  }
}

This version below is still OK, but not used in first example, as it may lead to bad habits (like rebuilding widgets that don't need it) & errors like the example immediately above. Just remember that Obx/GetX must have an observable in its child:

class SwitchGetxPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    SwitchX sx = Get.put(SwitchX());

    return Scaffold(
      appBar: AppBar(
        title: Text('Switch Field'),
      ),
      body: SafeArea(
        child: Center(
          child: Obx( // still OK, but rebuilds Column unnecessarily
            () => Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text('Switch Setting: ${sx.on}'),
                Switch(
                    onChanged: (val) => sx.toggle(),
                    value: sx.on.value)
              ],
            ),
          ),
        ),
      ),
    );
  }
}