diff --git a/lib/main.dart b/lib/main.dart index 51e255c14385f0cda5df6be4dbaf3cd3124c6858..81f04fab264849bc4e5c5eec61867fe7eea77e99 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -13,6 +13,8 @@ import 'dart:convert'; import 'package:weather_icons/weather_icons.dart'; import 'config/config.dart'; import 'package:latlong/latlong.dart' as latlng; +import 'widgets/calendar.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; void main() => runApp(MyApp()); @@ -77,6 +79,7 @@ class _MyHomePageState extends State<MyHomePage> { bool _isDateChosen = false; bool _showAdditionalButtons = false; List<String> _selectedOptions = []; + PickerDateRange? _selectedRange; var _dateRangeArray = []; var _availableDatesForTrip = []; @@ -477,6 +480,27 @@ class _MyHomePageState extends State<MyHomePage> { }); } + String displayDate() { + if (_selectedRange == null) { + return ''; + } else { + final DateTime startDate = _selectedRange!.startDate!; + final DateTime endDate = _selectedRange!.endDate!; + return '${DateFormat('dd/MMM').format(startDate)} - ${DateFormat('dd/MMM').format(endDate)}'; + } + } + + void _navigateToPickerScreen() async { + final selectedRange = await Navigator.push( + context, + MaterialPageRoute(builder: (context) => DateRangePickerScreen()), + ); + setState(() { + _selectedRange = selectedRange; + }); + } + + // ----------Section For Filter Functions, Calendar, Weather------------ // Pick date _rangeDatePicker(BuildContext ctx) async { @@ -530,13 +554,6 @@ class _MyHomePageState extends State<MyHomePage> { return formatted; } - String displayDate() { - if (_isDateChosen) { - return "${convertDateFormat(_dateRange.start)} - ${convertDateFormat(_dateRange.end)}"; - } - return ''; - } - // Expand buttons void _toggleAdditionalButtons() { setState(() { @@ -938,7 +955,7 @@ class _MyHomePageState extends State<MyHomePage> { radius: 20, child: IconButton( onPressed: () { - _rangeDatePicker(context); + _navigateToPickerScreen(); // Do something when the first additional button is pressed }, icon: Icon(Icons.calendar_month), diff --git a/lib/widgets/calendar.dart b/lib/widgets/calendar.dart new file mode 100644 index 0000000000000000000000000000000000000000..ab732367770af549e748320ba2971d414c0fe371 --- /dev/null +++ b/lib/widgets/calendar.dart @@ -0,0 +1,91 @@ +import 'package:flutter/material.dart'; +import 'package:flutter/scheduler.dart'; +import 'package:syncfusion_flutter_datepicker/datepicker.dart'; +import 'package:intl/intl.dart'; + +class DateRangePickerScreen extends StatefulWidget { + const DateRangePickerScreen({Key? key}) : super(key: key); + + @override + _DateRangePickerScreenState createState() => _DateRangePickerScreenState(); +} + +class _DateRangePickerScreenState extends State<DateRangePickerScreen> { + final DateRangePickerController _controller = DateRangePickerController(); + late DateTime _minDate; + late DateTime _maxDate; + bool _isDateChosen = false; + PickerDateRange? _selectedRange; + + @override + void initState() { + _minDate = DateTime.now(); + _maxDate = _minDate.add(Duration(days: 6)); + super.initState(); + } + + void _SelectionChanged(DateRangePickerSelectionChangedArgs args) { + setState(() { + _selectedRange = args.value!; + _isDateChosen = true; + }); + } + + String _formatSelectedDateRange(PickerDateRange? range) { + if (range == null || range.startDate == null || range.endDate == null) { + return 'Select a date range'; + } + final startDate = DateFormat('MMMM d').format(range.startDate!); + final endDate = DateFormat('MMMM d').format(range.endDate!); + return '$startDate - $endDate'; + } + + void _onSubmitSelectedRange() { + if (_selectedRange != null) { + _controller.selectedRange = _selectedRange!; + Navigator.pop(context, _selectedRange); + } + } + + void _onCancelSelectedRange() { + setState(() { + _controller.selectedRange = null; + _selectedRange = null; + _isDateChosen = false; + }); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + appBar: AppBar( + toolbarHeight: 80, + title: Text(_formatSelectedDateRange(_selectedRange)), + backgroundColor: Color.fromRGBO(9, 89, 95, 1), + + + ), + body: SfDateRangePicker( + view: DateRangePickerView.month, + monthViewSettings: DateRangePickerMonthViewSettings(firstDayOfWeek: 1), + controller: _controller, + onSelectionChanged: _SelectionChanged, + selectionMode: DateRangePickerSelectionMode.range, + navigationMode: DateRangePickerNavigationMode.scroll, + navigationDirection: DateRangePickerNavigationDirection.vertical, + minDate: _minDate, + maxDate: _maxDate, + showActionButtons: true, + onSubmit: (Object? value) => _onSubmitSelectedRange(), + onCancel: () => _onCancelSelectedRange(), + rangeSelectionColor: Color.fromRGBO(126, 159, 160, 1), + startRangeSelectionColor: Color.fromRGBO(9, 89, 95, 1), + endRangeSelectionColor: Color.fromRGBO(9, 89, 95, 1), + todayHighlightColor: Color.fromRGBO(9, 89, 95, 1), + selectionColor: Color.fromRGBO(9, 89, 95, 1), + monthCellStyle: DateRangePickerMonthCellStyle(todayTextStyle: const TextStyle(color: Color.fromRGBO(9, 89, 95, 1))), + + ), + ); + } +} diff --git a/pubspec.lock b/pubspec.lock index 773397f32c4b60ac236861ca6495ad3e1d93ea5a..0cca599e432a680777745917d095ef6ab8c1c54c 100644 --- a/pubspec.lock +++ b/pubspec.lock @@ -533,6 +533,22 @@ packages: url: "https://pub.dev" source: hosted version: "1.2.0" + syncfusion_flutter_core: + dependency: transitive + description: + name: syncfusion_flutter_core + sha256: "5ade7463887e45e91df497a071fe3a77c0cebfad81304d47fc1e1b5e886df19f" + url: "https://pub.dev" + source: hosted + version: "21.1.38" + syncfusion_flutter_datepicker: + dependency: "direct main" + description: + name: syncfusion_flutter_datepicker + sha256: d863c56dd2a4fcef70b973456da696516a16087b27c3393b901dbae52fda66db + url: "https://pub.dev" + source: hosted + version: "21.1.38" term_glyph: dependency: transitive description: diff --git a/pubspec.yaml b/pubspec.yaml index 082bf5a0ac010d73c5670102a9a80ef4331f840e..049aef50c5e080e6735c61bda11147045cbe57ca 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -50,6 +50,7 @@ dependencies: geolocator: ^9.0.2 geocoder: ^0.2.1 bottom_bar_with_sheet: ^2.4.0 + syncfusion_flutter_datepicker: ^21.1.38 dev_dependencies: flutter_test: