Flutter计时器功能插件fancy_timer的使用

Flutter计时器功能插件fancy_timer的使用

如果你想要一个简单易用的计时器组件来在屏幕上展示倒计时，fancy_timer 插件可以帮你实现这一需求。

基本使用

最简单的使用方法是将你希望的持续时间传递给 FancyTimer 组件。duration 是唯一必需的参数。只需要这样做，你就可以在屏幕上看到一个漂亮的倒计时。

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
          body: Center(
              child: FancyTimer(
                    duration: Duration(seconds: 10),
              ),
          ),
      ),
    );
  }
}

自定义

如果你想自定义组件的各个方面，例如分隔符或者数字的装饰，你可以通过相应的参数进行自定义。

结束回调

你可以在 onTimerEnd 参数中传入一个回调函数。这个回调会在计时结束时执行。

示例代码

以下是一个完整的示例代码，展示了如何使用 fancy_timer 插件来创建一个带有背景模糊效果的倒计时界面。

import 'dart:ui';

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: NetworkImage(
                'https://images.pexels.com/photos/2253870/pexels-photo-2253870.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'),
            fit: BoxFit.cover,
          ),
        ),
        child: BackdropFilter(
          filter: ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
          child: Container(
            decoration: BoxDecoration(color: Colors.white.withOpacity(0.0)),
            child: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    'The wedding will begin in...',
                    style: TextStyle(
                      fontSize: 32,
                      fontWeight: FontWeight.bold,
                      color: Colors.pink,
                    ),
                  ),
                  SizedBox(height: 8),
                  FancyTimer(
                    duration: Duration(seconds: 10),
                    onTimerEnd: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (_) => Scaffold(
                            body: Container(
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                  image: NetworkImage(
                                      'https://images.pexels.com/photos/2253870/pexels-photo-2253870.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'),
                                  fit: BoxFit.cover,
                                ),
                              ),
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}