搜尋套件、儲存庫與 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);
  }
}

所屬分類

原始碼儲存庫

使用此套件的專案

暫無相關資料。