1

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



ygzkrmtc
  • 177
  • 12
  • 1
    I believe this is a too vague question to post on SO. I suggest you to look into the [animation docs](https://flutter.dev/docs/development/ui/animations) where they have a lot of examples and guides to let you start your own animations. :) – Miguel Ruivo Jan 13 '21 at 22:54

0 Answers0