No Animation with AnimatedSwitcher or AnimatedOpacity

Question

I'm learning flutter and I'm having behavior with the animation system.

I created a Radio Button which is a circle that should get filled when it gets clicked.

I created a stateful widget class and a state class.

In the state class, I build a :

   GestureDetector -> Container -> AnimatedSwitcher -> _animatedWidget

_animatedWidget is a Widget that changes when I click (in the GestureDetector onTap I do _changeSelect)

  void _changeSelect(){
    _isSelected = !_isSelected;
      if(_isSelected){
        setState(() {
          _animatedWidget = Container(width: double.infinity,height: double.infinity,decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black));
        });
      }
      else{
        setState(() {
          _animatedWidget = Container();          
        });
      }


  }

And this code is not working properly, it should fade in the full container and fade out the empty container but instead, it just pops in and pops out (like a classic change would do)

Here is the full code of my state class :


class _RadioButtonState extends State<RadioButton> {

  Widget _animatedWidget = Container();


  bool _isSelected = false;

  bool isSelected(){
    return _isSelected;
  }

  void _changeSelect(){
    _isSelected = !_isSelected;
      if(_isSelected){
        setState(() {
          _animatedWidget = Container(width: double.infinity,height: double.infinity,decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black));
        });
      }
      else{
        setState(() {
          _animatedWidget = Container();          
        });
      }


  }

  @override
  Widget build(BuildContext context){
    return GestureDetector(
      onTap: _changeSelect,
      child:
        Container(
          width: 16.0,
          height: 16.0,
          padding: EdgeInsets.all(2.0),
          decoration: BoxDecoration(
              shape: BoxShape.circle,
              border: Border.all(width: 2.0, color: Colors.black)
          ),
          child: AnimatedSwitcher(
            duration: Duration(seconds: 1),
            child: _animatedWidget,
          )

        ),
    );
  }
}

Note: I also tried with AnimatedOpacity instead of AnimatedSwitcher (with the full Container with a starting opacity of 0 increased to 1 when clicked) but it doesn't even change the view, however, the javascript looks to be working during the duration time

CopsOnRoad CopsOnRoad · Accepted Answer · 2020-02-29T17:17:00

Is this what you're looking for?

Widget _animatedWidget = Container();

bool _isSelected = false;

bool isSelected() {
  return _isSelected;
}

void _changeSelect() {
  _isSelected = !_isSelected;
  if (_isSelected) {
    setState(() {
      _animatedWidget = Container(
        key: ValueKey(1),
        width: double.infinity,
        height: double.infinity,
        decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.black),
      );
    });
  } else {
    setState(() {
      _animatedWidget = Container(
        key: ValueKey(2),
      );
    });
  }
}

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Center(
      child: GestureDetector(
        onTap: _changeSelect,
        child: Container(
            width: 66.0,
            height: 66.0,
            padding: EdgeInsets.all(2.0),
            decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(width: 2.0, color: Colors.black)),
            child: AnimatedSwitcher(
              duration: Duration(seconds: 1),
              child: _animatedWidget,
            )),
      ),
    ),
  );
}

No Animation with AnimatedSwitcher or AnimatedOpacity

1 Answers