This is the fifth day of my participation in the More text challenge

preface

In our previous article we talked about the animation component AnimatedContainer corresponding to the most commonly used Widget Container in Flutter. Many of the properties of Flutter can be animated when their values change. Nesting an AnimatedContainer would be cumbersome if we only wanted to set a single property such as the padding, and it wouldn’t be elegant if we wanted to use absolute positioning in the Stack. In this article we will discuss some of the “single property animation components” of Flutter.

AnimatedPadding



This Widget withAnimatedContainerIn thepaddingProperty is similar, we just need to set oneduration 和 paddingIt is very convenient to use nesting separately on our custom components.

/// attribute
var height = 100.0;
Duration duration = Duration(milliseconds: 300);
var padding = 0.0;
/ / set
GestureDetector(
  onTap: () {
		// Click to change the margin
    this.padding = padding == 0 ? 30 : 0;
    setState(() {});
  },
  child: AnimatedPadding(
    duration: duration,
    curve: Curves.easeIn,
    // Set the margin
    padding: EdgeInsets.all(padding),
    child: DescContainer(
      height: height,
      width: width,
      color: Colors.blue,
      text: 'AnimatedPadding',),),)Copy the code

Custom universal DescContainer

This is the generic description container component that we pulled out. For future reuse, the project also recommends that you pull out the generic Widget into a separate component for use, usually by adding properties when you extend it.

/// Universal description container
class DescContainer extends StatelessWidget {
  const DescContainer({
    Key? key,
    required this.color,
    required this.height,
    required this.width,
    required this.text,
  }) : super(key: key);
  // Background color
  final Color color;
  / / width
  final double width;
  / / height
  final double height;
  / / text
  final String text;

  @override
  Widget build(BuildContext context) {
    returnContainer( color: color, height: height, width: width, alignment: Alignment.center, child: Text( text, style: TextStyle( color: Colors.white, ), ), ); }}Copy the code

AnimatedAlign

In the last post we wereAnimatedContainerBy settingalignmentProperty to change the alignment of Text. Here Flutter writes a separate one for us to use easily.

/// attribute
var alignment = Alignment.center;
GestureDetector(
  onTap: () {
    var x = Random.secure().nextInt(3);
    var y = Random.secure().nextInt(3);
    // Alignment The Alignment consists of [-1, 0, and 1] x and y
    this.alignment = Alignment(x - 1, y - 1);
    setState(() {});
  },
  / / the background
  child: Container(
    height: 200,
    color: Colors.grey[350],
    child: AnimatedAlign(
      // Set the alignment
      alignment: alignment,
      duration: duration,
      child: DescContainer(
        height: 60,
        width: 180,
        color: Colors.amber,
        text: 'AnimatedAlign'(), (), ()Copy the code

Alignment (see the source code together)

Let’s extend this to see how Alignment is implemented in the source code.

// Alignment classes inherit from AlignmentGeometry
class Alignment extends AlignmentGeometry {
  const Alignment(this.x, this.y)
    : assert(x ! =null),
      assert(y ! =null);
  final double x;
  final double y;
  static const Alignment topLeft = Alignment(1.0.1.0); .static const Alignment center = Alignment(0.0.0.0); .static const Alignment bottomRight = Alignment(1.0.1.0); . }Copy the code

It can be seen here that Alignment is a class composed of two attributes, x and y, where the values of x and Y are [-1,0,1], respectively, as follows:

  • X: [-1,0,1] : [left, middle, right]
  • Y: [-1,0,1] : [up, middle, down]

We can also see that constants like topLeft, Center, bottomRight, etc. that we often use are composed of x and y [-1,0,1]

Gummed up.

It’s often used in projectsStackAnd then by givingThe child widgetsA nestedPositionedTo achieve the location of the sub-component layout, if you want to add animation we enableAnimatedPositionedOk, let’s see what happens.

/// We won't post the entire code here
/// Click to change the upper left and lower right distance
onTap: () {
  this.top = top == 0 ? 20 : 0;
  this.left = left == 0 ? 30 : 0;
  this.right = right == 0 ? 40 : 0;
  this.bottom = bottom == 0 ? 80 : 0;
  setState(() {});
}
Stack(
  fit: StackFit.expand,
  children: [
    AnimatedPositioned(
      // Set the animation duration
      duration: duration,
      // Set the animation curve
      curve: Curves.decelerate,
      // Set positioning to the upper left
      top: top,
      left: left,
      child: DescContainer(
        height: 60,
        width: 180,
        color: Colors.cyan,
        text: 'AnimatedPositioned',
      ),
    ),
    AnimatedPositioned(
      duration: duration,
      curve: Curves.decelerate,
      // Set positioning to the lower right
      right: right,
      bottom: bottom,
      child: DescContainer(
        height: 60,
        width: 180,
        color: Colors.amber,
        text: 'AnimatedPositioned'(), (],)Copy the code

AnimatedOpacity

If you want to have an animation effect when the opacity changes, you can use this Widget, just set it upopacityOpacity is fine. It works well in transition animations.

GestureDetector(
  onTap: () {
    // Click toggle to change transparency,
    this.opacity = opacity == 1 ? 0.5 : 1;
    setState(() {});
  },
  child: AnimatedOpacity(
    // Set transparency
    opacity: opacity,
    // Set the animation duration
    duration: duration,
    // Set the animation curve
    curve: Curves.easeOut,
    child: DescContainer(
      height: 60,
      width: 300,
      color: Colors.purple,
      text:
      'AnimatedOpacity opacity:${opacity.toStringAsFixed(2)}',),),)Copy the code

The scope of

  • Range from 0.0 to 1.0
  • 1: Completely opaque
  • 0: Full transparency

Source warehouse

Based on the latest version of Flutter 🔥

  • Flutter Widgets warehouse

Refer to the link

  • AnimatedPadding (Flutter Widget of the Week)
  • Flutter-AnimatedPadding
  • Flutter-AnimatedAlign
  • AnimatedPositioned (Flutter Widget of the Week)
  • Flutter-AnimatedPositioned
  • AnimatedOpacity (Flutter Widget of the Week)
  • Flutter-AnimatedOpacity

Pay attention to column

  • This article has been included in the column at 👇 below, you can follow it directly
  • Read more | The series continues to be updated

👏 welcome to like ➕ collect ➕ pay attention, please feel free to comment on 👇 if you have any questions, I will reply as soon as possible