Skip to content

[Flutter] 使用 AnimatedContainer 來將元件變形加上動畫

Last Updated on 2021-10-12 by Clay

在設計 APP 的過程中,我們經常會有需要將元件變形便上動畫的時候。常見的一個例子,便是展開眾多的選項時,要顯示如卷軸攤開般的動畫。

當然,如果直接改動元件的長寬當然也可以做到,可是加上漸變的動畫總是更好。

本文將記述如何透過 AnimatedContainer 來完成元件變形的漸變動畫。AnimatedContainer 是一個跟 Container 類似的 widget,不過會在我們調整 AnimatedContainer 的屬性時,在舊值與新值間自動建立動畫。


如何使用 AnimatedContainer

我們會需要用到以下元件:

  • StatefulWidget:用來在每次更動元件屬性於更新頁面
  • AnimatedContainer:如上所述,會自動產生漸變動畫的元件
  • FloatingActionButton:控制元件變形的按鈕

另外,AnimatedContainer 更動的屬性值就以 Random 的方式產生,分別更改以下各類屬性值:

  • height: 元件的高度
  • width:元件的寬度
  • decoration-borderRadius:元件的邊角弧度(border radius)
  • decoration-color:元件的顏色
  • duration:動畫的時長

那麼,以下直接看段範例程式碼:

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


// Main
void main() => runApp(MyApp());


class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: AnimatedContainerPage(),
    );
  }
}


class AnimatedContainerPage extends StatefulWidget {
  @override
  _AnimatedContainerPage createState() => _AnimatedContainerPage();
}


class _AnimatedContainerPage extends State<AnimatedContainerPage> {
  // Init
  int _duration = 1000;
  double _width = 100.0;
  double _height = 100.0;
  Color _color = Colors.red;
  BorderRadiusGeometry _borderRadius = BorderRadius.circular(0);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("AnimatedContainer test"),
        ),

        // AnimatedContainer component
        body: Center(
          child: AnimatedContainer(
            width: _width,
            height: _height,
            decoration: BoxDecoration(
              color: _color,
              borderRadius: _borderRadius,
            ),
            duration: Duration(milliseconds: _duration),
            curve: Curves.fastOutSlowIn,
          ),
        ),

        // Button
        floatingActionButton: FloatingActionButton(
          child: Icon(Icons.replay_circle_filled),
          backgroundColor: _color,
          onPressed: () {

            // Rebuild the widget
            setState(() {
              _duration = 500 + Random().nextInt(500);
              _width = Random().nextInt(200).toDouble();
              _height = Random().nextInt(200).toDouble();
              _color = Color.fromRGBO(
                Random().nextInt(256),
                Random().nextInt(256),
                Random().nextInt(256),
                1,
              );
              _borderRadius = BorderRadius.circular(Random().nextInt(100).toDouble());
            });
          },
        ),
      )
    );
  }
}


Output:


References


Read More

Tags:

Leave a Reply