ity_customized_keyboard 1.0.15

Easily create and integrate custom keyboards in Flutter. Perfect for creating unique input experiences like numeric keypads, emoji keyboards, or specialized layouts.

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: ^latest_version
   

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(
     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.dialog(
          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.bottomSheet(
          keyboards: [keyboardMomo],
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              // Your code here
            ],
          ),
        );
      },
    );

Show BottomNavigationBar:

    import 'package:ity_customized_keyboard/ity_customized_keyboard.dart';

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

Hidden BottomNavigationBar:

    import 'package:ity_customized_keyboard/ity_customized_keyboard.dart';

    KeyboardWrapper(
      //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