I implemented the date range picker. Here I need to modify the UI a little bit. I need to remove the top three texts: 1. Select range, 2. Start date, 3. End date. Is it possible? Or do I want to use any other third party packages? Is it possible?
SizedBox(
width: context.screenWidth * 0.3,
child: InkWell(
onTap: () async {
final DateTime now = DateTime.now();
final DateTimeRange? picked = await showDateRangePicker(
initialEntryMode: DatePickerEntryMode.calendarOnly,
context: context,
firstDate: DateTime(2000),
lastDate: now,
builder: (context, child) => Theme(
data: Theme.of(context).copyWith(
colorScheme: const ColorScheme.light(
primary: Colors.indigo,
onPrimary: Colors.white,
onSurface: Colors.black,
),
textButtonTheme: TextButtonThemeData(
style: TextButton.styleFrom(
foregroundColor: Colors.indigo,
),
),
),
child: child!,
),
);
},
child: Container(
height: 40,
padding: const EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
border: selectedIndex == 4
? Border.all(color: Colors.indigo)
: null,
borderRadius: BorderRadius.circular(4),
color: Colors.indigo.withValues(alpha: 0.1),
),
child: Center(
child: Text(
"Custom",
style: TextStyle(
color: selectedIndex == 4
? Colors.blue
: Colors.red,
),
),
),
),
),
),
You can remove "Select Range" by passing empty string to helpText
like this
showDateRangePicker(
context: context,
firstDate: DateTime(2020),
lastDate: DateTime(2050),
helpText: "",
);
but you can't remove Start Date
and End Date
directly unless you rewrite the code for DateRangePickerDialog
which is StatefullWidget you can find the code for it in material/date_picker.com
. which is not a good approach IMO.