flutter pub add slide_digital_clock基于插件公开信息、社区数据与项目使用情况整理的选型参考。
一个简洁的数字时钟小部件，适用于 Flutter，以平滑的滑动动画显示时间。设计简约且可自定义，非常适合需要干净、现代时间显示的应用程序。时钟实时更新，并支持多种格式选项。专为性能和简单性而构建，可无缝集成到任何 Flutter 项目中。特别适合仪表板、主屏幕或任何需要突出显示时间的用户界面元素。
以下为关联源码仓库的 README 原文快照，最新内容请访问源码仓库。
To use plugin, just import package import 'package:slide_digital_clock/slide_digital_clock.dart';
is24HourTimeFormat : `true`
showSecondsDigit : `true`
areaAligment : `AlignmentDirectional.bottomCenter`
digitAnimationStyle : `Curves.decelerate`
hourMinuteDigitTextStyle : `Theme.of(context).textTheme.bodyText1`
secondDigitTextStyle : `Theme.of(context).textTheme.caption!.copyWith(fontSize: 10))`
amPmDigitTextStyle : `Theme.of(context).textTheme.caption!.copyWith(fontSize: 10, fontWeight: FontWeight.bold)`
import 'package:flutter/material.dart';
import 'package:slide_digital_clock/slide_digital_clock.dart';
void main() {
runApp(const ExampleApp());
}
class ExampleApp extends StatelessWidget {
const ExampleApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: "Slider Digital Clock Demo App",
home: Scaffold(
appBar: AppBar(
title: const Text("Slider Digital Clock Demo App"),
actions: [
DigitalClock(
hourMinuteDigitTextStyle: Theme.of(context)
.textTheme
.headline4!
.copyWith(color: Colors.white),
secondDigitTextStyle: Theme.of(context)
.textTheme
.caption!
.copyWith(color: Colors.white),
colon: Text(
":",
style: Theme.of(context)
.textTheme
.subtitle1!
.copyWith(color: Colors.white),
),
)
]),
body: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text("Custom Colon"),
const SizedBox(width: 50),
DigitalClock(
hourMinuteDigitTextStyle: const TextStyle(fontSize: 18),
colon: const Icon(Icons.ac_unit, size: 12),
colonDecoration: BoxDecoration(
border: Border.all(), shape: BoxShape.circle),
)
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text("Custom Styles"),
const SizedBox(width: 50),
DigitalClock(
hourDigitDecoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Colors.blue, width: 2)),
minuteDigitDecoration: BoxDecoration(
color: Colors.yellow,
border: Border.all(color: Colors.red, width: 2)),
secondDigitDecoration: BoxDecoration(
color: Colors.blueGrey,
border: Border.all(color: Colors.blue),
shape: BoxShape.circle),
secondDigitTextStyle: Theme.of(context)
.textTheme
.caption!
.copyWith(color: Colors.white),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
const Text("Show AM-PM, Disable Seconds"),
const SizedBox(width: 50),
DigitalClock(
is24HourTimeFormat: false,
showSecondsDigit: false,
),
],
)
],
),
),
);
}
}
暂无相关数据。