In this article, I'm going to share an example on AnimatedPadding Widget.
Using AnimatedPadding Widget, you can animate the padding of the child widgets for the given duration.
Here is how the final output is going to look.
![](https://fluttercentral.com/Uploads/0b67db27-acd5-412a-901b-a6ad1eb9ea0f.gifwidth="50%height="auto](
Here is the full code from main.dart file. You can simply copy-paste and run the code to see the output.
color: rgb(212, 212, 212); background-color: rgb(30, 30, 30); font-family: Consolas, "Courier New", monospace; font-size: 14px; line-height: 19px; white-space: pre-wrap;](color: #569cd6;](import color: #ce9178;]('package:flutter/material.dart';
color: #569cd6;](void main() => runApp(MyApp());
color: #569cd6;](class MyApp color: #569cd6;](extends StatefulWidget { color: #569cd6;](@override _MyAppState createState() => _MyAppState();}
color: #569cd6;](class _MyAppState color: #569cd6;](extends State { double padValue = color: #b5cea8;](0; color: #569cd6;](@override Widget build(BuildContext context) {
color: #569cd6;](return MaterialApp( home: Scaffold( appBar: AppBar( title: Text(color: #ce9178;]("AnimatedPadding"), ), body: Column( children: [ Expanded( child: AnimatedPadding( child: Container( color: Colors.red, ), duration: color: #569cd6;](const Duration(seconds: color: #b5cea8;](1), padding: EdgeInsets.all(padValue), curve: Curves.easeInOut, ), ), Text(color: #ce9178;]('Padding Value: $padValue'), ButtonBar( alignment: MainAxisAlignment.center, children: [ RaisedButton( child: Text(color: #ce9178;]('Add Padding'), onPressed: () { setState(() { padValue = padValue + color: #b5cea8;](10; }); }, ), RaisedButton( child: Text(color: #ce9178;]('Sub Padding'), onPressed: () { setState(() { color: #569cd6;](if(padValue != color: #b5cea8;](0) { padValue = padValue - color: #b5cea8;](10; } }); }, ) ], )
], ), ), ); }}
Thanks,Srikanth