Blank white screen with using animationController

Question

Hello I want to add animationController and animatedBuilder to my project, I just want it to change width of container which includes background, but when I hit run, I dont recieve any error but just white blank screen appears on my welcome page, Please help me, How can I fix this, Thanks for your answers have a nice days.

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

Answer 1

You forgot to use the AnimatedBuilders child in its builder callback (the third parameter). Only the widget returned by builder is shown, child is used to specify some widgets that don’t depend on the animation, it you still have to include it in whatever you make in the builder. That is:

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

It also looks like you wanted to use _animation.value for the Container with instead of _controller.value.

Like the other answer said, you’ll have to start the animation with _controller.forward(); probably in initState. And you don’t want to do setState in the listener, because that will rebuild the whole statefull widget, instead of just the builder of AnimatedBuilder.

Btw, there is also AnimatedContainer, which is a bit more limited but also simpler.