使用AnimatedOpacity Widget。
可能下面的代码片段会对你有帮助。

class Screen2 extends StatefulWidget {
  @override
  _Screen2State createState() => _Screen2State();
}

class _Screen2State extends State<Screen2> {
  Timer? timer;
  int currentStep = 0;

  @override
  void initState() {
    timer = Timer.periodic(const Duration(seconds: 1), (t) {
      setState(() {
        currentStep = t.tick;
      });

      if (t.tick > 5) {
        timer?.cancel();
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen 2'),
      ),
      body: Container(
        width: MediaQuery.of(context).size.width,
        alignment: Alignment.center,
        child: Column(
          children: [
            const SizedBox(height: 16),
            AnimatedOpacity(
              opacity: currentStep >= 1 ? 1 : 0,
              duration: const Duration(milliseconds: 200),
              child: const Text(
                "First Widget",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                ),
              ),
            ),
            const SizedBox(height: 50),
            AnimatedOpacity(
              opacity: currentStep >= 2 ? 1 : 0,
              duration: const Duration(milliseconds: 200),
              child: const Text(
                "Second Widget",
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 22,
                ),
              ),
            ),
            const SizedBox(height: 50),
            AnimatedOpacity(
              opacity: currentStep >= 3 ? 1 : 0,
              duration: const Duration(milliseconds: 200),
              child: const Column(
                children: [
                  Text(
                    "Third Widget",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 22,
                    ),
                  ),
                  SizedBox(height: 50),
                  Text(
                    "Fourth Widget",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 22,
                    ),
                  ),
                ],
              ),
            ),
            const SizedBox(height: 50),
            AnimatedOpacity(
              opacity: currentStep >= 4 ? 1 : 0,
              duration: const Duration(milliseconds: 200),
              child: ElevatedButton(
                style: const ButtonStyle(
                    backgroundColor: MaterialStatePropertyAll(Colors.cyan)),
                onPressed: () {},
                child: const Text(
                  "Fifth Widget",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 18,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

字符串

您可以通过使用Opacity和AnimatedOpacity来实现这一点
关于Screen2

Column(
  children: [
    AnimatedOpacity(
      duration: Duration(seconds: 1),
      opacity: 1.0,
      child: YourWidget1(),
    ),
    AnimatedOpacity(
      duration: Duration(seconds: 1),
      opacity: 1.0,
      child: YourWidget2(),
    ),
    // Other widgets
  ],
)

字符串
现在，为了错开淡入，您可以使用Future.delayed，为每个小部件提供累积持续时间。

Future<void> _delayedFadeIn(int index) async {
  await Future.delayed(Duration(milliseconds: (index + 1) * 750));
}

// Use this function when building your widgets
AnimatedOpacity(
  duration: Duration(seconds: 1),
  opacity: 1.0,
  child: YourWidget1(),
).then((_) => _delayedFadeIn(1)),

型
冲洗并重复每个部件，相应地调整索引。