Arabic keyboard in flutter - 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 :)