Flutter 问题：不透明度和字体大小的同步动画

Question

在 Flutter 中，我尝试同时设置不透明度和字体大小的动画，但使用不同的曲线。 不幸的是，它在动画过程中切断了顶部和底部的文本。 它可能很难重现，因为它只发生在我的物理设备（三星 S21）上，而不是模拟器上。此外，在设备设置中配置的所有默认字体大小上也不会发生这种情况。 有谁知道原因或可能的解决办法吗？

请参阅下面的 GIF 示例

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin{

  late AnimationController _controller;
  late Animation<double> _fontSizeAnimation;
  late Animation<double> _opacityAnimation;
  late TextStyleTween _styleTween;
  late Tween<double> _opacityTween;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: const Duration(seconds: 2), vsync: this);
    _fontSizeAnimation = CurvedAnimation(parent: _controller, curve: Curves.elasticOut);
    _opacityAnimation = CurvedAnimation(parent: _controller, curve: Curves.easeOutCirc)
      ..addListener(() {
        setState(() {

        });
      });
    _styleTween = TextStyleTween(
      begin: const TextStyle(fontSize: 0, color: Colors.black), end: const TextStyle(fontSize: 50, color: Colors.black),
    );
    _opacityTween = Tween<double>(begin: 0.0, end: 1.0);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Opacity(
          opacity: _opacityTween.evaluate(_opacityAnimation),
          child: DefaultTextStyleTransition(
              style: _styleTween.animate(_fontSizeAnimation),
              child: const Text('2'),
          ),
        )
      ),
      floatingActionButton: FloatingActionButton(onPressed: () {
        _controller.forward(from: 0.0);
      },
      ),
    );
  }
}

我尝试了不同的动画方法，例如使用 AnimatedBuilder 并尝试了不同的容器（Center、Container、SizedBox）来排除任何裁剪问题。

Answer 1

您可以使用包：flutter_animate

Text(
     "2",
     style: TextStyle(
     fontSize: 20,
     fontWeight: FontWeight.w500,
      ),
     ).animate().fade(duration: 100.ms).scale(delay: 100.ms)