ITY Customized Keyboard #

Empowers you to design personalized keyboards tailored to your preferences and seamlessly integrate them with [TextField].

✨ Features #

• Customized keyboards can be anything you imagine – they are essentially a widget crafted by you.
• The custom keyboard automatically appears and disappears based on whether the text field is focused or loses focus.
• The [onFieldSubmitted] functionality works seamlessly, and special buttons like backspace and next are included for smooth navigation.

🚀 Getting Started #

1. Add the package to your pubspec.yaml:

   dependencies:
     ity_customized_keyboard: ^1.0.12
   

2. Craft Your Custom Keyboard

   import 'package:ity_customized_keyboard/ity_customized_keyboard.dart';
   
   class YourCustomKeyboard extends CustomKeyboard {
     
     // Define the keyboard UI
     @override
     Widget build(BuildContext context){
       return Container(
         child: CustomKeyboardKey(
           keyEvent: const CustomKeyboardEvent.clear(),
           borderRadius: BorderRadius.circular(10),
           padding: const EdgeInsets.all(2),
           color: Colors.red,
           child: Center(child: Text('AC')),
         ),
       );
     }
     
     // Set the keyboard height
     @override
     double get height => 230;
     
     // Provide a unique name for the keyboard
     @override
     String get name => 'YOUR_NAME_KEYBOARD';
        
     @override
     Color get backgroundColor => const Color(0xEAEFEFEF);
   }
   

3. Seamlessly Embed Your Custom Keyboard

   import 'package:ity_customized_keyboard/ity_customized_keyboard.dart';
   // Initialize the custom keyboard
   final yourCustomKeyboard = YourCustomKeyboard();
     
   // Wrap your widget tree with KeyboardWrapper
   KeyboardWrapper(
     context: context,
     keyboards: [yourCustomKeyboard],
     child: //Your code here
   ),
     
   // Use the custom keyboard in a text field
   CustomTextField(
     keyboardType: yourCustomKeyboard.inputType,
   ),
   

🔧 Usage #

Dialog:

    import 'package:ity_customized_keyboard/ity_customized_keyboard.dart';
    
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return KeyboardWrapper(
          context: context,
          keyboards: [keyboardMomo],
          child: Dialog(
            // Your code here
          ),
        );
      },
    );

BottomSheet:

    import 'package:ity_customized_keyboard/ity_customized_keyboard.dart';

    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return KeyboardWrapper(
          context: context,
          keyboards: [keyboardMomo],
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // Your code here
            ],
          ),
        );
      },
    );

Show BottomNavigationBar:

    import 'package:ity_customized_keyboard/ity_customized_keyboard.dart';

    KeyboardWrapper(
      context: context,
      keyboards: [keyboardMomo],
      child: Scaffold(
        // Your code here
      ),
    )

Hidden BottomNavigationBar:

    import 'package:ity_customized_keyboard/ity_customized_keyboard.dart';

    KeyboardWrapper(
      context: context,
      //remove height bottomNavigationBar
      heightBottomNavigationBar: kBottomNavigationBarHeight - 10,
      keyboards: [keyboardMomo],
      child: Scaffold(
        // Your code here
      ),
    )

📱 Example #

To see ity_customized_keyboard in action, explore the full example project available in the example.

🛠️ Contributions #

We gladly accept contributions! If you have suggestions for new features, bug fixes, or improvements, don't hesitate to open an issue or submit a pull request. Your input is always welcome!

🐞 Issues and feedback #

We value your feedback! Share your thoughts or report bugs by filing issues. Thank you for helping us improve!

📄 Source #

This package is a clone of the Customized Keyboard package.

📜 License #

MIT License