Flutter渐入动画插件fading_in_widget的使用

Flutter渐入动画插件fading_in_widget的使用

所有你需要做的就是将你的小部件包装在渐入小部件中。其余的事情会自动完成。

const FadingInWidget(
	child: FlutterLogo(),
),

如果需要，还可以使用其他参数：

const FadingInWidget(
	delay: Duration.zero, // 这是默认值。
	duration: Duration(seconds: 2), // 这是默认值。
	curve: Curves.easeInOut, // 这是默认值。
	child: FlutterLogo(),
),

这就是全部了。现在你已经准备好使用渐入小部件了。

参数如下：

• child: 这是你想要在滚动时隐藏的静态小部件。
• duration: 决定淡入动画持续的时间。
• delay: 决定淡入动画将在多长时间后开始。
• curve: 用于调整淡入动画随时间变化的速度，允许它们加速和减速，而不是以恒定速度移动。

完整示例代码

import 'package:fading_in_widget/fading_in_widget.dart';
import 'package:flutter/material.dart';

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '渐入动画小部件演示',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.cyan),
        useMaterial3: true,
      ),
      home: const TestPage(),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("渐入动画小部件演示"),
      ),
      body: Column(
        children: [
          const SizedBox(height: 32),
          const FadingInWidget(
            duration: Duration(seconds: 2),
            child: FlutterLogo(size: 50),
          ),
          const SizedBox(height: 16),
          const FadingInWidget(
            delay: Duration(seconds: 1),
            child: Text(
              '你好 Flutter!',
              style: TextStyle(fontSize: 32),
            ),
          ),
          const SizedBox(height: 32),
          FadingInWidget(
            delay: const Duration(seconds: 2),
            child: Container(
              alignment: Alignment.center,
              width: double.infinity,
              height: 200,
              decoration: const BoxDecoration(
                image: DecorationImage(
                  image: NetworkImage(
                      "https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=2000"),
                  fit: BoxFit.cover,
                ),
              ),
              child: const FadingInWidget(
                delay: Duration(seconds: 3),
                child: Text(
                  "欢迎使用渐入动画小部件演示",
                  style: TextStyle(
                    fontSize: 32,
                    color: Colors.white,
                    shadows: [
                      Shadow(
                        offset: Offset(2, 2),
                        blurRadius: 4.0,
                        color: Colors.black,
                      ),
                    ],
                    fontWeight: FontWeight.w600,
                  ),
                  textAlign: TextAlign.center,
                ),
              ),
            ),
          ),
          const SizedBox(height: 64),
          FadingInWidget(
            delay: const Duration(seconds: 3, milliseconds: 500),
            child: ElevatedButton(
              onPressed: () {},
              child: const Text("下一页"),
            ),
          ),
        ],
      ),
    );
  }
}