使用animationController的空白白屏答案

【问题标题】：Blank white screen with using animationController使用animationController的空白白屏
【发布时间】：2021-04-19 00:40:44
【问题描述】：

您好，我想将 animationController 和 animatedBuilder 添加到我的项目中，我只是希望它更改包含背景的容器的宽度，但是当我点击运行时，我没有收到任何错误，但我的欢迎页面上只出现了白色的空白屏幕，请帮助我，我该如何解决这个问题，感谢您的回答，祝您度过愉快的一天。

import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'package:naber/screens/login_screen.dart';
import 'package:naber/screens/registration_screen.dart';
import '../widgets.dart';
import 'package:naber/constants.dart';
import 'login_screen.dart';


class WelcomeScreen extends StatefulWidget {
  static String id="welcome_screen";
  @override
  _WelcomeScreenState createState() => _WelcomeScreenState();
}

class _WelcomeScreenState extends State<WelcomeScreen> with TickerProviderStateMixin {
  AnimationController _controller;
  Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller=AnimationController(duration:Duration(seconds: 4),vsync: this);
    _animation=Tween<double>(begin: 1080, end:1480).animate(_controller);
    _controller.addListener(() {
      setState(() {
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body:AnimatedBuilder(
        animation: _animation,
        builder:(BuildContext context,_){
          return Container(
            width: _controller.value,
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage(kWelcomeScreenBackgroundImage),
                fit: BoxFit.cover,
              ),
            ),
          );
        },
        child: Padding(
          padding: EdgeInsets.all(20.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.start,
                textBaseline: TextBaseline.alphabetic,
                crossAxisAlignment: CrossAxisAlignment.end,
                children: [
                  Hero(
                    tag: "logo",
                    child: Container(
                      child: Image.asset(kLogoImage),
                      height: 140,
                    ),
                  ),
                  TypewriterAnimatedTextKit(
                    speed: Duration(milliseconds:200),
                    text:[kWelcomePageText],
                    textStyle: kWelcomePageTextStyle,
                  ),
                ],
              ),
              SizedBox(
                height: 70,
              ),
              WelcomeScreenButtons(text:kLoginText,color1:kLoginButtonColor1,
                  color2:kLoginButtonColor2,
                  color3:kLoginButtonColor3,route: LoginScreen.id),
              SizedBox(height: 15),
              WelcomeScreenButtons(text:kRegistrationText,color1:kRegisterButtonColor1,
                  color2:kRegisterButtonColor2,
                  color3:kRegisterButtonColor3,route: RegistrationScreen.id),
            ],
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

您忘记调用_controller.forward() 并且不需要在监听器中添加setState，因为动画是由AnimatedBuilder处理的

标签： flutter animation flutter-animation animationcontroller

【解决方案1】：

您忘记在其builder 回调（第三个参数）中使用AnimatedBuilders 子级。只显示了 builder 返回的小部件，child 用于指定一些不依赖于动画的小部件，您仍然必须将其包含在您在构建器中制作的任何内容中。那就是：

AnimatedBuilder(
  animation: animation,
  builder: (context, animation, child) => Container(
    width: animation.value,
    child: child,
  ),
  child: TheWidgetThatWillGoIntoTheContainer(),

您似乎还想将_animation.value 用于容器而不是_controller.value。

就像其他答案所说，您必须使用 _controller.forward(); 启动动画；可能在 initState 中。而且您不想在侦听器中执行 setState，因为这将重建整个有状态的小部件，而不仅仅是 AnimatedBuilder 的构建器。

顺便说一句，还有AnimatedContainer，有点局限，但也更简单。

【讨论】：

【解决方案2】：

试试这个：

initState() {
    ....... // Your code
    _startAnimation();
}

void _startAnimation() {
    try {
        _controller.forward().orCancel;
    } on TickerCanceled { }
}

【讨论】：