feat(divination): add DateTimePickerBottomSheet with iOS wheel style

This commit is contained in:
qzl
2026-04-03 18:16:18 +08:00
parent 39575ddf37
commit a034962d6b
6 changed files with 256 additions and 45 deletions
@@ -0,0 +1,109 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../../../l10n/app_localizations.dart';
class DateTimePickerBottomSheet extends StatefulWidget {
const DateTimePickerBottomSheet({
super.key,
required this.initialDateTime,
this.minDateTime,
this.maxDateTime,
});
final DateTime initialDateTime;
final DateTime? minDateTime;
final DateTime? maxDateTime;
@override
State<DateTimePickerBottomSheet> createState() =>
_DateTimePickerBottomSheetState();
}
class _DateTimePickerBottomSheetState extends State<DateTimePickerBottomSheet> {
late DateTime _selectedDateTime;
int _selectedTab = 0;
@override
void initState() {
super.initState();
_selectedDateTime = widget.initialDateTime;
}
@override
Widget build(BuildContext context) {
final l10n = AppLocalizations.of(context)!;
return Container(
height: 400,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surface,
borderRadius: const BorderRadius.vertical(top: Radius.circular(16)),
),
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
TextButton(
onPressed: () => Navigator.pop(context),
child: Text(l10n.cancel),
),
Text(
l10n.autoSelectTime,
style: Theme.of(context).textTheme.titleMedium,
),
TextButton(
onPressed: () => Navigator.pop(context, _selectedDateTime),
child: Text(l10n.confirm),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: CupertinoSlidingSegmentedControl<int>(
groupValue: _selectedTab,
children: {0: Text(l10n.dateTab), 1: Text(l10n.timeTab)},
onValueChanged: (value) =>
setState(() => _selectedTab = value ?? 0),
),
),
const SizedBox(height: 16),
Expanded(
child: CupertinoDatePicker(
mode: _selectedTab == 0
? CupertinoDatePickerMode.date
: CupertinoDatePickerMode.time,
initialDateTime: _selectedDateTime,
minimumDate: widget.minDateTime,
maximumDate: widget.maxDateTime,
onDateTimeChanged: (DateTime newDateTime) {
setState(() => _selectedDateTime = newDateTime);
},
),
),
],
),
);
}
}
Future<DateTime?> showDateTimePickerBottomSheet({
required BuildContext context,
required DateTime initialDateTime,
DateTime? minDateTime,
DateTime? maxDateTime,
}) {
return showModalBottomSheet<DateTime>(
context: context,
isScrollControlled: true,
backgroundColor: Colors.transparent,
builder: (context) => DateTimePickerBottomSheet(
initialDateTime: initialDateTime,
minDateTime: minDateTime,
maxDateTime: maxDateTime,
),
);
}