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),
],
),
),
),
);
}
}
You forgot to use the AnimatedBuilder
s 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.