直播系統原始碼，使用者在點選圖片時，通過淡入淡出的方式放大圖片的兩種方法

直播系統原始碼，使用者在點選圖片時，通過淡入淡出的方式放大圖片的兩種方法

第一種

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

以上就是直播系統原始碼，使用者在點選圖片時，通過淡入淡出的方式放大圖片的兩種方法， 更多內容歡迎關注之後的文章