1

I have created this animation for displaying a profile and I want to stop the animation when the profile picture animation is completed and before the opacity of the text below starts to change. Now, I know that the profile picture animation changes from 0.3 to 0.6 and so I want to stop the animation at 0.6. Here is the code.

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

class profile extends StatefulWidget {
@override
_profileState createState() => _profileState();
}

class _profileState extends State<profile> with SingleTickerProviderStateMixin{

AnimationController _animationController;

Animation<double> barHeight;
Animation<double> avatarSize;
Animation<double> textOpacity;


@override
void initState() {
// TODO: implement initState
super.initState();
_animationController = AnimationController(vsync: this,duration: Duration(seconds: 5));
_animationController.forward();

barHeight = Tween(begin: 0.0,end: 250.0).animate(CurvedAnimation(parent:_animationController,curve: 
Interval(0.1,0.3,curve:Curves.easeInOutQuint)));
avatarSize = Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent:_animationController,curve: 
Interval(0.3,0.6,curve:Curves.easeInOutCirc)));
textOpacity = Tween(begin: 0.0,end: 1.0).animate(CurvedAnimation(parent:_animationController,curve: 
Interval(0.6,1,curve:Curves.easeInOutCirc)));



}


Widget _buildanimation(BuildContext context,Widget child, Size size){
return Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('assets/bgi1.png'),
      fit: BoxFit.fill
    )
  ),
  child: Column(
    children: <Widget>[
      SizedBox(height: 250,
        child: Stack(
          overflow: Overflow.visible,
          children: <Widget>[
            Opacity(
              opacity: 0.9,
              child: Container(
                height: barHeight.value,
                width: double.infinity,
                decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage('assets/books.jpg'),
                  fit: BoxFit.fitWidth
                )
                ),
              ),
            ),
            Positioned(
              top: 200,
              left: size.width/2-70,
              child: Transform(
                alignment: Alignment.center,
                transform: Matrix4.diagonal3Values(avatarSize.value, avatarSize.value, 1.0),
                child: Container(
                  width: 120,
                  height: 120,
                  decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(100),
                  ),
                  child: CircleAvatar(
                    backgroundImage: AssetImage('assets/profile.jpg'),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),

          Padding(
            padding: const EdgeInsets.all(12),
            child: Column(
              children: <Widget>[
                SizedBox(height: 60,),
                Opacity(opacity:textOpacity.value,
                    child: Text(
                        "Gillian Flynn",
                      style: GoogleFonts.lobster(fontSize: 50,color: Colors.blue[900]),
                    )),
                SizedBox(height: 40,),
                Opacity(opacity:textOpacity.value,child: Padding(
                  padding: const EdgeInsets.all(10.0),
                  child: Text(
                      "Gillian Flynn was born in Kansas City, Missouri to two community-college 
professors—her mother taught reading; her father, film. Thus she spent an inordinate amount of her 
youth nosing through books and watching movies. She has happy memories of having A Wrinkle in Time 
pried from her hands at the dinner table, and also of seeing Alien, Psycho and Bonnie and Clyde at a 
questionable age (like, seven). It was a good childhood.",
                    style: GoogleFonts.kanit(fontSize: 15),

                  ),
                ))
              ],
            )
        ),
    ],
  ),
);
}

@override
void dispose() {
// TODO: implement dispose
super.dispose();
_animationController.dispose();
}



@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Scaffold(
  body: AnimatedBuilder(
    animation: _animationController,
    builder: (context,child)=> _buildanimation(context,child,size),
  )
);
}
}

I am asking this because I want to know if I can perform specific intervals of animations alone using one animationcontroller itself.

  • So Tween does not take part of the animation, it only defines the values at the start and the end of the animation. In your case the animation controller goes from 0 -> 1 and the avatar tween makes sure that when the animation controller is at 0 the tween value is 0.3, and when it is 1 the tween value is 0.6. Stopping at 0.6 would mean stopping at the end. Read more in the docs [here](https://api.flutter.dev/flutter/animation/Tween-class.html#instance-properties) – Nemi Shah Aug 26 '20 at 09:58
  • The interval you use in tween is basically determining when the value of your tween should change based on the animation controller value. In the case of avatarSize the tween value will remain at 0 till the animation controller value reaches 0.3 and will reach 1 and remain there after the animation controller value reaches 0.6 – Nemi Shah Aug 26 '20 at 10:06

0 Answers0