How to localize the default texts in Flutter cartesian chart (SfCartesianChart) ?
In this article, we explain how to localize the default texts in Flutter cartesian chart.
The SfCartesianChart widget provides localization support, based on the current locale the build-in text for legend and tooltips are translated automatically. You can use the either in-build texts or customized texts. The following step explain how to use in-build text in the SfCartesianChart widget.
Step 1: Add syncfusion_flutter_charts and syncfusion_localizations packages in pubspec file and also add the necessary imports. We can change the locale of the flutter charts using the locale property of MaterialApp widget. Add SfGlobalLocalizations.delegate in the localizationsDelegate and add the supported locales, so based on this we can render the application.
Create the SfCartesianChart widget with the necessary properties. Add the tooltipBehavior and legend to ensure the localization changes.
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:syncfusion_flutter_charts/charts.dart';
/// To use the default localized text values.
import 'package:syncfusion_localizations/syncfusion_localizations.dart';
late List<ChartData> _chartData;
late TooltipBehavior _tooltipBehavior;
Locale? _locale;
String? currentLocale = 'en';
List<String> localeList = ['en', 'es'].toList();
@override
void initState() {
_chartData = <ChartData>[
ChartData(1, 23),
ChartData(2, 24),
ChartData(3, 32),
ChartData(4, 36),
ChartData(5, 27)
];
_locale = const Locale('en');
_tooltipBehavior = TooltipBehavior(enable: true);
super.initState();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
//Add our delegate here to use the localized texts of our widgets
SfGlobalLocalizations.delegate
],
supportedLocales: const [
Locale('en'),
Locale('es'),
],
Locale: _locale,
home: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
const Text('Locale:'),
Radio<String>(
value: 'en',
groupValue: currentLocale,
onChanged: (String? value) {
setState(() {
currentLocale = value;
_onLocaleChanged(value!);
});
},
),
const Text('en'),
Container(
padding: const EdgeInsets.only(left: 5),
child: Radio<String>(
value: 'es',
groupValue: currentLocale,
onChanged: (String? value) {
setState(() {
currentLocale = value;
_onLocaleChanged(value!);
});
},
),
),
const Text('es')
],
),
SfCartesianChart(
legend: Legend(isVisible: true),
tooltipBehavior: TooltipBehavior(enable: true),
series: <ColumnSeries<ChartData, double>>[
ColumnSeries<ChartData, double>(
dataSource: _chartData,
xValueMapper: (ChartData data, _) => data.x,
yValueMapper: (ChartData data, _) => data.y
),
]
),
]
);
void _onLocaleChanged(String changedLocale) {
if (changedLocale == 'en') {
_locale = const Locale('en');
} else {
_locale = const Locale('es');
}
}
}
class ChartData {
ChartData(this.x, this.y);
final double x;
final double y;
}
The above codes render the legend with default en language and tooltip header values as default localized texts as below.
The following steps explains how to use customized values.
Step 1: To use the customized localized values, first create the localization.dart file in the lib folder. Then create a class for the culture from SfLocalizations class and override the required field values as needed.
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_core/localizations.dart';
class SfLocalizationEs extends SfLocalizations {
SfLocalizationEs();
/// Need to add other overridden fields here.
@override
/// Customized the chart widget field only here.
String get series => 'Customized string’;
}
Step 2: Add the delegate class for custom text in the localization.dart file.
class SfLocalizationEsDelegate extends LocalizationsDelegate<SfLocalizations> {
const SfLocalizationEsDelegate();
@override
bool isSupported(Locale locale) => locale.languageCode == 'es';
@override
Future<SfLocalizations> load(Locale locale) {
return SynchronousFuture<SfLocalizations>(SfLocalizationEs());
}
@override
bool shouldReload(LocalizationsDelegate<SfLocalizations> old) => true;
}
Step 3: Call the delegate class in localizationsDelegate of MaterialApp widget instead of using SfGlobalLocalizations.delegate to override the localized values in the main.dart file.
//import other required packages
//import the newly created localization file here
import 'localization.dart';
MaterialApp(
localizationsDelegates: const [
GlobalMaterialLocalizations.delegate,
GlobalWidgetsLocalizations.delegate,
SfLocalizationEsDelegate()
],
supportedLocales: const [
Locale('en'),
Locale('es'),
],
locale: const Locale('es'),
home: SfCartesianChart(
/// Need to add necessary properties for charts here.
)
);
The above codes render the chart with custom texts in SfCartesianChart widget.
