search

syncfusion / flutter-examples

This repository contains the Syncfusion Flutter UI widgets examples and the guide to use them.
Other
1.94k stars 771 forks source link

Vertical scroll implementation full screen how to achieve #537

Closed rashmisridar closed 2 years ago

rashmisridar commented 2 years ago

In the date range picker how to implement as per the below screenshot. Using the latest pub syncfusion_flutter_datepicker: 19.4.38 https://user-images.githubusercontent.com/8536749/153386898-bd4c6f6c-e19a-4983-b4a4-3399d27a829c.jpeg

rashmisridar commented 2 years ago

date_picker_vertical

Able to achieve as per the above screenshot. How to add month separate after the calendar view

Indumathi1195R commented 2 years ago

Hi,

Based on the shared image, we have checked and your requirement is “Shown the month in vertical scroll direction in the Flutter date range picker”. As per the current implementation of the picker by setting the enableMultipleView property value as true with navigation direction as vertical, you can show picker with vertical scroll direction. But header of the pickers combiner and shown in top of the picker. But your requirement can be achieved sample level with multiple pickers. Also we have prepared the simple sample for your requirement to show the header for each picker with vertical scroll direction. Please find the sample from the following link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/flutter_multiplepicker631768535.zip

Screenshot: vidma_recorder_11022022_155134

We hope that this helps you. Please let us know if you need further assistance.

Regards, Indumathi R

rashmisridar commented 2 years ago

Thank you Indumathi. Checked on the sample link.

  1. Range working as separately because of two separate control
  2. Scroll control should be single. It should not be separate. (March 2022) over there scroll not working multi-selection How to achieve the above issues?
rashmisridar commented 2 years ago

This is my code link https://gist.github.com/rashmisridar/044c2fe941777bca0eeff422b9deb8e9

Indumathi1195R commented 2 years ago

Hi,

As per the current implementation, headers for both pickers will be shown in top the pickers and it is the expected behavior. If you want to separate headers, kindly use the separate pickers. But the scrolling and range selection was working separately. For applying scrolling and range selection to both pickers, kindly use your shared code snippet. We hope that this information helps you. Please let us know if you need further assistance.

Regards, Indumathi R

rashmisridar commented 2 years ago

Hi, I want to separate headers based on the month and range selection should not work separately. This is my requirement. Can you help with this? Thanks

Indumathi1195R commented 2 years ago

Hi,

We have prepared the simple sample for your requirement “Separate headers with range selection in SfDateRangePicker”.

Please find the code snippet for the same.

Code snippet:

body: SfDateRangePicker(
  enableMultiView: true,
  headerStyle:
  DateRangePickerHeaderStyle(textAlign: TextAlign.center),
  view: DateRangePickerView.month,
  navigationDirection: DateRangePickerNavigationDirection.vertical,
  selectionMode: DateRangePickerSelectionMode.range,
  showNavigationArrow: true,
  navigationMode: DateRangePickerNavigationMode.scroll,
  monthViewSettings: const DateRangePickerMonthViewSettings(
    enableSwipeSelection: false,
  ),
),

Please find the sample from the following link.

Sample link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/flutter_multiplepicker_(1)-852550525.zip

We hope that this helps you. Please let us know if you need further assistance.

Regards, Indumathi R

rashmisridar commented 2 years ago

Thank for so much for the solution.