Flutter deep and simple components -Padding, AnimatedPadding

The Padding is introduced

When there are many widgets in your application, the screen can get crowded. If you want to keep some space between the widgets, use Padding

Why usePaddingInstead of usingContainer.paddingProperties of theContainer?

Container is a combination of many simpler widgets in a convenient package. If only padding is required, it is better to use padding rather than Container

The sample code

Many of the effects in this article are not screenshots. Download the source code to run the project source code address, or view the video tutorial address through the video tutorial

Padding property and description

There are two properties

field	attribute	describe
padding	EdgeInsetsGeometry	Spacing given to child widgets
child	Widget	The child widgets

Padding property is used in detail

1. Padding, child

Padding Gives the spacing to the child widgets

Child Receives a child Widget

The complete code

import 'package:flutter/material.dart';

class PaddingExample extends StatefulWidget {
  @override
  _PaddingExampleState createState() => _PaddingExampleState();
}

class _PaddingExampleState extends State<PaddingExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Padding example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.all(0),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(0),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(0),
              child: Container(
                width: 100,
                height: 100, color: Colors.orange, ), ) ], ), ), ); }}Copy the code

EdgeInsetsGeometry,

EdgeInsetsGeometry is a component that describes the margin, and is typically set using its subclass EdgeInsets.

1, fromLTRB

Set left, up, right, down margins, can be set to different values.

Method of use

Padding(
  padding: EdgeInsets.fromLTRB(10.20.30.40),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),
Copy the code

2, all

Set all margins to the same value

Method of use

Padding(
  padding: EdgeInsets.all(10),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
  ),
)
Copy the code

3, only

Set the spacing of one edge as needed

Method of use

Padding(
  padding: EdgeInsets.only(
    left: 10,
    right: 10
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.orange,
  ),
)
Copy the code

4, symmetric

Set the spacing horizontally (up and down), or vertically (left and right)

Method of use

Padding(
  padding: EdgeInsets.symmetric(
    vertical: 10,
    horizontal: 10
  ),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.orange,
  ),
)
Copy the code

The complete code

import 'package:flutter/material.dart';

class PaddingExample extends StatefulWidget {
  @override
  _PaddingExampleState createState() => _PaddingExampleState();
}

class _PaddingExampleState extends State<PaddingExample> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Padding example"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Padding(
              padding: EdgeInsets.fromLTRB(10.20.30.40),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.red,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(10),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.green,
              ),
            ),
            Padding(
              padding: EdgeInsets.only(
                left: 10,
                right: 10
              ),
              child: Container(
                width: 100,
                height: 100,
                color: Colors.orange,
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(
                vertical: 10,
                horizontal: 10
              ),
              child: Container(
                width: 100,
                height: 100, color: Colors.orange, ), ) ], ), ), ); }}Copy the code

AnimatedPadding introduction

An animated version of the 'Padding' component, scaled or enlarged to the specified Padding at the set timeCopy the code

AnimatedPadding constructor

  AnimatedPadding({
    Key? key,
    required this.padding, / / margin
    this.child,  / / child widgets
    Curve curve = Curves.linear,  // The motion rate of the animation
    required Duration duration,  // Duration of the animation
    VoidCallback? onEnd,   // The callback at the end of the animation
  }) : assert(padding ! =null),
       assert(padding.isNonNegative),
       super(key: key, curve: curve, duration: duration, onEnd: onEnd);
Copy the code

AnimatedPadding complete sample code

import 'package:flutter/material.dart';

class AnimatedPaddingExample extends StatefulWidget {
  @override
  _AnimatedPaddingExampleState createState() => _AnimatedPaddingExampleState();
}

class _AnimatedPaddingExampleState extends State<AnimatedPaddingExample> {
  double paddingAllValue = 0.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("AnimatedPaddingExample"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text('Padding: $paddingAllValue'),
          AnimatedPadding(
            padding: EdgeInsets.all(paddingAllValue),
            duration: Duration(milliseconds: 1000),
            curve: Curves.easeInOut,
            child: Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 4,
              color: Colors.blue,
            ),
            onEnd: () {
              print("Callback at the end of animation");
            },
          ),
          ElevatedButton(
            child: Text('Change the padding value'),
            onPressed: () {
              setState(() {
                paddingAllValue = paddingAllValue == 0.0 ? 50.0 : 0.0; }); })],),); }}Copy the code

AnimatedPadding effect display

conclusion

Using Padding is best when you just need to add some spacing between components. If the Padding needs to be resized and AnimatedPadding needs to be added in some cases, it’s best to use AnimatedPadding instead of spending a lot of time writing the animation.