Flutter SDK provides us with many widgets which help us in animating elements on screen easily by implicitly managing the animations i.e. we need not worry about creating and managing intances of AnimationController during the lifecycle of the app. Two of those widgets which we’ll be seeing in this article are AnimatedPadding and AnimatedOpacity.

?Flutter SDK為我們提供了許多小工具，幫助我們通過隱含管理動畫動畫很容易在屏幕上的元素，即我們不必擔心創建和管理的intances AnimationController應用程序的生命周期中。 我們將在本文中看到的兩個小部件是AnimatedPadding和AnimatedOpacity 。

In this article, I am going to firstly explain the basic usage of each widget and then eventually we’ll be combining both the widgets and come up with a cool animation like shown above.

在本文中，我將首先解釋每個小部件的基本用法，然后最終我們將把這兩個小部件組合在一起，并給出一個如上所示的酷動畫。

動畫填充 (Animated Padding)

Animated Padding, as the word suggests is a kind of padding widget which will animate the change in padding taking place at runtime.

Animated Padding，正如這個詞所暗示的那樣，是一種填充小部件，它將動畫化在運行時發生的填充變化。

It is similar to the Padding widget except that it takes one extra required parameter which is Duration. The Duration attribute is used to specify the duration over which the animation should take place. The Duration could be seconds, milliseconds, minutes and also days if you are planning to create an animation which lasts days 😅.

它類似于Padding小部件，除了它需要一個額外的必需參數( Duration 。 Duration屬性用于指定動畫發生的持續時間。 該Duration可以是seconds ， milliseconds ， minutes也days ，如果你打算創造出持續數天😅的動畫。

In this example we’ll be animating the padding around a Container with the help of AnimatedPadding when the Container is tapped itself.

在這個例子中，我們將動畫周圍填充Container的幫助下AnimatedPadding當Container被竊聽本身。

The widget tree is pretty simple. We have a Container widget which is wrapped with GestureDetector to detect the onTap event. It is then wrapped with AnimatedPadding because we want to animate the padding around the Container widget and the whole thing is centered with the help of Center widget.

小部件樹非常簡單。 我們有一個用GestureDetector包裝的Container小部件，以檢測onTap事件。 然后使用AnimatedPadding進行包裝，因為我們要對Container小部件周圍的填充進行動畫處理，而整個內容將在Center小部件的幫助下Center 。

To the AnimatedPadding widget, we are passing a variable named _padding whose value we are updating inside setState().

給AnimatedPadding小部件，我們傳遞了一個名為_padding的變量，該變量的值將在setState()中更新。

Let’s pass a Curve to the curve attribute of AnimatedPadding. I personally like Curves.bounceOut.

讓我們將Curve傳遞給AnimatedPadding的curve屬性。 我個人喜歡Curves.bounceOut 。

AnimatedPadding(
  ...
  curve: Curves.bounceOut,
  ...
)

動畫不透明度 (Animated Opacity)

Animated Opacity, as the word suggests is a widget by means of which we can control the opacity of its child in an animated way, meaning the opacity will animate over a period of time depending upon the curve passed along with. The Duration field just like the previous widget is a required parameter here.

動畫不透明度，顧名思義是一個小部件，通過它我們可以以動畫方式控制其子級的不透明度，這意味著不透明度將在一段時間內進行動畫處理，具體取決于傳遞的曲線。 就像上一個小部件一樣，“ Duration字段是必填參數。

In this example, we will simply be toggling the opacity of a Text widget on the tap of RaisedButton.

在此示例中，我們只需在RaisedButton的水龍頭上切換Text小部件的不透明度RaisedButton 。

Note: The opacity passed should be a double between 0 and 1 but not less than zero or greater than 1.

注意：傳遞的不透明度應為0到1之間的兩倍，但不小于0或大于1。

Below I am toggling opacity between 1 and some non-zero double value less than 1 (I don’t remeber exactly, it is 0.3 I think).

在下面，我在1和一些小于1的非零double值之間切換不透明度(我不記得，我認為是0.3)。

結合動畫填充和動畫不透明度 (Combining both Animated Padding and Animated Opacity)

Now that we’ve seen a basic example of both the widgets, let us now build a proper example combining both of them.

現在我們已經看到了這兩個小部件的基本示例，現在讓我們構建一個將這兩個小部件組合在一起的適當示例。

We’ll be displaying a list of widgets, each of which when tapped animates to show the user that it has been selected. As you might have guessed we will be playing around with the opacity and padding of the widget which is been tapped upon to animate and draw user’s attention towards it.

我們將顯示一個小部件列表，點擊它們時會顯示每個小部件的動畫，以向用戶顯示已被選擇。 正如您可能已經猜到的那樣，我們將使用小部件的不透明性和填充性，利用它們來制作動畫并吸引用戶對其的注意。

The widget inside the list is a simple Container with some height and color representing an item in the list. It can be any widget but in our case just to keep the article to the point, I am simply using a Container widget.

列表內的小部件是一個簡單的Container具有一些高度和顏色，表示列表中的項目。 它可以是任何小部件，但在我們的情況下，只是為了使文章保持重點，我只是在使用Container小部件。

This is what the item in our list looks like. It is a Container which is wrapped with AnimatedOpacity to control the opacity of the Container and then wrapped with AnimatedPadding to control the spacing relative to the adjacent items in the list.

這就是我們列表中的內容。 它是一個用AnimatedOpacity包裝的Container ，以控制Container的不透明度，然后用AnimatedPadding包裝，以控制相對于列表中相鄰項目的間距。

The variable isSelected is what we’ll be updating which will then cause the change in values for opacity and padding which will then render our animation.

變量isSelected是我們將要更新的變量，它將導致opacity和padding值的更改，然后將呈現動畫。

First let’s just try this widget alone without putting it in the list along with other items to ensure that at least it is animating.

首先，讓我們單獨嘗試此小部件，而不將其與其他項一起放入列表中，以確保至少它是動畫的。

As we’ll be having a list of items with each item having its own isSelected instance, lets create a model class for the same.

由于我們將擁有一個項目列表，每個項目都有自己的isSelected實例，因此讓我們為它創建一個模型類。

class ItemModel {
  bool isSelected;
  ItemModel({this.isSelected = false});
}

We need to create a List of our ItemModel so as to keep track of selection status of each item in the list. So create a new list like below:

我們需要創建ItemModel的List ，以便跟蹤列表中每個項目的選擇狀態。 因此，如下創建一個新列表：

List<ItemModel> _items = [];

Let’s write a function to populate some items in the list we just created.

讓我們編寫一個函數，以填充剛創建的列表中的某些項目。

And call this function in initState() so that we have our items ready before the list is to be rendered.

并在initState()調用此函數，以便在呈現列表之前準備好項目。

@overridevoid initState() {
  populateItems();
  super.initState();
}

And of course the code for rendering the UI will change too as we are now going to display a list of items where each widget is of the type ListItem which we created earlier.

當然，呈現UI的代碼也將發生變化，因為我們現在將顯示項目列表，其中每個小部件都是我們先前創建的ListItem類型。

We’ll be using ListView.builder to render our list of items.

我們將使用ListView. builder ListView. builder以顯示我們的項目列表。

After tying up all the pieces, the final code should look like below:

捆綁所有內容后，最終代碼應如下所示：

Let’s run the code

讓我們運行代碼

And that is it. We’ve created a simple yet elegant animation combining AnimatedPadding and AnimatedOpacity !

就是這樣。 我們創建了一個簡單而優雅的動畫，結合了AnimatedPadding和AnimatedOpacity ！

Link to repository:

鏈接到存儲庫：

Thank you for reading my article. If you enjoyed reading it, please make sure to give some claps. Follow me for more articles on Flutter.

感謝您閱讀我的文章。 如果您喜歡閱讀，請確保鼓掌。 跟隨我以獲取有關Flutter的更多文章。

Below are my other profiles:

以下是我的其他個人資料：

• Twitter

  推特

• LinkedIn

  領英

• Github

  Github

• Instagram

  Instagram