Flutter Animated Container Duration Customization [Easy Flutter Guide]

In this tutorial, we’ll learn how to customize Flutter animated container duration with the help of an easy Flutter example.

Introduction: Flutter Animated Container Duration

It’s used to specify the speed of Flutter container animation. For instance, we want to change the width of container from 10 to 100. In that case, we can specify the speed of animation using the duration constructor of Flutter animated container widget.

Let’s implement the above theory using a practical Flutter code example.

Customizing Flutter Animated Container Duration

• Before starting, I’d want you to implement the code in your own compiler as well so you can see the animation in real-time.
• Let’s now first implement a simple Flutter animated container widget.
• We’ll provide this container a height of 100 and a width of dynamic value(default is 10.0).
• After that, we’ll give this container a background color so its visible on the screen.
• Now to specify the duration, we’ve to use the duration constructor of animated container widget. This constructor takes a duration widget and we’ll use its milliseconds constructor. For demonstration, we’ll pass it a value of 900. You can try it with other values/constructors as well.
• We’ve created a double variable and also we’ve wrapped this animated container with a gesture detector class. When the container is tapped, the value of variable will change from 10 to 100 and as a result, it’ll change the width of animated container as this value is passed to the width constructor of Flutter animated container widget.
• We also have used the Flutter set state so the state of screen will be changed when the button is tapped. See below code for practical demonstration:

 double widthVal=10.0;      // variable created and initialized

GestureDetector(
      onTap: () {
        setState(() {
          widthVal = 100.0;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 900),
        height: 100,
        width: widthVal,
        color: Colors.blue,
      ),
    )

First image shows the width of container when it’s not clicked.

Second image shows the width of container after its clicked or we can say, after the animation.

Do give this code a try and see the animation in real-time.

So this is how we can customize Flutter animated container duration. Do try it with other examples as well. Hope you like this post.

The complete source code of customized Flutter animated container duration is given in the below section.

Custom Flutter Animated Container Duration Source 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(
      debugShowCheckedModeBanner: false,
      home: Homepage(),
    );
  }
}
class Homepage extends StatefulWidget {
  @override
  State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
  double widthVal = 10.0;
  @override
  Widget build(BuildContext context) {
    return SafeArea(
        child: Scaffold(
            body: Center(
                child: GestureDetector(
      onTap: () {
        setState(() {
          widthVal = 100.0;
        });
      },
      child: AnimatedContainer(
        duration: Duration(milliseconds: 900),
        height: 100,
        width: widthVal,
        color: Colors.blue,
      ),
    ))));
  }
}

Conclusion

To conclude this tutorial, now you’ve a detailed and in-depth practical knowledge of how to customize Flutter animated container duration. I’d love to have your feedback on this post.

I’d also love to see you visit my other tutorials on Flutter app development and Python programming as well. Thank you for reading this post.