What is Animated Padding in Flutter

The AnimatedPadding Widget is another example of Implicit Animation. As a result, it is much faster than any Explicit Animation.

Therefore, when we try to animate a Padding of a Container, this is the best choice.

Consequently, the Padding automatically transitions the indentation over a given duration.

However, this animated version of the Padding has some limitations though. Therefore, if we want to transition more values of a Container Widget, the AnimatedContainer is the good choice.

Why?

Because the AnimatedContainer can transition more values at once.

Another good example of Implicit Animation is the AnimatedAlign.

The AnimatedAlign, on the other hand, automatically transitions its Child Widget’s position over a given duration.

Firstly, let us see how the AnimatedPadding Widget works.

After that, we will learn how we can use it without using a Stateful Widget.

In the typical use case, we use the Stateful Widget. But, we can maintain the State using the Provider Package.

Animated Padding in Flutter and Provider

Let us first try to understand the role of the Padding Widget.

The Padding widget provides buffers and spaces between the Widgets, and the screen borders.

We normally issue a constant Double “Type” as its value.

But to dynamically change the padding of a widget, firstly, we need to change the value. As we change the value, the change of State takes place.

As a result, we can add Animation between the two padding insets. And, for that, we use the AnimatedPadding widget.

We just wrap the Child Widget with the Animated Padding Widget.

We start with a Model class that will provide the change to the padding value.

class ChangePadding with ChangeNotifier {
  double padValue = 1.0;
  void changePadding() {
    padValue = padValue == 0.0 ? 100.0 : 0.0;
    notifyListeners();
  }
}

Next, we provide that “Type” to the Widgets that require it.

Subsequently, the full code looks like the following.

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

class ChangePadding with ChangeNotifier {
  double padValue = 1.0;
  void changePadding() {
    padValue = padValue == 0.0 ? 100.0 : 0.0;
    notifyListeners();
  }
}

void main() {
  Provider.debugCheckInvalidValueType = null;
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => ChangePadding()),
      ],
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Animated Padding';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title)),
        body: const AnimatedPaddingExample(),
      ),
    );
  }
}

class AnimatedPaddingExample extends StatelessWidget {
  const AnimatedPaddingExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    ChangePadding _padValueChange = Provider.of(context);
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        AnimatedPadding(
          padding: EdgeInsets.all(_padValueChange.padValue),
          duration: const Duration(seconds: 2),
          curve: Curves.easeInOut,
          child: Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height / 5,
            color: Colors.blue,
          ),
        ),
        Text('Padding: ${_padValueChange.padValue}'),
        ElevatedButton(
            child: const Text('Change padding'),
            onPressed: () {
              _padValueChange.changePadding();
            }),
      ],
    );
  }
}

Basically, we need to pass values to the arguments “padding”, “duration” and “curve”.

According the argument “duration”, the padding-animation changes.

The value of “curve” arguments decides which kind of animation-effect will be applied.

And, finally, whenever the padding variable changes, the padding will animate.

For many other types of Animations please visit the respective branches of the GitHub Repository.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

GitHub repository

Technical blog

Twitter