Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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,
            ),
like image 719
Yassine Zagliz Avatar asked Apr 30 '20 17:04

Yassine Zagliz


1 Answers

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

like image 78
Darshan Avatar answered Sep 17 '22 13:09

Darshan