Flutter时间间隔选择插件time_duration_picker的使用
Flutter时间间隔选择插件time_duration_picker的使用
插件简介
time_duration_picker 是一个用于Flutter应用程序的时间间隔选择器插件。它能够为成对连续的任务提供时间选择功能，允许用户通过旋转图标来设置时间，并通过回调函数获取用户选择的时间值。此插件不仅提供了丰富的自定义选项，如图标、样式和颜色的选择，还支持多种布局方式以适应不同的应用场景。
主要特性
- 支持两个图标（任务）之间的相对时间间隔设置。
- 提供了丰富的自定义选项，包括但不限于图标的样式、背景色、文本样式等。
- 可以为每个图标绑定独立的回调函数，方便处理不同任务的时间设置逻辑。
- 适用于需要精确控制时间间隔的应用场景，如闹钟设置、计时器等。
使用示例
下面是一个完整的示例代码，展示了如何在Flutter项目中集成并使用time_duration_picker插件：
示例代码
import 'package:flutter/material.dart';
import 'package:time_duration_picker/time_duration_picker.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: SetAlarm(),
);
}
}
class SetAlarm extends StatefulWidget {
const SetAlarm({Key? key}) : super(key: key);
@override
_SetAlarmState createState() => _SetAlarmState();
}
class _SetAlarmState extends State<SetAlarm> {
String alarmTime = "12:00 PM";
String bedTime = "12:00 AM";
String sleepDuration = "12 hr 00 min";
@override
Widget build(BuildContext context) {
double smallerMarginRatio = 0.025;
double horizontalPadding = 0.08;
double verticalPadding = 0.05;
Size size = MediaQuery.of(context).size;
return Scaffold(
backgroundColor: const Color.fromRGBO(241, 248, 255, 1),
body: SafeArea(
child: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.symmetric(
horizontal: size.width * horizontalPadding,
vertical: size.height * verticalPadding),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
SizedBox(height: size.height * smallerMarginRatio),
TimeDurationPicker(
diameter: size.width * 0.775,
icon1Data: Icons.notifications_none,
icon2Data: Icons.bed,
knobDecoration: const BoxDecoration(
color: Color.fromRGBO(167, 153, 240, 1)),
clockDecoration: const BoxDecoration(
gradient: RadialGradient(colors: [
Color.fromRGBO(167, 153, 240, 1),
Colors.white
])),
knobBackgroundDecoration: const BoxDecoration(
shape: BoxShape.circle,
color: Color.fromRGBO(218, 224, 238, 1),
gradient: LinearGradient(
begin: Alignment.bottomLeft,
end: Alignment.topRight,
colors: [
Colors.white,
Color.fromRGBO(218, 224, 238, 1),
],
stops: [0.1, 1],
),
),
onIcon1RotatedCallback: (value) {
setState(() {
alarmTime = value;
});
},
onIcon2RotatedCallback: (value) {
setState(() {
bedTime = value;
});
},
setDurationCallback: (value) {
setState(() {
sleepDuration = value;
});
},
),
SizedBox(height: size.height * 2 * smallerMarginRatio),
SizedBox(
width: size.width * 0.45,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
sleepDuration,
style: const TextStyle(
color: Color.fromRGBO(
54,
61,
86,
1,
),
fontWeight: FontWeight.bold,
),
),
),
),
SizedBox(height: size.height * 2 * smallerMarginRatio),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
AlarmDescription(
iconData: Icons.bed,
title: "Bedtime",
width: size.width * 0.4,
time: bedTime),
AlarmDescription(
iconData: Icons.notifications_none,
title: "Wake Up",
width: size.width * 0.4,
time: alarmTime)
],
),
],
),
),
),
),
);
}
}
class AlarmDescription extends StatefulWidget {
final IconData iconData;
final String title;
final String time;
final double width;
const AlarmDescription(
{Key? key,
required this.iconData,
required this.title,
required this.width,
required this.time})
: super(key: key);
@override
_AlarmDescriptionState createState() => _AlarmDescriptionState();
}
class _AlarmDescriptionState extends State<AlarmDescription> {
double horizontalPadding = 0.15;
double verticalPadding = 0.1;
double aspectRatio = 0.8;
late double height;
@override
void initState() {
super.initState();
height = widget.width / aspectRatio;
}
@override
Widget build(BuildContext context) {
return Container(
width: widget.width,
height: height,
decoration: BoxDecoration(
color: const Color.fromRGBO(252, 253, 255, 1),
borderRadius: BorderRadius.circular(widget.width * 0.25)),
child: Padding(
padding: EdgeInsets.symmetric(
vertical: height * verticalPadding,
horizontal: widget.width * horizontalPadding),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
widget.iconData,
color: const Color.fromRGBO(167, 153, 240, 1),
size: height * 0.3,
),
SizedBox(
width: widget.width * (1 - 2 * horizontalPadding) * 0.65,
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
widget.title,
style: const TextStyle(
color: Color.fromRGBO(
54,
61,
86,
1,
),
fontWeight: FontWeight.bold),
),
),
),
SizedBox(
width: widget.width * (1 - 2 * horizontalPadding),
child: FittedBox(
fit: BoxFit.fitWidth,
child: Text(
widget.time,
style: const TextStyle(
color: Color.fromRGBO(
54,
61,
86,
1,
),
fontWeight: FontWeight.bold,
),
),
),
),
SizedBox(
width: widget.width * (1 - 2 * horizontalPadding) * 0.45,
child: const FittedBox(
fit: BoxFit.fitWidth,
child: Text(
"Tomorrow",
style: TextStyle(
color: Color.fromRGBO(
144,
158,
174,
1,
),
fontWeight: FontWeight.bold,
),
),
),
)
],
),
),
);
}
}
以上代码创建了一个简单的界面，其中包含一个TimeDurationPicker组件，用户可以通过旋转图标来设置闹钟时间和睡觉时间，并实时显示两者之间的时间差。同时，页面下方展示了这两个时间点的具体信息。
希望这个例子可以帮助你更好地理解和使用time_duration_picker插件。如果你有任何问题或需要进一步的帮助，请随时提问！
更多关于Flutter时间间隔选择插件time_duration_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter时间间隔选择插件time_duration_picker的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何使用Flutter中的time_duration_picker插件的代码示例。这个插件允许用户在界面上选择一段时间间隔。
首先，你需要在pubspec.yaml文件中添加time_duration_picker依赖项：
dependencies:
flutter:
sdk: flutter
time_duration_picker: ^x.y.z # 请替换为最新版本号
然后，运行flutter pub get来安装依赖项。
接下来，在你的Flutter应用中，你可以按照以下方式使用TimeDurationPicker：
import 'package:flutter/material.dart';
import 'package:time_duration_picker/time_duration_picker.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Time Duration Picker Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Duration _selectedDuration = Duration(minutes: 15); // 初始时间间隔
void _handleDurationChange(Duration duration) {
setState(() {
_selectedDuration = duration;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Time Duration Picker Example'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Selected Duration: ${_selectedDuration.inMinutes} minutes',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 20),
ElevatedButton(
onPressed: () {
showModalBottomSheet<void>(
context: context,
builder: (BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: TimeDurationPicker(
initialDuration: _selectedDuration,
onChange: _handleDurationChange,
onConfirm: (Duration duration) {
Navigator.of(context).pop();
_handleDurationChange(duration);
},
onCancel: () {
Navigator.of(context).pop();
},
),
);
},
);
},
child: Text('Select Duration'),
),
],
),
),
);
}
}
在这个示例中：
- 依赖项：在
pubspec.yaml文件中添加了time_duration_picker依赖项。 - UI布局：创建了一个简单的Flutter应用，包含一个文本显示选中的时间间隔和一个按钮用于打开时间间隔选择器。
- 时间间隔选择器：使用
showModalBottomSheet显示一个模态底部表单，其中包含TimeDurationPicker。 - 回调处理：通过
onChange回调处理用户选择的时间间隔变化，通过onConfirm和onCancel回调处理用户确认和取消操作。
这个示例展示了如何集成和使用time_duration_picker插件来选择时间间隔，并将选中的时间间隔显示在UI上。请确保使用最新的插件版本，并根据实际需求调整代码。
