Articles in this section
Category / Section

How to customize the selected month cell in the Flutter date range picker (SfDateRangePicker)

2 mins read

In the Flutter date range picker, you can customize the selected cell using the `selectionTextStyle` property of `SfDateRangePicker` in the date picker.

Step 1:

Using the `selectionTextStyle` property, you can customize the selected cell.

child: SfDateRangePicker(
  view: DateRangePickerView.month,
  selectionShape: DateRangePickerSelectionShape.rectangle,
  selectionTextStyle:TextStyle(
    color: Colors.red, 
    decoration: TextDecoration.underline,
  ),
  selectionColor: Colors.amber,
  monthCellStyle: DateRangePickerMonthCellStyle(
    textStyle: TextStyle(fontSize: 15,color: Colors.black),
  ),
),

 

Step 2:

Please find entire code snippet for the same.

import 'dart:ui';
 
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
 
void main() => runApp(SelectedCellCustomization());
 
class SelectedCellCustomization extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SelectedCell(),
    );
  }
}
 
class SelectedCell extends StatefulWidget {
  @override
  _SelectedCellState createState() => _SelectedCellState();
}
 
class _SelectedCellState extends State<SelectedCell> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Card(
      margin: const EdgeInsets.fromLTRB(50, 150, 50, 150),
      child: SfDateRangePicker(
        view: DateRangePickerView.month,
        selectionShape: DateRangePickerSelectionShape.rectangle,
        selectionTextStyle:TextStyle(
          color: Colors.red, 
          decoration: TextDecoration.underline,
        ),
        selectionColor: Colors.amber,
        monthCellStyle: DateRangePickerMonthCellStyle(
          textStyle: TextStyle(fontSize: 15,color: Colors.black),
        ),
      ),
    ));
  }
}

 

View sample in Github.

Screenshot:

 

selection customization

 

 

 

 

 

 

 

 

 

 

 

 

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied