How to apply two tweens for one widget in flutter?

Viewed 197

So I have a container, I want to scale it from 0 to 1.1 and then back to 1.0 so 1.1 to 1.0.

I tried attaching two tweens but it produces weird result. The container is already scaled to 1.0 and then it starts animating from 1.1 to 1.0.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _scale;
  late Animation<double> _scaleAnimation;
  
  @override
  void initState() {
    _scale = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 1000));
    _scaleAnimation = _scale
        .drive(CurveTween(curve: Curves.ease))
        .drive(Tween<double>(begin: 0.0, end: 1.0))
        .drive(Tween<double>(begin: 1.0, end: 1.1));

    _scale.forward();
    super.initState();
  }
  
  @override
  void dispose() {
    _scale.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ScaleTransition(
          scale: _scaleAnimation,
          child: Container(
            height: 100,
            width: 100,
            color: Colors.red
          ),
        ),
      ),
    );
  }
}
1 Answers

You can use TweenSequence

 _scaleAnimation = TweenSequence(
      <TweenSequenceItem<double>>[
        TweenSequenceItem<double>(
          tween:
              Tween(begin: 0.0, end: 1.1).chain(CurveTween(curve: Curves.ease)),
          weight: 50.0,
        ),
        TweenSequenceItem<double>(
          tween:
              Tween(begin: 1.1, end: 1.0).chain(CurveTween(curve: Curves.ease)),
          weight: 50.0,
        ),
      ],
    ).animate(_scale);
Related