如何在Flutter中实现屏幕加载时渐现小部件？

Question

这是一个登录页面，我希望当屏幕加载时，所有的小部件都可以平滑地淡入

- Neha Garg

---

请分享你目前尝试过的代码。 - Raine Dale Holgado

嗨，你看到这个小部件了吗？https://api.flutter.dev/flutter/widgets/AnimatedCrossFade-class.html - Sajjad

Answer 1

嘿，你看一下使用Animated Opacity可以实现渐变过渡效果。

示例代码：

    class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double widget1Opacity = 0.0;
  

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Future.delayed(Duration(milliseconds: 300), () {
      widget1Opacity = 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: AnimatedOpacity(
            opacity: widget1Opacity,
            duration: Duration(seconds: 3),
            child: FlutterLogo(
              size: 200,
              style: FlutterLogoStyle.markOnly,
            )),
      ),
    );
  }
}

- Akshay Kumar U

---

你必须在 widget1Opacity = 1; 后添加 setState(() {}); 来显示带有淡入动画的小部件。 - Marjan Davodinejad