tappy_keyboard 3.4.1
tappy_keyboard: ^3.4.1 copied to clipboard
An embedded, customizable virtual keyboard plugin for Flutter apps with theming, custom layouts, and hotkey support.
example/lib/main.dart
import 'dart:developer';
import 'package:flutter/material.dart';
import 'package:tappy_keyboard/tappy_keyboard.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Tappy Keyboard',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.blueAccent),
useMaterial3: true,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
const HomeScreen({
super.key,
});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (c) => NumericKeyboardExample(),
),
);
},
child: Text("Numeric"),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (c) => AlphaNumericKeyboardExample(),
),
);
},
child: Text("Alphanumeric"),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (c) => AlphaNumericFormKeyboardExample(),
),
);
},
child: Text("Alphanumeric Form"),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (c) => KeyboardHotKeyExample(),
),
);
},
child: Text("Hot Key Keyboard"),
),
],
),
),
);
}
}
class AlphaNumericKeyboardExample extends StatelessWidget {
const AlphaNumericKeyboardExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Alpha Numeric Keyboard"),
),
body: TappyKeyboard(
controller: TappyKeyboardController(),
type: TappyKeyboardType.alphanumeric,
showAtSymbol: true,
onTap: (key) {},
child: Padding(
padding: const EdgeInsets.all(40.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
for (int i = 1; i <= 15; i++)
TextField(
decoration: InputDecoration(
label: Text("Input Field $i"),
),
keyboardType: i % 2 == 0 ? TextInputType.number : null,
),
],
),
),
),
);
}
}
class AlphaNumericFormKeyboardExample extends StatelessWidget {
const AlphaNumericFormKeyboardExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("SubmitFormHook"),
),
body: TappyKeyboard(
controller: TappyKeyboardController(),
type: TappyKeyboardType.alphanumeric,
showAtSymbol: true,
child: Padding(
padding: const EdgeInsets.all(40.0),
child: TappyForm(
onSubmit: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("Form Submitted Successfully!"),
),
);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
for (int i = 1; i <= 2; i++)
TextFormField(
// explicitly defined controller for real-time validation
controller: TextEditingController(),
decoration: InputDecoration(
label: Text("Input Field $i"),
),
onSaved: (value) {
log("Input Field $i: $value", name: 'INFO');
},
validator: (value) {
if (value == null || value.isEmpty) {
return "Required";
}
return null;
},
),
],
),
),
),
),
);
}
}
class NumericKeyboardExample extends StatelessWidget {
const NumericKeyboardExample({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Numeric Keyboard"),
),
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
TextField(
decoration: InputDecoration(
label: Text("Editable"),
),
),
IntrinsicWidth(
child: TappyKeyboard(
controller: TappyKeyboardController(),
type: TappyKeyboardType.numeric,
showOnFocus: false,
),
),
],
),
),
);
}
}
class KeyboardHotKeyExample extends StatefulWidget {
const KeyboardHotKeyExample({super.key});
@override
State<KeyboardHotKeyExample> createState() => _KeyboardHotKeyExampleState();
}
class _KeyboardHotKeyExampleState extends State<KeyboardHotKeyExample> {
final controller = TappyKeyboardController();
@override
void initState() {
super.initState();
// enable if want to follow keys sequence
controller.isSequenceHotKeys = true;
controller.addHotKey(
TappyKeyboardHotKey(
modifiers: [
TappyKeyboardKeyData(keyAction: TappyKeyAction.ctl),
TappyKeyboardKeyData(keyAction: TappyKeyAction.alt),
TappyKeyboardKeyData(keyAction: TappyKeyAction.letter, text: 'q'),
],
callback: () {
ScaffoldMessenger.of(context).showSnackBar(
SnackBar(
content: Text("Hi Ctrl + Shift + A!"),
),
);
},
),
);
}
@override
void dispose() {
super.dispose();
controller.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Keyboard Hot Key Example"),
),
body: TappyKeyboard(
controller: controller,
type: TappyKeyboardType.alphanumeric,
showAtSymbol: true,
onTap: (key) {},
child: Center(
child: ElevatedButton(
onPressed: controller.forceShowKeyboard,
child: Text("Show On-Screen Keyboard"),
),
),
),
);
}
}