Contact Support
Theme for Syncfusion® widgets
26 Dec 202419 minutes to read
The Syncfusion® theme widget allows you to apply colors, font-styles, etc in the application level across all the Syncfusion® Flutter widgets with a uniform approach and provide a consistent look.
Using SfTheme widget
The SfTheme widget is used to apply theme at one place to all of the applicable Syncfusion® Flutter widgets. This widget is used to configure theme data for all widgets using SfThemeData class. The SfThemeData holds the color and typography values for light and dark themes.
The SfTheme widget is available in the syncfusion_flutter_core package. Since all our widgets are core dependent, you don’t need to include the core as a separate package. For example, here we have included the syncfusion_flutter_charts package in the pub spec file for the purpose of depicting the working model of the theme widget.
dependencies:
syncfusion_flutter_charts: ^xx.x.xxNote: Here xx.x.xx denotes the current version of
Syncfusion Flutter Chartwidget.
To use the theme widgets, import the following library in your Dart code.
import 'package:syncfusion_flutter_core/theme.dart';Once the required package has been imported, initialize SfTheme widget and then add any widget as a child. The theme data applied in this SfTheme widget is applied to all the Syncfusion® widgets that are descendant of this SfTheme widget. For demonstration purposes, SfCartesianChart has been added as a child of SfTheme widget in the below code snippet.
@override
Widget build(BuildContext context) {
final List<ChartData> chartData = [
ChartData('Jan', 35),
ChartData('Feb', 28),
ChartData('Mar', 34),
ChartData('Apr', 32),
ChartData('May', 40)
];
return Scaffold(
body: Center(
child: SfTheme(
data: SfThemeData(
chartThemeData: SfChartThemeData(
plotAreaBackgroundColor: Colors.grey[400]
)
),
child: SfCartesianChart(
primaryXAxis: CategoryAxis(),
series: <ChartSeries<ChartData, int>>[
// Renders area chart
LineSeries<ChartData, int>(
dataSource: chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y)
]
)
)
)
);
}
In the above code snippet, chartThemeData property has been configured with SfChartThemeData instance. Similarly, the SfThemeData class has theme data properties for other widgets also. Refer the following table to know about the theme data classes that are applicable for respective widgets.
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfTheme(
data: SfThemeData(
brightness: Brightness.dark
),
child: SfCartesianChart(
// Other configurations
)
)
)
);
}@override
Widget build(BuildContext context) {
return Scaffold(
body: SfChartTheme(
data: SfChartThemeData(
brightness: Brightness.dark,
backgroundColor: Colors.blue[300]
),
child: SfCartesianChart(
// Other configurations
)
)
);
}