I need to display an Arabic date picker

Question

I need to display an Arabic date picker , I can't control this with Locale constructor . It's only display an English view .

Pick date metod

  DateTime selectedDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2000, 1),
        lastDate: DateTime(2100),
        builder: (BuildContext context, Widget child) {
          return Theme(
            data: Theme.of(context).copyWith(
                colorScheme: ColorScheme.light(primary: primaryColor)),
            child: child,
          );
        });

    if (picked != null && picked != selectedDate) {
      selectedDate = picked;
    }
  }

Main Screen

void main() async {
      WidgetsFlutterBinding.ensureInitialized();
      await GetStorage.init();
      runApp(
        MyApp(),
      );
    }

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      translations: Translation(),
      locale: Locale(AuthController().appLocal.value),
      fallbackLocale: Locale(AuthController().appLocal.value),
      title: 'Hesabate App',
      theme: ThemeData(
        canvasColor: Colors.transparent,
        fontFamily: "NotoNaskhArabic_font",
      ),
      initialRoute: AppRoutes.splashScreen,
      getPages: AppRoutes.routes,
    );
  }
}

I have an updated language(en&ar) at this variable

AuthController().appLocal.value

Nader Salah · Accepted Answer · 2022-03-17T23:56:55.757

thank you , I found the solution I was looking for . to solve the Issue , I did some steps :

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

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

flutter_localizations:
        sdk: flutter

2.Import the plugin in dart file

import 'package:flutter_localizations/flutter_localizations.dart';

3.Inside MaterialApp, add following

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

4.then implement default datePicker as following

 DateTime selectedDate = DateTime.now();

  Future<void> _selectDate(BuildContext context) async {
    final DateTime picked = await showDatePicker(
        context: context,
        initialDate: selectedDate,
        firstDate: DateTime(2000, 1),
        lastDate: DateTime(2100),
        builder: (BuildContext context, Widget child) {
          return Theme(
            data: Theme.of(context).copyWith(
                colorScheme: ColorScheme.light(primary: primaryColor)),
            child: child,
          );
        });

    if (picked != null && picked != selectedDate) {
      selectedDate = picked;
    }
  }

5.finally call the previous method into your date TextField as following

Expanded(
       child: CustomTextField(
         hint: "date".tr,
         onPress: () => _selectDate(context),
        ),

LudmilKirov · Answer 2 · 2022-03-17T22:35:21.423

0

Can you be more specific on which package you are using?. For example flutter_datetime_picker have parameter locale, where you can pass LocalType.ar

  static Future<DateTime?> showPicker(
BuildContext context, {
bool showTitleActions: true,
DateChangedCallback? onChanged,
DateChangedCallback? onConfirm,
DateCancelledCallback? onCancel,
locale: LocaleType.en,
BasePickerModel? pickerModel,
DatePickerTheme? theme,

Edited per Nader clarification, you can pass locale:Locale("ar") to the internal date_picker

  const Locale(
this._languageCode, [
this._countryCode, ])

edited Mar 17 '22 at 22:35

answered Mar 17 '22 at 22:23

LudmilKirov

241
3
5

I'm not using an external package , it's a showDatePicker built in method into flutter . I can only show an english view through this constructor => locale: Locale("en"). – Nader Salah Mar 17 '22 at 22:26
Ok, so in the internal showDatePicker(), there is also a param locale in the native one, you can pass locale: Locale("ar") – LudmilKirov Mar 17 '22 at 22:31
I already did, and it shows an error says "No MaterialLocalizations found." . however I'm using Getx state managment and GetMaterialApp as a root of the app . – Nader Salah Mar 17 '22 at 22:35
Can you be more specific next time asking question https://stackoverflow.com/help/how-to-ask So can you explain the steps you make, the code where you init you local in the main.dart Have you added Arabic as supported locale? – LudmilKirov Mar 17 '22 at 22:39
sorry , I provided my question with more details – Nader Salah Mar 17 '22 at 22:50

Eng Thanoon · Answer 3 · 2023-03-12T19:22:32.207

use this it worked for me -

add flutter_localizations to pub.yaml

add this two line to main material app widget

localizationsDelegates[GlobalMaterialLocalizations.delegate],
supportedLocales: [const Locale('en'), const Locale('ar')],

for me my main looklike -

class MyApp extends StatelessWidget {
MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return GetMaterialApp(
    localizationsDelegates: [GlobalMaterialLocalizations.delegate],
    supportedLocales: [const Locale('en'), const Locale('ar')],
    debugShowCheckedModeBanner: false,
    initialRoute: get_initial_route(),
    getPages: app_routes());
}
}

place it in your code in any child widget from this material -

IconButton(
    onPressed: () async {
      final DateTime? pickedDate = await showDatePicker(
          context: context,
          initialDate: DateTime(1999),
          firstDate: DateTime(1960),
          lastDate: DateTime(2025),
          locale: Locale('ar'));
    },
    icon: Icon(
      Icons.date_range,
      color: Colors.blue,
    ),
  ),

and we are done every thing should be ok

I need to display an Arabic date picker

3 Answers3

use this it worked for me -