我正在创建一个仪表板,其中包含两个小部件,文本和两个容器的补间动画.但是,我想让两个容器的不透明度慢慢从不可见变为可见…所以我使用了AnimatedOpacity.但我不知道该怎么做.

Any help would be appreciated..

class _IntroState extends State<Intro> with SingleTickerProviderStateMixin {
  Animation animation;
  AnimationController animationController;

   @override
   void initState() {
     super.initState();
      animationController = AnimationController(
        duration: Duration(seconds: 2),
        vsync: this,
     );

    animation = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation(
        parent: animationController, curve: Curves.fastOutSlowIn));
    animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    bool _visible = false;
    final double width = MediaQuery.of(context).size.width;

  return AnimatedBuilder(
      animation: animationController,
      builder: (BuildContext context, Widget child) {
         return Scaffold(
           //BODDY
            body: ListView(
              hildren:<Widget>[
                 new Stack(
                   children: <Widget>[
                     new Transform(
                       //ANIMATED OPACITY
                       new AnimatedOpacity(
                          opacity: _visible ? 0.0 : 1.0,
                          duration: Duration(milliseconds: 500),
                          child: new Padding(
                            padding: const EdgeInsets.symmetric(
                                  horizontal: 12.0),
                            child: new Row(
                               children: <Widget>[
                                  Expanded(
                                   child: Row(
                                     children: <Widget>[
                                       child: Padding(
                                         padding: const EdgeInsets.symmetric(horizontal: 8.0),
                                          child: Container(
                                            child: Column(
                                              children: <Widget>[
                                                //THIS THE CONTAINER
                                                new Container(. . .),
                                                new Container(. . .)

推荐答案

使用FadeTransition小部件而不是AnimatedOpacity.这使您可以手动控制动画:

  @override
  Widget build(BuildContext context) {
    return FadeTransition(
      opacity: animationController.drive(CurveTween(curve: Curves.easeOut)),
      child: ...,
    );
  }

Dart相关问答推荐

如何映射作为DART中其他模型基础的复杂模型

如何在 Dart 2.17+ 中处理future 的枚举值

polymer.dart 中的@observable 和@published 有什么区别?

如何在flutter中加载数据之前显示进度对话框?

AppLifcycleState.didChangeLifecycleState( ) 函数在应用程序进入前台或后台时不被调用

AngularDart 可以直接路由到组件吗?

如何用 Flutter 在同屏路由上制作英雄风格的动画?

Flutter ButtonRow 填充

Flutter - 为什么滑块不会在 AlertDialog 中更新?

谷歌dart Regions?

flatter:如何使用JSON数据创建数组

如何在Dart中创建空Map

Flatter Container()与SizedBox()的虚拟空容器

为什么我不能将数字转换为双精度数?

Flutter:出现键盘时背景图像正在挤压

用 dart 解析日期

如何在 Dart 中尚不存在的目录 struct 中创建文件?

在 Dart 中,将动态转换为给定类型或返回 null 的语法好方法?

List firstWhere Bad state: No element

你如何在 Dart 中构建一个单例?