How to change language of Show date picker in flutter

Question

I would like to change the language from english to french in show date picker, Please find below the code i am using and one like which supposed to solve that but it makes the code not working for this part:

              new Step(
              title: new Text("Quelle est la date de 1er immatriculation?"),
              content: Column(
                children: <Widget>[
                 Text(_datetime == null ? "Vous n'avez pas encore choisi de date" : _datetime.toString().substring(0, 10)),

                  RaisedButton(
                      child: Text('choisissez une date'),
                    onPressed: () {
                    showDatePicker(context: context,
                      locale : const Locale("fr","FR"),//this line making the code not working too
                      builder: (BuildContext context, Widget child) {
                        return Theme(
                          data: ThemeData.fallback(),
                          child: child,
                        );
                      },
                     // locale: const Locale('eu', 'FR'),
                      initialDate: DateTime.now(),
                        firstDate: DateTime(1920),
                          lastDate: DateTime(2100),
                      ).then((date) {
                      setState(() {
                        _datetime =  date;
                      });
                      });
                    }
                 ),
                ],
              ),
              isActive: _currentStep >= 0,
              state:
              _currentStep >= 2 ? StepState.complete : StepState.disabled,
            ),

score 64 · Accepted Answer · edited Feb 22 '22 at 06:49

In order to show the date picker in local language, you need to make use of flutter_localizations plugin and specify localizationDelegates and supportedLocales inside MaterialApp in your main code. Below is sample working code that shows datepicker in French:

Add flutter_localizations plugin in pubspec.yaml and run pub get.

  flutter_localizations:
    sdk: flutter

Import the plugin in dart file.

import 'package:flutter_localizations/flutter_localizations.dart';

Inside MaterialApp, add following:

 return MaterialApp(
       localizationsDelegates: [
         GlobalMaterialLocalizations.delegate
       ],
       supportedLocales: [
         const Locale('en'),
         const Locale('fr')
       ],

Center(
   child: ElevatedButton(
     child: const Text('Tap'),
       onPressed: () {
         showDatePicker(
            context: context,
            locale: const Locale("fr", "FR"),
            initialDate: DateTime.now(),
            firstDate: DateTime(2018),
            lastDate: DateTime(2030),
            builder: (BuildContext context, Widget? child) {
              return Theme(
                data: ThemeData.dark(),
                child: child!,
              );
            });
      },
    )
 )

Run app again (hot restart) and see that datepicker shows up in French.

More info about localization can be found on the official docs

enter image description here

the import is import 'package:flutter_localizations/flutter_localizations.dart'; — chihau, Aug 02 '20 at 02:39

score 4 · Answer 2 · edited Dec 15 '21 at 07:22

4

I followed @Darshan's answer but I got the following error:

Unsupported operation: Cannot set value in unmodifiable Map

after I removed await initializeDateFormatting('fr_FR'); from main.dart it worked!

edited Dec 15 '21 at 07:22

Nimantha

6,405
6
28
69

answered Aug 12 '20 at 14:21

Etsurosu

49
1
1

score 3 · Answer 3 · answered Apr 05 '22 at 14:48

dependencies:


flutter:
    sdk: flutter
  flutter_localizations: # Add this line
    sdk: flutter         # Add this line

in main.dart

import 'package:flutter_localizations/flutter_localizations.dart';

in MaterialApp

return const MaterialApp(
  title: 'Localizations Sample App',
  localizationsDelegates: [
    GlobalMaterialLocalizations.delegate,
    GlobalWidgetsLocalizations.delegate,
    GlobalCupertinoLocalizations.delegate,
  ],
  supportedLocales: [
    Locale('en', ''),  code
    Locale('ar', ''), // arabic, no country code
  ],
  home: MyHomePage(),
);

then add this to your date time picker

locale: const Locale("ar","AR"),

How to change language of Show date picker in flutter

3 Answers3

Linked