ITY Customized Keyboard

Pub

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