extended_keyboard 0.0.1

Flutter plugin for create custom keyboards quickly.

extended_keyboard

Language: English| 中文简体

Flutter plugin for create custom keyboards quickly.

• extended_keyboard
  • Install
  • Use
    • SystemKeyboard
    • KeyboardBuilder
      • KeyboardTypeBuilder
      • CustomKeyboardController
      • KeyboardBuilder
    • TextInputScope
      • KeyboardBinding / KeyboardBindingMixin
      • KeyboardConfiguration
      • TextInputScope

Install

Run flutter pub add extended_keyboard, or add extended_keyboard to pubspec.yaml dependencies manually.

dependencies:
  extended_keyboard: ^latest_version

Use

SystemKeyboard

A singleton class that manages system keyboard height and provides functionality to handle keyboard layout changes.

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await SystemKeyboard().init();
  runApp(const MyApp());
}

KeyboardBuilder

KeyboardTypeBuilder

A widget that listens to changes in the CustomKeyboardController and builds a widget accordingly.

   KeyboardTypeBuilder(
     builder: (
       BuildContext context,
       CustomKeyboardController controller,
     ) =>
         ToggleButton(
       builder: (bool active) => Icon(
         Icons.sentiment_very_satisfied,
         color: active ? Colors.orange : null,
       ),
       activeChanged: (bool active) {
         _keyboardPanelType = KeyboardPanelType.emoji;
         if (active) {
           controller.showKeyboard();
         } else {
           controller.hideKeyboard();
         }
       },
       active: controller.isCustom &&
           _keyboardPanelType == KeyboardPanelType.emoji,
     ),
   ),

CustomKeyboardController

A controller for managing the keyboard type and notifying listeners.

• KeyboardType : The current keyboard type
• isCustom : whether current keyboard is custom
• showKeyboard : show the custom keyboard
• hideKeyboard : hide the custom keyboard

KeyboardBuilder

if Scaffold is used, make sure set Scaffold.resizeToAvoidBottomInset to false.

Using the KeyboardBuilder widget to encapsulate the area containing the input field allows for the creation of a custom keyboard layout within its builder callback. The builder function receives a parameter named systemKeyboardHeight, which represents the height of the last system keyboard displayed. This parameter can be utilized to set an appropriate height for your custom keyboard, ensuring a seamless and intuitive user experience.

parameter	description	default
builder	A builder function that returns a widget based on the system keyboard height.	required
body	The main body widget.	required
resizeToAvoidBottomInset	The same as Scaffold.resizeToAvoidBottomInset.	true

  return Scaffold(
    resizeToAvoidBottomInset: false,
    appBar: AppBar(title: const Text('ChatDemo(KeyboardBuilder)')),
    body: SafeArea(
      bottom: true,
      child: KeyboardBuilder(
        resizeToAvoidBottomInset: true,
        builder: (BuildContext context, double? systemKeyboardHeight) {
          return Container();
        },
        body: Column(children: <Widget>[
          Row(
            children: <Widget>[
              Expanded(
                child: TextField(),
              ),
              KeyboardTypeBuilder(
                builder: (
                  BuildContext context,
                  CustomKeyboardController controller,
                ) =>
                    ToggleButton(
                  builder: (bool active) => Icon(
                    Icons.sentiment_very_satisfied,
                    color: active ? Colors.orange : null,
                  ),
                  activeChanged: (bool active) {
                    _keyboardPanelType = KeyboardPanelType.emoji;
                    if (active) {
                      controller.showKeyboard();
                    } else {
                      controller.hideKeyboard();
                    }
                  },
                  active: controller.isCustom &&
                      _keyboardPanelType == KeyboardPanelType.emoji,
                ),
              ),
            ],
          ),
        ]),
      ),
    ),
  );

Full Demo

TextInputScope

KeyboardBinding / KeyboardBindingMixin

You can directly use KeyboardBinding or mix the KeyboardBindingMixin into your WidgetsFlutterBinding.

Future<void> main() async {
  KeyboardBinding();
  await SystemKeyboard().init();
  runApp(const MyApp());
}

KeyboardConfiguration

This configuration includes how the keyboard should be built, its animation durations, and how it should behave with respect to resizing.

parameter	description	default
getKeyboardHeight	Function that calculates the height of the custom keyboard.	required
builder	The main body widget.	required
keyboardName	The name of the keyboard	required
showDuration	Duration for the keyboard's show animation.	const Duration(milliseconds: 200)
hideDuration	Duration for the keyboard's hide animation.	const Duration(milliseconds: 200)
resizeToAvoidBottomInset	The same as Scaffold.resizeToAvoidBottomInset. if it's null, it's equal to TextInputScope.resizeToAvoidBottomInset	null

  KeyboardConfiguration(
    getKeyboardHeight: (double? systemKeyboardHeight) =>
        systemKeyboardHeight ?? 346,
    builder: () {
      return Container();
    },
    keyboardName: 'custom_number1',
    resizeToAvoidBottomInset: true,
  ),

TextInputScope

if Scaffold is used, make sure set Scaffold.resizeToAvoidBottomInset to false.

parameter	description	default
body	The main body widget.	required
configurations	A list of KeyboardConfiguration	required
keyboardHeight	The default height of the keyboard.	346
resizeToAvoidBottomInset	The same as Scaffold.resizeToAvoidBottomInset.	true

  late List<KeyboardConfiguration> _configurations;
  @override
  void initState() {
    super.initState();
    _configurations = <KeyboardConfiguration>[
      KeyboardConfiguration(
        getKeyboardHeight: (double? systemKeyboardHeight) =>
            systemKeyboardHeight ?? 346,
        builder: () {
          return Container();
        },
        keyboardName: 'custom_number',
      ),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('TextInputDemo'),
      ),
      resizeToAvoidBottomInset: false,
      body: SafeArea(
        bottom: true,
        child: TextInputScope(
          body: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 5),
            child: Column(
              children: <Widget>[
                TextField(
                  keyboardType: _configurations[0].keyboardType,
                  controller: _controller,
                  decoration: InputDecoration(
                    hintText:
                        'The keyboardType is ${_configurations[0].keyboardType.name}',
                  ),
                ),
              ],
            ),
          ),
          configurations: _configurations,
        ),
      ),
    );
  }

Full Demo

Full Demo