flutterdartflutter-layoutflutter-dependenciesflutter-animation

How to change language of Show date picker in flutter


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,
            ),

Solution

  • 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:

    1. Add flutter_localizations plugin in pubspec.yaml and run pub get.
      flutter_localizations:
        sdk: flutter  
    
    1. Import the plugin in dart file.
    import 'package:flutter_localizations/flutter_localizations.dart';
    
    1. 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!,
                  );
                });
          },
        )
     )    
    
    1. 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