Flutter 淡入淡出效果

动漫教给我们的道理，哪一句让你眼眶湿润了

Animation teaches us the truth, which one let your eyes wet

Widget 的淡入淡出效果

class AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnimatedOpacity(
            //opacity=0.0透明
            //opacity=1.0完全显示
            opacity: _visible ? 1.0 : 0.0,
            duration: Duration(milliseconds: 500),
            // The green box must be a child of the AnimatedOpacity widget.
            child: Container(
              width: 200.0,
              height: 200.0,
              color: Colors.blue,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.play_arrow),
          onPressed: () {
            setState(() {
              _visible = !_visible;
            });
          },
        ),
      ),
    );
  }
}

lass AnimatedContainerApp extends StatefulWidget {
  @override
  _AnimatedContainerAppState createState() => _AnimatedContainerAppState();
}

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: <Widget>[
              AnimatedOpacity(
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 3000),
                // The green box must be a child of the AnimatedOpacity widget.
                child: Container(
                  width: 350.0,
                  height: 350.0,
                  color: Colors.blue.withOpacity(0.2),
                  child: Text('1'),
                  alignment: Alignment.bottomRight,
                ),
                curve: Curves.linear,
              ),
              AnimatedOpacity(
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 2500),
                // The green box must be a child of the AnimatedOpacity widget.
                child: Container(
                  width: 300.0,
                  height: 300.0,
                  color: Colors.blue.withOpacity(0.3),
                  child: Text('2'),
                  alignment: Alignment.bottomRight,
                ),
                curve: Curves.linear,
              ),
              AnimatedOpacity(
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 2500),
                // The green box must be a child of the AnimatedOpacity widget.
                child: Container(
                  width: 250.0,
                  height: 250.0,
                  color: Colors.blue.withOpacity(0.4),
                  child: Text('3'),
                  alignment: Alignment.bottomRight,
                ),
                curve: Curves.linear,
              ),
              AnimatedOpacity(
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 2000),
                // The green box must be a child of the AnimatedOpacity widget.
                child: Container(
                  width: 200.0,
                  height: 200.0,
                  color: Colors.blue.withOpacity(0.5),
                  child: Text('4'),
                  alignment: Alignment.bottomRight,
                ),
                curve: Curves.linear,
              ),
              AnimatedOpacity(
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 1500),
                // The green box must be a child of the AnimatedOpacity widget.
                child: Container(
                  width: 150.0,
                  height: 150.0,
                  color: Colors.blue.withOpacity(0.6),
                  alignment: Alignment.bottomRight,
                  child: Text('5'),
                ),
                curve: Curves.linear,
              ),
              AnimatedOpacity(
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 1000),
                // The green box must be a child of the AnimatedOpacity widget.
                child: Container(
                  width: 100.0,
                  height: 100.0,
                  color: Colors.blue.withOpacity(0.64),
                  alignment: Alignment.bottomRight,
                  child: Text('6'),
                ),
                curve: Curves.linear,
              ),
              AnimatedOpacity(
                opacity: _visible ? 1.0 : 0.0,
                duration: Duration(milliseconds: 500),
                // The green box must be a child of the AnimatedOpacity widget.
                child: Container(
                  width: 50.0,
                  height: 50.0,
                  alignment: Alignment.bottomRight,
                  color: Colors.blue.withOpacity(0.98),
                  child: Text('7'),
                ),
                curve: Curves.linear,
              ),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.play_arrow),
          onPressed: () {
            setState(() {
              _visible = !_visible;
            });
          },
        ),
      ),
    );
  }
}

AnimatedContainer+AnimatedOpacity组合使用

class _AnimatedContainerAppState extends State<AnimatedContainerApp> {
  bool _visible = true;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: AnimatedOpacity(
            //opacity=0.0透明
            //opacity=1.0完全显示
            opacity: _visible ? 1.0 : 0.0,
            duration: Duration(milliseconds: 500),
            // The green box must be a child of the AnimatedOpacity widget.
            child: AnimatedContainer(
              width: _visible ? 200.0 : 100.0,
              height: _visible ? 100.0 : 200.0,
              color: _visible ? Colors.red : Colors.blue,
              duration: Duration(seconds: 2),
              curve: Curves.ease,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Icon(Icons.ac_unit),
                  Icon(Icons.ac_unit),
                  Icon(Icons.ac_unit),
                ],
              ),
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.play_arrow),
          onPressed: () {
            setState(() {
              _visible = !_visible;
            });
          },
        ),
      ),
    );
  }
}

参考

浅尝flutter中的动画（淡入淡出）

Flutter Widgets 之 Opacity 和AnimatedOpacity

本文地址：https://blog.csdn.net/u013491829/article/details/109646683