搜索插件、代码仓与 APP 分类

插件详情v1.0.3

slide_countdown_clock

一个带有上下滑动动画的倒计时钟 Flutter 插件。

近 30 天下载
38
喜欢数
94
Pub 分数
30

安装插件

flutter pub add slide_countdown_clock

插件介绍

基于插件公开信息、社区数据与项目使用情况整理的选型参考。

一个 Flutter 插件,提供视觉上引人入胜的倒计时钟,具有平滑的滑动上升和滑动下降动画。专为需要动态时间显示的应用程序设计,随着计时器的进行,它通过流畅的过渡增强了用户体验。该包轻量且易于集成,非常适合游戏、提醒或活动倒计时中的计时器。它支持通过简单配置自定义样式和计时行为。

适合场景

  • 基于计时器的游戏界面
  • 事件倒计时显示
  • 提醒通知
  • 互动式学习应用
  • 任务完成计时器

主要特点

  • 时间更新时的滑动动画
  • 可自定义的计时器外观
  • 与 Flutter 的简单集成
  • 平滑的过渡效果
  • 轻量且高效

适合对象

  • 开发交互式计时器的开发者
  • 需要在倒计时期间提供视觉反馈的应用
  • 面向用户界面的时间跟踪功能
  • 教育类或游戏化应用
  • 极简主义设计项目

使用建议

  • 仅限基本倒计时功能
  • 不支持多个计时器的内置支持
  • 动画可能会影响低端设备的性能
  • 需要手动处理计时器逻辑
  • 未提及特定平台的优化

原始 README

以下为关联源码仓库的 README 原文快照,最新内容请访问源码仓库。

slide_countdown_clock

A Countdown clock with slide up and down animation plugin for Flutter

Demo

Demo:

Usage

To use plugin, just import package import 'package:slide_countdown_clock/slide_countdown_clock.dart';

Example

You can check example directory to know how to use it like the demo gif.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey();
  Duration _duration = Duration(seconds: 1000000);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(title: Text(widget.title)),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text('Slide direction Up'),
            SlideCountdownClock(
              duration: Duration(days: 20, minutes: 1000000),
              slideDirection: SlideDirection.Up,
              separator: ":",
              textStyle: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
              shouldShowDays: true,
              onDone: () {
                _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Clock 1 finished')));
              },
            ),
            _buildSpace(),
            Text('Slide direction Down'),
            SlideCountdownClock(
              duration: _duration,
              slideDirection: SlideDirection.Down,
              separator: ":",
              textStyle: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
              onDone: () {
                _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Clock 1 finished')));
              },
            ),
            _buildSpace(),
            Text('Use box Decoration'),
            Padding(
              padding: EdgeInsets.all(10),
              child: SlideCountdownClock(
                duration: _duration,
                slideDirection: SlideDirection.Up,
                separator: "-",
                textStyle: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
                separatorTextStyle: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight.bold,
                  color: Colors.blue,
                ),
                padding: EdgeInsets.all(10),
                decoration: BoxDecoration(color: Colors.blue, shape: BoxShape.circle),
                onDone: () {
                  _scaffoldKey.currentState.showSnackBar(SnackBar(content: Text('Clock 1 finished')));
                },
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildSpace() {
    return SizedBox(height: 50);
  }
}

所属分类

源码仓库

使用此插件的项目

暂无相关数据。