Flutter sfcalendar appbar title language

Question

I am Val and this is my first question on stackoverflow. (newbie here / and new to coding and please don't be annoyed - sorry for my dumb quenstion)

I am using sfcalendar for an app I am working on. I successfully managed to place the month on the Appbar - however, the language stays in english even I've set it to german.

---

import 'package:calendart/Screens/NavBar.dart';
import 'package:calendart/Screens/Tabs.dart';
import 'package:flutter/services.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
import 'package:resizable_widget/resizable_widget.dart'; //not in use
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:flutter/scheduler.dart';
import 'package:intl/intl.dart';

void main() {
  //Behält die App in aufrechter position
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((value) => runApp(const Saveta()));
  //Behält die App in aufrechter Position
  runApp(const Saveta());
}

class Saveta extends StatefulWidget {
  const Saveta({Key? key}) : super(key: key);

  @override
  State<StatefulWidget> createState() => MyAppState();
}

class MyAppState extends State<Saveta> {
  String? _month, _year;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        //Sprachen
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: const [
        Locale('de'),
      ],
      locale: const Locale('de'),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.white,
        endDrawer: const NavBar(),
        //APP BAR 1
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(40.0),
          child: AppBar(
            title: Text(
              '⥣    ' '$_month' '    ⥥',
              style: const TextStyle(color: Colors.black),
            ),
            leading: IconButton(
              onPressed: () {},
              icon: const Icon(
                Icons.search,
                size: 30,
              ),
            ),
            backgroundColor: Colors.white,
            systemOverlayStyle:
                const SystemUiOverlayStyle(statusBarColor: Colors.white),
            centerTitle: true,
            elevation: 0,
            iconTheme: const IconThemeData(color: Colors.black), //betrifft Icons
          ),
        ),
        body: Column(
          children: [
            Expanded(
              flex: 15,
              child: SfCalendar(
                onViewChanged: viewChanged,
                dataSource: getCalendarDataSource(),
                headerStyle: const CalendarHeaderStyle(
                  textStyle: TextStyle(
                    color: Colors.black,
                    fontSize: 30,
                  ),
                  textAlign: TextAlign.center,
                ),
                todayTextStyle: const TextStyle(
                  color: Colors.black,
                  height: 0.4,
                ),
                headerDateFormat: 'MMMM',
                todayHighlightColor: Colors.transparent,
                firstDayOfWeek: 1,
                headerHeight: 0,
                viewHeaderHeight: 15,
                view: CalendarView.month,
                monthViewSettings: MonthViewSettings(
                  navigationDirection: MonthNavigationDirection.vertical,
                    dayFormat: 'EEE',
                    numberOfWeeksInView: 6,
                    appointmentDisplayCount: 4,
                    appointmentDisplayMode:
                        MonthAppointmentDisplayMode.appointment,
                    monthCellStyle: MonthCellStyle(
                        textStyle: const TextStyle(
                            height: 0.4, fontSize: 15, color: Colors.black),
                        trailingDatesTextStyle: TextStyle(
                            height: 0.4,
                            fontSize: 15,
                            color: Colors.grey.shade300),
                        leadingDatesTextStyle: TextStyle(
                            height: 0.4,
                            fontSize: 15,
                            color: Colors.grey.shade300),
                        backgroundColor: Colors.white,
                        todayBackgroundColor: Colors.grey.shade300,
                        leadingDatesBackgroundColor: Colors.white,
                        trailingDatesBackgroundColor: Colors.white)),
              ),
            ),
            const Expanded(flex: 10, child: MyTabs())
          ],
        ),
      ),
    );
  }

  _DataSource getCalendarDataSource() {
    final List<Appointment> appointments = <Appointment>[];
    appointments.add(Appointment(
      startTime: DateTime.now().add(const Duration(hours: 4, days: 2)),
      endTime: DateTime.now().add(const Duration(hours: 5, days: 2)),
      subject: 'Release Meeting',
      color: Colors.lightBlueAccent,
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(const Duration(hours: 2, days: 2)),
      endTime: DateTime.now().add(const Duration(hours: 4, days: 2)),
      subject: 'Performance check',
      color: Colors.amber,
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(const Duration(hours: 6, days: 2)),
      endTime: DateTime.now().add(const Duration(hours: 7, days: 2)),
      subject: 'Support',
      color: Colors.green,
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(const Duration(hours: 6, days: 2)),
      endTime: DateTime.now().add(const Duration(hours: 7, days: 2)),
      subject: 'Retrospective',
      color: Colors.purple,
    ));
    appointments.add(Appointment(
      startTime: DateTime.now().add(const Duration(hours: 6, days: 2)),
      endTime: DateTime.now().add(const Duration(hours: 7, days: 2)),
      subject: 'Support',
      color: Colors.red,
    ));

    return _DataSource(appointments);
  }

  void viewChanged(ViewChangedDetails viewChangedDetails) {
    SchedulerBinding.instance!.addPostFrameCallback((Duration duration) {
      setState(() {
        _month = DateFormat('MMMM')
            .format(viewChangedDetails
                .visibleDates[viewChangedDetails.visibleDates.length ~/ 2])
            .toString();
        _year = DateFormat('yyyy')
            .format(viewChangedDetails
                .visibleDates[viewChangedDetails.visibleDates.length ~/ 2])
            .toString();
      });
    });
  }
}

class _DataSource extends CalendarDataSource {
  _DataSource(List<Appointment> source) {
    appointments = source;
  }
}

---

syncfusion_flutter_calendar: ^20.1.48 (.yaml)

(https://www.syncfusion.com/kb/12259/how-to-get-the-month-and-year-of-month-view-in-the-flutter-calendar "AppBar month title - Method") (https://help.syncfusion.com/flutter/calendar/localization "Method for language")

thanks and I hope someone sees this

Answer 1

By default, the Syncfusion widgets are implemented with English localization (en-US) alone. You can add support for other languages by including our another package named syncfusion_localizations.

https://help.syncfusion.com/flutter/globalization

pubspec.yaml

dependencies:
    syncfusion_localizations: ^xx.x.xx

import 'package:syncfusion_localizations/syncfusion_localizations.dart';

// ...

return MaterialApp(  
  localizationsDelegates: [
      GlobalMaterialLocalizations.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,

      SfGlobalLocalizations.delegate // ADD THIS ONE
    ],
// ...