CODEWITHSUNDEEP
dartflutterflutter-animation
niwufujol
niwufujol

Reputation: 43

Using SizeTransition widget

I want to use SizeTransition widget for just an image not for page. It will be my loading page and while loading the application app symbol will be displayed with a size transition.

https://docs.flutter.io/flutter/widgets/SizeTransition-class.html

I want my logo with this effect in the link. However there is not enough source for me to learn about that widget. Can you please give me an example? I tried something like this but it;s not working.

class _AnimTestState extends State<AnimTest>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  @override
  void initState() {
    super.initState();
    controller = AnimationController(vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizeTransition(
        child: Image.asset('assets/images/appLogo.png'),
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: controller,
        ),
      ),
    );
  }
}

Upvotes: 4

Views: 9519

Answers (3)

CopsOnRoad
CopsOnRoad

Reputation: 267524

class _AnimTestState extends State<HomePage> with SingleTickerProviderStateMixin {
  AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 400),
    )..repeat(reverse: true); // automatically animation will be started
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SizeTransition(
        child: Image.asset('assets/images/appLogo.png'),
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: controller,
        ),
      ),
    );
  }
}

You can also use _controller.forward() or _controller.reverse() in a button press if you don't want it to run automatically like I did.

Upvotes: 4

David Schneider
David Schneider

Reputation: 609

In addition to Ryosuke's answer (adding controller.forward(), be careful not to do this in build() other than for testing purposes), in order to achieve the effect displayed on the page you linked, you might want to consider

  1. centering your SizeTransition widget by wrapping it in a Center() widget
  2. specifying the transition axis by adding axisAlignment: -0.5 to your SizeTransition widget (see https://docs.flutter.io/flutter/widgets/SizeTransition/axisAlignment.html for details on why).
@override
Widget build(BuildContext context) {
  controller.forward();
  return Scaffold(
    body: Center(
      child: SizeTransition(
        child: Image.asset('assets/images/appLogo.png'),
        axisAlignment: -0.5,
        sizeFactor: CurvedAnimation(
          curve: Curves.fastOutSlowIn,
          parent: controller,
        ),
      ),
    ),
  );
}

Upvotes: 0

Ryosuke
Ryosuke

Reputation: 3892

First of all give the controller a duration, either in the constructor like this:

controller = AnimationController(vsync: this,duration: Duration(seconds: 1));

or anywhere before calling controller.forward() like this:

controller.duration = Duration(seconds: 1);

And last and most important thing, you need to start the animation by calling

controller.forward();

Upvotes: 3

Related Questions