How do I make sure the Tween values doesn't make a huge jump?-CodePudding

I'm implementing animations in my app. When the screen loads, I want to make the container come from bottom to the middle of the screen, gradually increasing in height and width. But the width jumps from 0 to 356:

code in initState:

width = Tween<double>(
      begin: 0.0,
      end: 400.0,
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.ease
      ),
    );
height = Tween<double>(begin: 0.0, end: 400.0).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.ease
      ),
    );
padding = EdgeInsetsTween(
      begin: const EdgeInsets.only(bottom: 0),
      end: const EdgeInsets.only(bottom: 100.0),
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.ease
      ),
    );

code:

late final AnimationController _animationController2 = AnimationController(
    duration: const Duration(milliseconds: 2000),
    vsync: this,
  );

AnimatedBuilder(
    animation: _animationController2,
    builder: (context, child) { 
    print("width: ${width.value}");
    return Container(
      padding: padding.value,
      width: width.value,
      height: height.value,
      child: Container());
     }
  )

debug output:

flutter: width: 0.0
flutter: width: 356.16800278425217
flutter: width: 357.25352596491575
flutter: width: 358.32799911499023
flutter: width: 359.0381249785423
flutter: width: 359.74326372146606
flutter: width: 360.4433849453926
flutter: width: 361.48409243673086
flutter: width: 362.17153687030077
flutter: width: 363.19308668375015
flutter: width: 363.8676643371582
flutter: width: 364.53704208135605
flutter: width: 365.20118951797485
flutter: width: 366.18753734976053
flutter: width: 366.8384760245681

What I want to achieve is a small step wise increase in tween values! desired output:

width: 0,
width: 20,
width: 40,
width: 60,
...

It's the same for height and padding. How should I implement it?

CodePudding user response：

The tween values increase with respect to your duration time. If you want to decrease the gap between the numbers increase the duration : -

_animationController = AnimationController(
  duration: const Duration(seconds: 5), // <-- increase this parameter
  vsync: this,
);

Full Code : -

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animation',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      debugShowCheckedModeBanner: false,
      home: const Speed(),
    );
  }
}

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

  @override
  State<Speed> createState() => _SpeedState();
}

class _SpeedState extends State<Speed>
    with TickerProviderStateMixin {
  late AnimationController _animationController;
  late Animation<double> width;
  late Animation<double> height;
  late Animation<EdgeInsets> padding;
  @override
  void initState() {
    super.initState();
    _animationController = AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this,
    );
    width = Tween<double>(
      begin: 0.0,
      end: 400.0,
    ).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.ease),
    );
    height = Tween<double>(begin: 0.0, end: 400.0).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.ease),
    );
    padding = EdgeInsetsTween(
      begin: const EdgeInsets.only(bottom: 0),
      end: const EdgeInsets.only(bottom: 100.0),
    ).animate(
      CurvedAnimation(parent: _animationController, curve: Curves.ease),
    );
    _animationController.forward();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(),
        body: Center(
          child: AnimatedBuilder(
              animation: _animationController,
              builder: (context, child) {
                print("width: ${width.value.toInt()}");
                return Container(
                    color: Colors.amber,
                    padding: padding.value,
                    width: width.value,
                    height: height.value,
                    child: Container());
              }),
        ));
  }
}

Output : -

Console Output : -

I/flutter (30331): width: 0
I/flutter (30331): width: 0
I/flutter (30331): width: 0
I/flutter (30331): width: 0
I/flutter (30331): width: 0
I/flutter (30331): width: 1
I/flutter (30331): width: 2
I/flutter (30331): width: 3
I/flutter (30331): width: 3
I/flutter (30331): width: 5
I/flutter (30331): width: 6
I/flutter (30331): width: 7
I/flutter (30331): width: 8
I/flutter (30331): width: 9
I/flutter (30331): width: 11
I/flutter (30331): width: 12
I/flutter (30331): width: 12
I/flutter (30331): width: 14
I/flutter (30331): width: 15
I/flutter (30331): width: 16
I/flutter (30331): width: 18
I/flutter (30331): width: 20
I/flutter (30331): width: 21
I/flutter (30331): width: 23
I/flutter (30331): width: 24
I/flutter (30331): width: 26
I/flutter (30331): width: 28
I/flutter (30331): width: 29

CodePudding user response：

As @pskink mentioned in the comments,

As per my code, I had to change from _animationController to _animationController2. From:

width = Tween<double>(
      begin: 0.0,
      end: 400.0,
    ).animate(
      CurvedAnimation(
        parent: _animationController,
        curve: Curves.ease
      ),
    );

to this:

width = Tween<double>(
      begin: 0.0,
      end: 400.0,
    ).animate(
      CurvedAnimation(
        parent: _animationController2,
        curve: Curves.ease
      ),
    );

for all: width, height and padding.