Arabic keyboard in flutter

Question

I want to enter Arabic numbers in my application. How to insert an Arabic number keyboard in the flutter app?

I have tried a lot but couldn't find the solution.

Answer 1

I had to change the source code of the virtual_keyboard_multi_language: ^1.0.3 package to get the desired output. The package used English numbers on an Arabic keyboard so I just change the keys from English to Arabic.

Step 1

Install virtual_keyboard_multi_language: ^1.0.3 package

Step 2

copy and paste this demo code in main.dart

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

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  TextEditingController textEditingController = TextEditingController();
  bool showKeyboard = false;
  late FocusNode focusNode;

  @override
  void initState() {
    super.initState();
    focusNode = FocusNode();

    // listen to focus changes
    focusNode.addListener(() {
      if (focusNode.hasFocus == false && showKeyboard == false) {
        setState(() {
          showKeyboard = false;
        });
      }
    });
  }

  void setFocus() {
    FocusScope.of(context).requestFocus(focusNode);
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        if (focusNode.hasFocus == false) {
          setState(() {
            showKeyboard = false;
          });
        }
      },
      child: Scaffold(
          body: Stack(
        children: [
          Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(20.0),
                child: TextField(
                  focusNode: focusNode,
                  keyboardType: TextInputType.none,
                  controller: textEditingController,
                  textDirection: TextDirection.rtl,
                  onTap: () {
                    setState(() {
                      showKeyboard = true;
                    });
                  },
                  decoration: InputDecoration(
                      border: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.black),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      enabledBorder: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.black),
                        borderRadius: BorderRadius.circular(10),
                      ),
                      focusedBorder: OutlineInputBorder(
                        borderSide: const BorderSide(color: Colors.black),
                        borderRadius: BorderRadius.circular(10),
                      )),
                ),
              ),
            ],
          ),
          Positioned(
            bottom: 0,
            child: showKeyboard
                ? Container(
                    color: Colors.black,
                    child: VirtualKeyboard(
                      fontSize: 20,
                      textColor: Colors.white,
                      textController: textEditingController,
                      type: VirtualKeyboardType.Alphanumeric,
                      defaultLayouts: const [
                        VirtualKeyboardDefaultLayouts.Arabic
                      ],
                    ),
                  )
                : Container(),
          )
        ],
      )),
    );
  }
}

Step 3

go to "flutter_windows_3.3.4-stable\flutter.pub-cache\hosted\pub.dartlang.org\virtual_keyboard_multi_language-1.0.3\lib\src\layout_keys.dart" and change in line 111

from

  const [
'1',
'2',
'3',
'4',
'5',
'6',
'7',
'8',
'9',
'0',
],

to

const ['٠', '١', '٢', '٣', '٤', '٥', '٦', '٧', '٨', '٩'],

Step 4

Restart the program to see the Arabic keyboard

Output

Hope this helps. Happy Coding :)