Flutter components--Padding and AnimatedPadding

Schematic diagram:

Padding introduction

When there are many in the application widget , the screen often becomes very crowded at this time. If you want to keep some spacing between widgets at this time, use Padding

Why use  Padding instead of  Container.padding attribute  Container?

Container is to combine many simpler ones  widget in one convenient package, if only setting is needed  padding then we are better off using  Padding instead of Container

Padding property and description

serial number	field	Attributes	describe
1	padding	EdgeInsetsGeometry	Spacing for child widgets
2	child	Widget	child widget

The Padding property is used in detail

1、padding 、child

paddingwidgetpitch  for sub

child receive a child Widget

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,
              ),
            )
          ],
        ),
      ),
    );
  }
}

 

Detailed explanation of EdgeInsetsGeometry

EdgeInsetsGeometry It is a component that describes the margin, and its subclasses are generally used  EdgeInsets to set it.

1、fromLTRB

Set the left, top, right, and bottom margins, and you can set different values

Padding(
  padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.red,
  ),
),

 2、all

Set all margins to the same value at the same time

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

 3、only

Set the spacing of a side according to your needs

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

 4、symmetric

Set horizontal (up and down), or vertical (left and right) spacing

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

 full 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,
              ),
            )
          ],
        ),
      ),
    );
  }
}

Introduction to AnimatedPadding

AnimatedPadding constructor

AnimatedPadding({
    Key? key,
    required this.padding, // 边距
    this.child,  // 子Widget
    Curve curve = Curves.linear,  // 动画的运动速率
    required Duration duration,  // 动画的持续时间
    VoidCallback? onEnd,   // 动画结束时的回调
  }) : assert(padding != null),
       assert(padding.isNonNegative),
       super(key: key, curve: curve, duration: duration, onEnd: onEnd);

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("动画结束时的回调");
            },
          ),
          ElevatedButton(
            child: Text('改变padding的值'),
            onPressed: () {
              setState(() {
                paddingAllValue = paddingAllValue == 0.0 ? 50.0 : 0.0;
              });
            }),
        ],
      ),
    );
  }
}