前面學習了多種方法，現在要學習如何將動畫交錯展示

以下是創建步驟，今天寫的是使文字淡入淡出的交錯動畫

1.導入資源庫跟創建MyApp類
將將AnimatedTextDemo小部件設為應用程序的主頁

import 'package:flutter/material.dart';

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

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

2.創建AnimatedTextDemo類
繼承StatefulWidget的自定義小部件。管理動畫效果的狀態。

class AnimatedTextDemo extends StatefulWidget {
  @override
  _AnimatedTextDemoState createState() => _AnimatedTextDemoState();
}

3.創建AnimatedTextDemoState類:是AnimatedTextDemo的狀態
定義了兩個布林變數 isFirstTextVisible 和 isSecondTextVisible 來控制兩個文本的可見性。
並用toggleTextVisibility 函數用於切換這兩個文本的可見性。

class _AnimatedTextDemoState extends State<AnimatedTextDemo> {
  bool _isFirstTextVisible = true;
  bool _isSecondTextVisible = false;

  void _toggleTextVisibility() {
    setState(() {
      _isFirstTextVisible = !_isFirstTextVisible;
      _isSecondTextVisible = !_isSecondTextVisible;
    });
  }
}

4.創建UI
寫兩個文本，設定觸發按鈕，以實現文本淡入淡出的交錯性。

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('文字交錯動畫示例'),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          AnimatedOpacity(
            opacity: _isFirstTextVisible ? 1.0 : 0.0,
            duration: Duration(seconds: 1),
            child: Text(
              'Hello,',
              style: TextStyle(fontSize: 24, color: Colors.blue),
            ),
          ),
          AnimatedOpacity(
            opacity: _isSecondTextVisible ? 1.0 : 0.0,
            duration: Duration(seconds: 1),
            child: Text(
              'Flutter!',
              style: TextStyle(fontSize: 24, color: Colors.red),
            ),
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: _toggleTextVisibility,
      child: Icon(Icons.play_arrow),
    ),
  );
}

完整程式碼

import 'package:flutter/material.dart';

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

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

class AnimatedTextDemo extends StatefulWidget {
  @override
  _AnimatedTextDemoState createState() => _AnimatedTextDemoState();
}

class _AnimatedTextDemoState extends State<AnimatedTextDemo> {
  bool _isFirstTextVisible = true; // 控制第一個文本的可見性
  bool _isSecondTextVisible = false; // 控制第二個文本的可見性

  void _toggleTextVisibility() {
    // 切換文本的可見性
    setState(() {
      _isFirstTextVisible = !_isFirstTextVisible;
      _isSecondTextVisible = !_isSecondTextVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('文字交錯動畫示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedOpacity(
              opacity: _isFirstTextVisible ? 1.0 : 0.0, // 控制第一個文本的不透明度
              duration: Duration(seconds: 1), // 動畫持續時間
              child: Text(
                'Hello,', // 第一個文本的內容
                style: TextStyle(fontSize: 24, color: Colors.blue), // 第一個文本的樣式
              ),
            ),
            AnimatedOpacity(
              opacity: _isSecondTextVisible ? 1.0 : 0.0, // 控制第二個文本的不透明度
              duration: Duration(seconds: 1), // 動畫持續時間
              child: Text(
                'Flutter!', // 第二個文本的內容
                style: TextStyle(fontSize: 24, color: Colors.red), // 第二個文本的樣式
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _toggleTextVisibility, // 按下浮動操作按鈕時執行函數
        child: Icon(Icons.play_arrow), // 浮動操作按鈕的圖標
      ),
    );
  }
}

https://imgur.com/a/fmqp7Ke