dateapp/lib/pages/calendar.dart

170 lines
6.7 KiB
Dart
Raw Permalink Normal View History

2024-02-11 21:45:43 +07:00
import 'package:flutter/material.dart';
import 'package:intl/intl.dart';
import '../utils/gregorian_date.dart';
class CalendarScreen extends StatefulWidget {
const CalendarScreen({Key? key}) : super(key: key);
@override
State<CalendarScreen> createState() => _CalendarScreenState();
}
class _CalendarScreenState extends State<CalendarScreen> {
DateTimeRange? _selectedDateRange;
@override
Widget build(BuildContext context) {
void showRangeDialog() async {
final DateTimeRange? result = await showDateRangePicker(
context: context,
firstDate: DateTime(0, 1, 1),
lastDate: DateTime(3000, 12, 31),
locale: const Locale('en', 'GB'),
currentDate: DateTime.now(),
saveText: 'Done',
);
if (result != null) {
setState(() {
_selectedDateRange = result;
});
}
}
final startDate = _selectedDateRange?.start ?? DateTime(2020, 1, 1);
final endDate = _selectedDateRange?.end ?? DateTime(2022, 1, 1);
2024-03-04 12:51:10 +07:00
final textTheme = Theme.of(context).textTheme;
2024-02-11 21:45:43 +07:00
int diffD = GregorianDate.differenceInDays(startDate, endDate);
List<int> diffYMD = GregorianDate.differenceInYearsMonthsDays(diffD);
dynamic startDateString =
DateFormat("dd MMM yyyy").format(startDate).toString();
dynamic endDateString =
DateFormat("dd MMM yyyy").format(endDate).toString();
return Scaffold(
body: _selectedDateRange == null
2024-03-04 12:51:10 +07:00
? Padding(
2024-03-04 19:09:36 +07:00
padding: const EdgeInsets.all(16),
2024-02-11 21:45:43 +07:00
child: Center(
2024-03-04 12:51:10 +07:00
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
const Icon(
Icons.date_range_outlined,
size: 150,
),
Text('Date Range',
style: TextStyle(
fontSize: textTheme.displaySmall?.fontSize,
fontWeight: FontWeight.bold)),
2024-03-04 19:09:36 +07:00
Text('Select a date range in the bottom right corner',
2024-03-04 12:51:10 +07:00
style: TextStyle(
fontSize: textTheme.bodyMedium?.fontSize,
))
],
),
2024-02-11 21:45:43 +07:00
),
)
: Padding(
2024-03-04 09:09:57 +07:00
padding: const EdgeInsets.all(16),
2024-03-04 12:51:10 +07:00
child: ListView(children: [
Container(
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Text("Range",
style: TextStyle(
2024-03-04 19:09:36 +07:00
fontSize: textTheme.displayMedium?.fontSize,
2024-03-04 12:51:10 +07:00
fontWeight: FontWeight.bold))
],
)),
2024-03-04 09:09:57 +07:00
Card(
2024-03-04 19:09:36 +07:00
elevation: 4,
2024-03-04 09:09:57 +07:00
child: Padding(
padding: const EdgeInsets.all(16),
child: SizedBox(
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
2024-03-04 19:09:36 +07:00
Text("Full Format",
style: TextStyle(
fontSize:
textTheme.titleMedium?.fontSize)),
2024-03-04 09:09:57 +07:00
Text(
"${diffYMD[3]} days \n${diffYMD[2]} weeks \n${diffYMD[1]} months\n${diffYMD[0]} years",
2024-03-04 19:09:36 +07:00
style: TextStyle(
fontSize:
textTheme.headlineMedium?.fontSize,
2024-03-04 09:09:57 +07:00
fontWeight: FontWeight.bold)),
const SizedBox(height: 10),
2024-03-04 19:09:36 +07:00
Text("Days Format",
style: TextStyle(
fontSize:
textTheme.titleMedium?.fontSize)),
2024-03-04 09:09:57 +07:00
Text("$diffD days",
2024-03-04 19:09:36 +07:00
style: TextStyle(
fontSize:
textTheme.headlineMedium?.fontSize,
2024-03-04 09:09:57 +07:00
fontWeight: FontWeight.bold)),
],
),
))),
const SizedBox(height: 16),
2024-03-04 12:51:10 +07:00
Container(
alignment: Alignment.centerLeft,
child: Row(
children: <Widget>[
Text("Dates",
style: TextStyle(
fontSize: textTheme.displaySmall?.fontSize,
fontWeight: FontWeight.bold))
],
)),
2024-03-04 09:09:57 +07:00
Card(
2024-03-04 19:09:36 +07:00
elevation: 4,
2024-03-04 09:09:57 +07:00
child: Padding(
padding: const EdgeInsets.all(16),
child: SizedBox(
width: double.infinity,
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
2024-03-04 19:09:36 +07:00
Text("Start Date",
style: TextStyle(
fontSize: textTheme.titleMedium?.fontSize)),
2024-03-04 09:09:57 +07:00
Text(
startDateString,
2024-03-04 19:09:36 +07:00
style: TextStyle(
fontSize: textTheme.headlineMedium?.fontSize,
fontWeight: FontWeight.bold),
2024-03-04 09:09:57 +07:00
),
const SizedBox(height: 10),
2024-03-04 19:09:36 +07:00
Text("End Date",
style: TextStyle(
fontSize: textTheme.titleMedium?.fontSize)),
2024-03-04 09:09:57 +07:00
Text(endDateString,
2024-03-04 19:09:36 +07:00
style: TextStyle(
fontSize:
textTheme.headlineMedium?.fontSize,
fontWeight: FontWeight.bold)),
2024-03-04 09:09:57 +07:00
],
)),
),
)
])),
2024-02-11 21:45:43 +07:00
// This button is used to show the date range picker
floatingActionButton: FloatingActionButton(
onPressed: showRangeDialog,
2024-03-04 12:51:10 +07:00
child: const Icon(Icons.edit_calendar),
2024-02-11 21:45:43 +07:00
),
);
}
}