I am begginner flutter developer, I want to take a support, I designed welcome page and I put background image to the container, but I want it to scale and re-scale forever while user on welcome page, I just want to learn teory of animation controller and how to use them. How can I implement this to my code. Thank you... Have a nice day.
import 'package:flutter/material.dart';
import 'package:animated_text_kit/animated_text_kit.dart';
import 'file:///C:/Users/yagiz/AndroidStudioProjects/naber/lib/screens/login_screen.dart';
import 'file:///C:/Users/yagiz/AndroidStudioProjects/naber/lib/screens/registration_screen.dart';
import '../widgets.dart';
import 'package:naber/constants.dart';
class WelcomeScreen extends StatefulWidget {
static String id="welcome_screen";
@override
_WelcomeScreenState createState() => _WelcomeScreenState();
}
class _WelcomeScreenState extends State<WelcomeScreen> with TickerProviderStateMixin {
bool isFinished;
AnimationController controllerForContainerHeight;
AnimationController controllerForContainerWidth;
Animation scaleAnimationForContainerWidth;
Animation scaleAnimationForContainerHeight;
@override
void initState(){
super.initState();
controllerForContainerWidth=AnimationController(duration:(Duration(seconds: 2)),vsync: this);
scaleAnimationForContainerWidth=Tween<double>(begin: 1080, end: 1380).animate(controllerForContainerWidth);
controllerForContainerWidth.forward();
controllerForContainerWidth.addListener(() {
setState(() {
});
});
controllerForContainerWidth.addStatusListener((status) {
if(status==AnimationStatus.completed){
controllerForContainerWidth.reverse();
}
if(status==AnimationStatus.dismissed){
controllerForContainerWidth.forward();
}
});
controllerForContainerHeight=AnimationController(duration:(Duration(seconds: 2)),vsync: this);
scaleAnimationForContainerHeight=Tween<double>(begin: 1920, end: 2220).animate(controllerForContainerHeight);
controllerForContainerHeight.forward();
controllerForContainerHeight.addListener(() {
setState(() {
});
});
controllerForContainerHeight.addStatusListener((status) {
setState(() {
if(status==AnimationStatus.completed){
controllerForContainerHeight.reverse();
}
if(status==AnimationStatus.dismissed){
controllerForContainerHeight.forward();
}
});
});
controllerForContainerHeight.repeat(reverse: true);
}
@override
void dispose(){
controllerForContainerWidth.dispose();
controllerForContainerHeight.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: AnimatedBuilder(
animation: controllerForContainerHeight,
builder: (BuildContext context,_){
return AnimatedBuilder(
animation: controllerForContainerWidth,
builder: (BuildContext context,_){
return Container(
width: controllerForContainerWidth.value,
height: controllerForContainerHeight.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),
],
),
),
);
}
);
}
),
);
}
}