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

Note

To ensure the library functions at its best, we highly recommend using the provided CustomTextField, CustomTextFormField. This widget has been optimized for seamless integration with your customized keyboard, minimizing potential issues and ensuring high performance.

  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