Category / Section
How to add an image as background in the Flutter Date Range Picker (SfDateRangePicker)
1 min read
In the Flutter date range picker, you can add an image as a background for the picker. To properly display the background image, you need to set the picker's backgroundColor property to transparent.
import 'package:flutter/material.dart'; import 'package:syncfusion_flutter_datepicker/datepicker.dart'; void main() => runApp(Background_Image()); class Background_Image extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, home: Scaffold( body: SafeArea( child: Card( margin: const EdgeInsets.fromLTRB(50, 150, 50, 150), child: Container( constraints: BoxConstraints.expand(), decoration: BoxDecoration( image: DecorationImage( image: AssetImage("icons/image.png"), fit: BoxFit.cover)), child: SfDateRangePicker( headerStyle: DateRangePickerHeaderStyle( textStyle: TextStyle(color: Colors.white)), monthViewSettings: DateRangePickerMonthViewSettings( viewHeaderStyle: DateRangePickerViewHeaderStyle( textStyle: TextStyle(color: Colors.white))), backgroundColor: Colors.transparent, monthCellStyle: DateRangePickerMonthCellStyle( textStyle: TextStyle(color: Colors.white)), yearCellStyle: DateRangePickerYearCellStyle( textStyle: TextStyle(color: Colors.white), leadingDatesTextStyle: TextStyle(color: Colors.white), disabledDatesTextStyle: TextStyle(color: Colors.white)), )), ), ))); } }
Month view | Year view |
Decade view | Century view |