Last Updated on 2021-10-12 by Clay
在我們使用 Flutter 來製作行動裝置 APP 時，我們經常會有著將元件『隱藏』起來、或是『顯示』出來的需求。當然，我們可以透過調整元件可視與否、調整元件的顏色、甚至刪除元件等幾種方法來做到這一點。
不過，這些作法都會讓元件快速地在一瞬間隱藏/顯示，稱不上華麗的展示效果。是的，現在不論是那個領域都已進入了大看臉時代，甚至控制元件的消失或出現，也最好都加入些動畫效果才好。
也正因如此，今天我將紀錄如何將元件在隱藏/顯示時加入淡出（fade out）/ 淡入（fade in）的效果。
如何將元件淡出/淡入
我們會需要以下這些元件來進行最基本的示範：
- StatefulWidget：因為是要讓元件呈現動畫，故不能使用 StatelessWidget
- AnimatedOpacity widget：一個測試用的、可調整透明度的元件。我們要隱藏的某個元件（比方說一個 Container）需要是它的 child
- FloatingActionButton：控制元件淡出/淡入的按鈕
其中 AnimatedOpacity 有以下最基本的參數要設定：
- opacity: 透明度，設定成顯示（true）時為 1.0、隱藏時為 0.0 即可
- duration: 切換狀態的時間，設定越長淡出/淡入動畫效果的時間也就越長
以下直接來看程式碼：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
bool visible = true;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Fade I/O"),
),
body: Center(
// A test component to test fade in or fade out
child: AnimatedOpacity(
opacity: visible ? 1.0 : 0.0,
duration: Duration(milliseconds: 1000),
// The test component is a container
child: Container(
width: 100,
height: 100,
color: Colors.red,
),
),
),
// Add a new button to control fade in or fade out
floatingActionButton:
FloatingActionButton(
onPressed: () {
setState(() {
visible = !visible;
});
},
child: Icon(visible ? Icons.lightbulb_outline : Icons.lightbulb),
)
);
}
}
Output:
References
- https://flutter.dev/docs/cookbook/animation/opacity-animation
- https://stackoverflow.com/questions/57541690/flutter-fadein-fadeout-animation-together
- https://pub.dev/packages/flutter_fadein