I want to make the Widget obserable in flutter when using get get: ^4.3.8, the controller code like this:

class MainController extends GetxController {
  Widget childWidget = Text("Loading...").obs as Widget;
}

and the minimal reproduce main.dart look like this:

import 'package:flutter/material.dart';
import 'package:get/get_state_manager/src/simple/get_state.dart';

import 'main_controller.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<MainController>(
        init: MainController(),
        builder: (controller) {
          return Scaffold(
            //appBar: AppBar(title: Text("title")),
            body: Text(""),
          );
        });
  }
}

when compile the app, shows error like this:

   flutter: \^[[38;5;196m┌───────────────────────────────────────────────────────────────────────────────────────────────────────────────────────<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞════════════════════════<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe following _CastError was thrown building Quadrant(dirty,<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mdependencies: [MediaQuery]):<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mtype 'Rx<Text>' is not a subtype of type 'Widget' in type cast<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mThe relevant error-causing widget was:<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  Quadrant<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m  Quadrant:file:///Users/xiaoqiangjiang/source/reddwarf/frontend/tik/lib/navigators/nav/nav_page.dart:31:31<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196mWhen the exception was thrown, this was the stack:<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m#0      new QuadrantController (package:Tik/pages/quadrant/quadrant_controller.dart:14:47)<…>
    flutter: \^[[38;5;196m│ \^[[0m\^[[39m\^[[48;5;196m#1      Quadrant.build (package:Tik/pages/quadrant/quadrant.dart:14:15)<…>

is it possible to make widget component obs when using get? why shows the Text not the subtype of wiget? I think the Text is the subtype of Widget.

CodePudding user response：

You can try this like :

 Rx<Widget> childWidget = Text("Loading...").obs;

and to use this obs widget in widget tree like :

GetBuilder<MainController>(
        init: MainController(),
        builder: (controller) {
          return Scaffold(
            body: controller.childWidget.value,
          );
        });

CodePudding user response：

When you make a variable observable using A.obs then it translates to Rx.

Use,

final childWidget = Rx<Widget>(Text("Loading...") as Widget)

CodePudding user response：

You should review this docs. https://github.com/jonataslaw/getx/blob/master/documentation/en_US/state_management.md

class MainController extends GetxController {
  final childWidget = Rx<Widget>(Text("Loading..."));
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<MainController>(
        init: MainController(),
        builder: (controller) {
          return Scaffold(
            appBar: AppBar(title: Text("title")),
            body: controller.childWidget.value,
          );
        });
  }
}

And this will be good way, in my opinion.

Note. RxType belong with GetX and Obx, Not GetBuilder.

// main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MainController extends GetxController {
  final bodyText = Rx<String>("Loading...");
}

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

  @override
  Widget build(BuildContext context) {
    return GetX<MainController>(
      init: MainController(),
      builder: (controller) {
        return Scaffold(
          appBar: AppBar(title: const Text("title")),
          body: Text(controller.bodyText.value),
        );
      },
    );
  }
}

Have Fun! Thanks!