Theme for Syncfusion widgets

13 Mar 202418 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.

  • DART
  • dependencies:
        syncfusion_flutter_charts: ^xx.x.xx

    Note: Here xx.x.xx denotes the current version of Syncfusion Flutter Chart widget.

    To use the theme widgets, import the following library in your Dart code.

  • DART
  • 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.

  • DART
  • @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)
                            ]
                        )
                    )
                )
            );
        }

    Chart theme

    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.

    Theme data class Applicable widgets
    SfBarcodeThemeData SfBarcodeGenerator
    SfCalendarThemeData SfCalendar
    SfChartThemeData SfCartesianChart
    SfCircularChart
    SfPyramidChart
    SfFunnelChart
    SfSparkChartThemeData SfSparkLineChart
    SfSparkBarChart
    SfSparkAreaChart
    SfSparkWinLossChart
    SfDataGridThemeData SfDataGrid
    SfDateRangePickerThemeData SfDateRangePicker
    SfMapsThemeData SfMaps
    SfGaugeThemeData SfRadialGauge
    SfSliderThemeData SfSlider
    SfRangeSliderThemeData SfRangeSlider
    SfRangeSelectorThemeData SfRangeSelector
    SfPdfViewerThemeData SfPdfViewer

    Dark theme

    Syncfusion Flutter widgets provide support for light and dark themes. As the name suggests, these themes will have colors with light and dark color contrasts, respectively.

    By default, the light theme will be applied. You can apply a dark theme using the brightness property.

  • DART
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: Center(
                    child: SfTheme(
                        data: SfThemeData(
                            brightness: Brightness.dark
                        ),
                        child: SfCartesianChart(
                           // Other configurations
                        )
                    )  
                )          
            );
        }

    Dark theme

    Specialized theme widget

    Using the SfTheme widget you can apply theme across all the Syncfusion Flutter widgets at one place. If you wish to apply a specific theme to a specific widget alone, this can be achieved using the specialized theme widget.

    Initialize the specialized theme widget and then add respective widget as a child. For example, SfChartTheme (specialized) widget in case of SfCartesianChart, SfCircularChart, SfPyramidChart, SfPyramidChart widgets.The theme data applied in this specialized widget is applied to all its applicable widgets that are descendant of this widget. For demonstration purpose, SfCartesianChart has been added as child of SfChartTheme widget in the below code snippet.

  • DART
  • @override
        Widget build(BuildContext context) {
            return Scaffold(
                body: SfChartTheme(
                    data: SfChartThemeData(
                            brightness: Brightness.dark, 
                            backgroundColor: Colors.blue[300]
                    ),
                    child: SfCartesianChart(
                      // Other configurations
                    )
                )
            );
        }

    In the above code snippet, data property has been configured with SfChartThemeData instance.

    Here, the SfChartThemeData includes the properties required to customize the SfCartesianChart, SfCircularChart, SfPyramidChart, and SfFunnelChart widgets.
    Similarly, refer the following table to know about the other specialized theme widget classes that are applicable for respective widgets.

    Theme widget class Applicable widgets
    SfBarcodeTheme SfBarcodeGenerator
    SfCalendarTheme SfCalendar
    SfChartTheme SfCartesianChart
    SfCircularChart
    SfPyramidChart
    SfFunnelChart
    SfSparkChartTheme SfSparkLineChart
    SfSparkBarChart
    SfSparkAreaChart
    SfSparkWinLossChart
    SfDataGridTheme SfDataGrid
    SfDateRangePickerTheme SfDateRangePicker
    SfMapsTheme SfMaps
    SfGaugeTheme SfRadialGauge
    SfSliderTheme SfSlider
    SfRangeSliderTheme SfRangeSlider
    SfRangeSelectorTheme SfRangeSelector
    SfPdfViewerTheme SfPdfViewer

    Note: When dark or light theme is applied to the material app, and Syncfusion theme widgets are not initialized in your application, then based on the theme applied to the material app, the appropriate theme will be applied to Syncfusion widgets.