GetX управление состоянием не выводит цвет

Question

Вот пример из официального сайта

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 ++,
      ));
}

Я решил его усложнить. При нажатии на кнопки должен изменяться цвет квадрата, но он не изменяется. Почему? Далее полный код и скриншот.

main.dart

import 'package:flutter/material.dart';

import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
 @override
 Widget build(BuildContext context) {
  return GetMaterialApp(
   debugShowCheckedModeBanner: false,
   title: 'Name App',
   theme: ThemeData(
    primarySwatch: Colors.blue,
   ),
   home: Scaffold(
    appBar: AppBar(
     title: Text('Name Page'),
    ),
    body: MyHomePage(),
   ),
  );
 }
}

class MyHomePage extends StatelessWidget {

 var _color = Colors.amber.obs;

 @override
 Widget build(BuildContext context) {
  return Obx(() =>
   Stack(
    children: [
     Align(
      alignment: Alignment(0.0, -0.75),
      child: AnimatedContainer(
       width: 150.0,
       height: 150.0,
       color: _color.value,
       duration: Duration(milliseconds: 500),
      ),
     ),
     Align(
      alignment: Alignment(-1.0, 0.95),
      child: Row(
       mainAxisSize: MainAxisSize.max,
       mainAxisAlignment: MainAxisAlignment.start,
       children: [
        SizedBox(
         width: 15.0,
        ),
        Expanded(
         flex: 1,
         child: Container(
          height: 50.0,
          child: FlatButton(
           onPressed: () { _color = Colors.red.obs; },
           splashColor: Colors.blue.withOpacity(0.5),
           shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10)
           ),
           child: Text(
            'OK',
            style: TextStyle(
             color: Colors.white,
             fontSize: 20.0,
            ),
           ),
           color: Colors.red,
          ),
         ),
        ),
        SizedBox(
         width: 15.0,
        ),
        Expanded(
         flex: 1,
         child: Container(
          height: 50.0,
          child: FlatButton(
           onPressed: () { _color = Colors.green.obs; },
           splashColor: Colors.blue.withOpacity(0.5),
           shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10)
           ),
           child: Text(
            'OK',
            style: TextStyle(
             color: Colors.white,
             fontSize: 20.0,
            ),
           ),
           color: Colors.green,
          ),
         ),
        ),
        SizedBox(
         width: 15.0,
        ),
        Expanded(
         flex: 1,
         child: Container(
          height: 50.0,
          child: FlatButton(
           onPressed: () { _color = Colors.blue.obs; },
           splashColor: Colors.blue.withOpacity(0.5),
           shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10)
           ),
           child: Text(
            'OK',
            style: TextStyle(
             color: Colors.white,
             fontSize: 20.0,
            ),
           ),
           color: Colors.blue,
          ),
         ),
        ),
        SizedBox(
         width: 15.0,
        ),
       ],
      ),
     ),
    ],
   )
  );
 }
}

Answer 1

В данном случае Вам нужен ObxValue. И используйте его максимально локально, только там где нужно:

ObxValue(
  (color) => AnimatedContainer(
    width: 150.0,
    height: 150.0,
    color: color.value,
    duration: Duration(milliseconds: 500),
  ),
  _color
),

А проблема в том, что Вы не задаёте новое значение для Observable (или Stream / называйте как хотите) который слушается, а присваиваете новый. На действие кнопки нужно изменить:

 _color.value = Colors.blue; // И другие цвета

Результат:

Полный подкорректированный код:

import 'package:flutter/material.dart';

import 'package:get/get.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Name App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Name Page'),
        ),
        body: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends GetWidget {
  final _color = Colors.amber.obs;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Align(
          alignment: Alignment(0.0, -0.75),
          child: ObxValue<Rx<Color>>(
            (color) => AnimatedContainer(
              width: 150.0,
              height: 150.0,
              color: color.value,
              duration: Duration(milliseconds: 500),
            ),
            _color,
          ),
        ),
        Align(
          alignment: Alignment(-1.0, 0.95),
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              SizedBox(
                width: 15.0,
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 50.0,
                  child: FlatButton(
                    onPressed: () {
                      _color.value = Colors.red;
                    },
                    splashColor: Colors.blue.withOpacity(0.5),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                    child: Text(
                      'OK',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      ),
                    ),
                    color: Colors.red,
                  ),
                ),
              ),
              SizedBox(
                width: 15.0,
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 50.0,
                  child: FlatButton(
                    onPressed: () {
                      _color.value = Colors.green;
                    },
                    splashColor: Colors.blue.withOpacity(0.5),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                    child: Text(
                      'OK',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      ),
                    ),
                    color: Colors.green,
                  ),
                ),
              ),
              SizedBox(
                width: 15.0,
              ),
              Expanded(
                flex: 1,
                child: Container(
                  height: 50.0,
                  child: FlatButton(
                    onPressed: () {
                      _color.value = Colors.blue;
                    },
                    splashColor: Colors.blue.withOpacity(0.5),
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)),
                    child: Text(
                      'OK',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      ),
                    ),
                    color: Colors.blue,
                  ),
                ),
              ),
              SizedBox(
                width: 15.0,
              ),
            ],
          ),
        ),
      ],
    );
  }
}

БЛОГ НА HUSL

GetX управление состоянием не выводит цвет

Ответы (1 шт):