Category / Section
How to apply theming in the Flutter Date Range Picker (SfDateRangePicker)
1 min read
In Flutter date range picker, we can change theme of the date range picker using the SfDateRangePickerTheme widget.
Step 1:
Use ` SfDateRangePickerTheme ` widget inside the body of the Scaffold. Then add the date range picker as a child of `SfDateRangePickerTheme`.
body: SfDateRangePickerTheme( data: SfDateRangePickerThemeData( brightness: Brightness.dark, backgroundColor: Colors.black, ), child: Card( margin: const EdgeInsets.fromLTRB(40, 150, 40, 150), child: SfDateRangePicker()), ),
Step 2:
Please find the entire code snippet for date range picker dark theme.
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/widgets.dart';
import 'package:syncfusion_flutter_datepicker/datepicker.dart';
import 'package:syncfusion_flutter_core/theme.dart';
void main() => runApp(PickerTheme());
class PickerTheme extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: ThemeInPicker(),
);
}
}
class ThemeInPicker extends StatefulWidget {
@override
State<StatefulWidget> createState() => PickerThemeState();
}
class PickerThemeState extends State<ThemeInPicker> {
@override
Widget build(BuildContext context) {
return (Scaffold(
body: SfDateRangePickerTheme(
data: SfDateRangePickerThemeData(
brightness: Brightness.dark,
backgroundColor: Colors.black,
),
child: Card( margin: const EdgeInsets.fromLTRB(40, 150, 40, 150),
child: SfDateRangePicker()),
),
));
}
}
Screenshot
|
|
|
