Customizable Footer

[manandharsudhir]

Use case

Currently, we can only set cancel and okay buttons and customize the text of these buttons. Additionally, we can use the theme to set the decoration of the buttons. However, it would be great if we could use any widget as the footer.

Furthermore, it would be beneficial if we could change the decoration of each button separately, as the cancel and okay buttons often require distinct designs.

Proposed Features:

• Allow any widget to be used as the footer.
• Enable separate decoration customizations for the cancel and okay buttons.

Benefits:

• Enhanced flexibility for developers to customize the footer according to their application needs.
• Improved design capabilities by allowing distinct styles for different buttons.

Proposal

SfDateRangePicker(
               
               cancelTextStyle: textTheme.bodyMedium
                   ?.copyWith(color: const Color(0xff19181A)),
              
 		okTextStyle: textTheme.bodyMedium?.copyWith(
                 color: Colors.white,
               ),
               cancelStyle: ButtonStyle(
                 backgroundColor: WidgetStateProperty.all<Color>(
                   AppColors.bodyTextDark,
                 ),
                 padding: WidgetStateProperty.all<EdgeInsetsGeometry>(
                     const EdgeInsets.symmetric(
                         vertical: 16.0, horizontal: 16.0)),
                 shape: WidgetStateProperty.all<OutlinedBorder>(
                   RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(4.0),
                   ),
                 ),
               ),

               okStyle: ButtonStyle(
                 backgroundColor:
                     WidgetStateProperty.all<Color>(AppColors.primaryGreen700),
                 padding: WidgetStateProperty.all<EdgeInsetsGeometry>(
                     const EdgeInsets.symmetric(
                         vertical: 16.0, horizontal: 16.0)),
                 shape: WidgetStateProperty.all<OutlinedBorder>(
                   RoundedRectangleBorder(
                     borderRadius: BorderRadius.circular(4.0),
                   ),
                 ),
               ),
               showCancelAndOkButtonOnly: true,
              
             )

[PreethikaSelvam]

Hi @manandharsudhir,

We have analyzed your query, but currently, we do not have direct support for achieving your requirement. However, we have prepared a workaround sample to achieve your requirement by adding a custom button and handling the selected date through the DateRangePickerController. We have used two custom buttons, Cancel and View Report. The Cancel button clears the selected date and shows a dialog indicating the cancellation, while the View Report button displays the selected date in a dialog. The _showDialog method is used for displaying dialogs with the provided title and content. We have shared a code snippet and a sample for your reference. You can modify the sample based on your needs.

Code snippet:

final DateRangePickerController _controller = DateRangePickerController();

 

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: SafeArea(

        child: Column(

          children: [

            Expanded(

              child: SfDateRangePicker(

                view: DateRangePickerView.month,

                controller: _controller,

                onSelectionChanged: (DateRangePickerSelectionChangedArgs args) {

                  setState(() {});

                },

              ),

            ),

            Row(

              mainAxisAlignment: MainAxisAlignment.spaceEvenly,

              children: [

                TextButton(

                  style: TextButton.styleFrom(

                    foregroundColor: Colors.white,

                    backgroundColor: Colors.redAccent,

                    padding: const EdgeInsets.symmetric(

                        vertical: 12, horizontal: 24),

                    shape: RoundedRectangleBorder(

                        borderRadius: BorderRadius.circular(8)),

                  ),

                  onPressed: () {

                    setState(() {

                      _controller.selectedDate = null; // Clear selected date

                    });

                    _showDialog(

                        "Selection Canceled", "You canceled the selection.");

                  },

                  child: const Text("Cancel"),

                ),

                TextButton(

                  style: TextButton.styleFrom(

                    foregroundColor: Colors.white,

                    backgroundColor: Colors.blueAccent,

                    padding: const EdgeInsets.symmetric(

                        vertical: 12, horizontal: 24),

                    shape: RoundedRectangleBorder(

                        borderRadius: BorderRadius.circular(8)),

                  ),

                  onPressed: () {

                    final selectedDate = _controller.selectedDate;

                    _showDialog(

                      "Selected Dates",

                      selectedDate != null

                          ? "Selected Date: ${selectedDate.toString()}"

                          : "No date selected.",

                    );

                  },

                  child: const Text("View Report"),

                ),

              ],

            ),

          ],

        ),

      ),

    );

  }

 

  void _showDialog(String title, String content) {

    showDialog(

      context: context,

      builder: (BuildContext context) => AlertDialog(

        title: Text(title),

        content: Text(content),

        actions: <Widget>[

          TextButton(

            child: const Text("OK"),

            onPressed: () {

              Navigator.of(context).pop();

            },

          ),

        ],

      ),

Please let us know if you need any further assistance.

Regards,
Preethika Selvam.
gh1968.zip

[manandharsudhir]

Yes there are a lot of ways of doing it however it would be great to have customizable ok and cancel button as there is already buttons provided without any decoration parameter just adding the parameters in the package would solve and make it easy to use

[PreethikaSelvam]

Hi @manandharsudhir,

As mentioned in our previous update, you can customize the action buttons by adding a custom button and handling the actions through the DateRangePickerController. Currently, we do not have a built-in option to customize the action buttons. However, we have taken your requirement into consideration as a new feature and have logged a feature request for it in our feedback portal.

We will prioritize the features for each release based on demand and priority. Therefore, this feature will be available in one of our upcoming releases. You can also track the status of the feature using the feedback link provided below.

FR Link: Provide action buttons customization support in SfDateRangePicker

Regards,
Preethika Selvam.