Flutter时间选择器无法输入阿拉伯数字问题求助

问题描述 #

已为Flutter的showTimePicker组件配置阿拉伯埃及语（ar_EG）本地化，通过选择方式设置时间时可正常识别阿拉伯数字，但手动输入时键盘仅支持英文数字，无法输入阿拉伯数字。

相关代码 #

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';

TimeOfDay _tim = const TimeOfDay(hour:5, minute: 0);

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const <LocalizationsDelegate<Object>>[
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
      ],
      supportedLocales: const <Locale>[
        Locale('ar', 'EG'),
      ],
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () async {
                final TimeOfDay? timeOfDay = await showTimePicker(
                  context: context,
                  initialTime: _tim,
                  builder: (BuildContext context, Widget? child) => MediaQuery(
                    data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
                    child: Localizations.override(
                      context: context,
                      locale: const Locale('ar', 'EG'),
                      child: child!,
                    ),
                  ),
                );
                if (timeOfDay != null) {
                  setState(() {
                    _tim = timeOfDay;
                  });
                }
              },
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black12),
                  color: Colors.white70,
                ),
                width: MediaQuery.of(context).size.width,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Column(
                    children: [
                      Text(
                        "Press to set the time",
                        style: TextStyle(
                          color: const Color.fromARGB(255, 126, 122, 122),
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                      Center(
                        child: Text(
                          _tim.format(context).toString(),
                          style: TextStyle(color: Colors.black38),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解决方法 #

1. 启用设备阿拉伯语输入法 #

Flutter输入键盘依赖系统输入法，需在设备设置中添加阿拉伯语（埃及）输入法，并切换为当前默认输入法。

2. 完善本地化代理配置 #

在localizationsDelegates中补充GlobalCupertinoLocalizations.delegate，确保多组件风格的本地化覆盖：

localizationsDelegates: const <LocalizationsDelegate<Object>>[
  GlobalMaterialLocalizations.delegate,
  GlobalWidgetsLocalizations.delegate,
  GlobalCupertinoLocalizations.delegate, // 添加该行
],

3. 强制输入框适配locale数字键盘 #

若上述步骤无效，可通过自定义builder遍历修改showTimePicker内部输入框的键盘类型：

builder: (BuildContext context, Widget? child) {
  return MediaQuery(
    data: MediaQuery.of(context).copyWith(alwaysUse24HourFormat: false),
    child: Localizations.override(
      context: context,
      locale: const Locale('ar', 'EG'),
      child: Builder(
        builder: (context) => _replaceTextInputType(child!),
      ),
    ),
  );
}

// 递归替换输入框键盘类型
Widget _replaceTextInputType(Widget child) {
  if (child is TextField) {
    return TextField(
      ...child, // 继承原TextField所有属性
      keyboardType: const TextInputType.numberWithOptions(decimal: false),
    );
  }
  // 递归处理子组件
  return child is StatelessWidget
      ? StatelessElement(child).updateChild(null, child, null)
      : (child is StatefulWidget
          ? StatefulElement(child).updateChild(null, child, null)
          : child);
}

4. 同步系统语言设置 #

将设备系统语言切换为阿拉伯语（埃及），确保系统locale与应用配置一致，输入法会自动适配阿拉伯数字键盘。

内容的提问来源于stack exchange，提问作者مجهول