Skip to content

[Flutter] 實現元件淡出淡入效果

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

Read More

Tags:

Leave a Reply