Flutter - Using AnimatedPadding Widget Examples

This tutorial is about how to use AnimatedPadding in Flutter.

What if you want to change the padding size of a widget with showing the animation. There's a widget called AnimatedPadding that allows you to do so. Basically just replace the standard Padding with AnimatedPadding and add some properties to control the animation.

Creating AnimatedPadding

Below is the constructor of AnimatedPadding.

  AnimatedPadding({
    Key key,
    @required this.padding,
    this.child,
    Curve curve = Curves.linear,
    @required Duration duration,
    VoidCallback onEnd,
  })

There are two required properties: padding (EdgeInsetsGeometry) and duration (Duration). padding is the same one as what you usually passed when using the non-animated Padding widget. duration is used to determine how long the animation is when the padding value changed.

To make it possible to change the padding value, we need to have a StatefulWidget and create a variable to store the padding value.

  double _paddingValue = 0;

Below is a simple example that wraps a Container inside an AnimatedPadding widget. The padding value depends on the value of the above variable. To change the value, there is also a number text input field along with a button to apply the value change.

  AnimatedPadding(
    padding: EdgeInsets.all(_paddingValue),
    duration: Duration(seconds: 1),
    child: Container(
        width: 400,
        height: 200,
        color: Colors.blue
    ),
  ),
  Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      Container(
        width: 100,
        height: 30,
        child: TextFormField(
          controller: _textController,
          keyboardType: TextInputType.number,
        ),
      ),
      SizedBox(width: 15),
      RaisedButton(
        child: Text('Set'),
        onPressed: () {
          setState(() {
            _paddingValue =  double.parse(_textController.text);
          });
        },
      ),
    ],
  )

Output:

 

Setting Animation Curve

The default animation curve is linear (Curves.linear). To change the used curve, set the curve property with any Flutter's Curve.

  AnimatedPadding(
    padding: EdgeInsets.all(_paddingValue),
    duration: Duration(seconds: 1),
    curve: Curves.bounceIn,
    child: Container(
        width: 400,
        height: 200,
        color: Colors.blue
    ),
  ),

Output:

 

Adding onEnd Callback

You can also add a callback (VoidCallback) that will be called when the animation ends by passing it as onEnd property.

  AnimatedPadding(
    padding: EdgeInsets.all(_paddingValue),
    duration: Duration(seconds: 1),
    onEnd: () {
      Scaffold.of(context).showSnackBar(
        SnackBar(content: Text('Animation ends'))
      );
    },
    child: Container(
        width: 400,
        height: 200,
        color: Colors.blue
    ),
  ),

Output:

 

Full code

Below is a full code example with custom curve and onEnd callback.

  import 'package:flutter/material.dart';
  import 'package:flutter/rendering.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Woolha.com Flutter Tutorial',
        home: _AnimatedPaddingExample(),
      );
    }
  }
  
  class _AnimatedPaddingExample extends StatefulWidget {
    @override
    _AnimatedPaddingExampleState createState() => new _AnimatedPaddingExampleState();
  }
  
  class _AnimatedPaddingExampleState extends State<_AnimatedPaddingExample> {
    final _textController = TextEditingController(text: '0');
    double _paddingValue = 0;
  
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('Woolha.com Flutter Tutorial'),
        ),
        body: Builder(
          builder: (context) => Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                AnimatedPadding(
                  padding: EdgeInsets.all(_paddingValue),
                  duration: Duration(seconds: 1),
                  curve: Curves.bounceIn,
                  onEnd: () {
                    Scaffold.of(context).showSnackBar(
                      SnackBar(content: Text('Animation ends'))
                    );
                  },
                  child: Container(
                      width: 400,
                      height: 200,
                      color: Colors.blue
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      width: 100,
                      height: 30,
                      child: TextFormField(
                        controller: _textController,
                        keyboardType: TextInputType.number,
                      ),
                    ),
                    SizedBox(width: 15),
                    RaisedButton(
                      child: Text('Set'),
                      onPressed: () {
                        setState(() {
                          _paddingValue =  double.parse(_textController.text);
                        });
                      },
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      );
    }
  }

Output:

 

Properties

Properties:

• Key key: The widget key, used to control if it's should be replaced.
• EdgeInsetsGeometry padding *: Space to inset the child.
• Widget child : The widget below this widget in the tree, where the animated padding will be applied on.
• Curve curve : Animation curve to be applied.
• Duration duration *: How long the animation is played.
• VoidCallback onEnd : A callback that will be called when the animation ends.

*: required

Summary

That's how to use AnimatedPadding. You can also read about:

• AnimatedCrossFade, a widget for creating fading effects when a widget is being replaced with another.
• AnimatedAlign, a widget for creating animation when the alignment of a widget changes.
• AnimatedOpacity, a widget for creating aniamation when the opacity of a widget changes.
• AnimatedSwitcher, a widget for creating animation when switching between two widgets.
• AnimatedSize, a widget that animates its size to match the size of its child.
• AnimatedContainer, a widget that starts an animation when the value of a property changes.