📱 keyboard_safe #

A lightweight Flutter widget that prevents keyboard overflow by automatically adjusting padding and optionally scrolling input fields into view.

✅ Why KeyboardSafe? #

Flutter apps often struggle with keyboard handling, especially in complex forms.
KeyboardSafe solves this with a single, configurable wrapper that offers:

• ✅ Automatically adjusts padding when the keyboard appears
• 🎯 Auto-scrolls to focused input fields
• 📌 Optional sticky footer support above the keyboard
• 👆 Tap outside to dismiss keyboard
• 📦 Optional SafeArea wrapping
• 🎬 Smooth animated transitions

🔧 Install it #

Add it to your pubspec.yaml:

dependencies:
  keyboard_safe: ^0.0.1

Then run:

flutter pub get

🔨 Usage #

Wrap your form or layout with KeyboardSafe:

import 'package:keyboard_safe/keyboard_safe.dart';

@override
Widget build(BuildContext context) {
  return KeyboardSafe(
    scroll: true,
    dismissOnTapOutside: true,
    footer: ElevatedButton(
      onPressed: () {},
      child: const Text('Submit'),
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: const [
        TextField(decoration: InputDecoration(labelText: 'Email')),
        SizedBox(height: 16),
        TextField(decoration: InputDecoration(labelText: 'Password')),
      ],
    ),
  );
}

Advanced Example #

import 'package:keyboard_safe/keyboard_safe.dart';

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('KeyboardSafe Advanced Example'),
    ),
    body: KeyboardSafe(
      scroll: true,
      autoScrollToFocused: true,
      dismissOnTapOutside: true,
      persistFooter: true,
      safeArea: true,
      padding: const EdgeInsets.all(24),
      keyboardAnimationDuration: const Duration(milliseconds: 300),
      keyboardAnimationCurve: Curves.easeInOut,
      onKeyboardChanged: (visible, height) {
        debugPrint('Keyboard is ${visible ? 'visible' : 'hidden'} ($height px)');
      },
      footer: Padding(
        padding: const EdgeInsets.symmetric(vertical: 16),
        child: ElevatedButton.icon(
          onPressed: () {
            KeyboardSafe.dismissKeyboard(context);
            ScaffoldMessenger.of(context).showSnackBar(
              const SnackBar(content: Text('Form submitted')),
            );
          },
          icon: const Icon(Icons.send),
          label: const Text('Submit'),
          style: ElevatedButton.styleFrom(
            backgroundColor: Theme.of(context).colorScheme.primary,
            foregroundColor: Colors.white,
            padding: const EdgeInsets.symmetric(vertical: 16),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(12),
            ),
          ),
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: const [
          TextField(
            decoration: InputDecoration(
              labelText: 'Full Name',
              hintText: 'Enter your name',
            ),
          ),
          SizedBox(height: 16),
          TextField(
            decoration: InputDecoration(
              labelText: 'Email',
              hintText: '[email protected]',
            ),
          ),
          SizedBox(height: 16),
          TextField(
            decoration: InputDecoration(
              labelText: 'Message',
              hintText: 'Type something...',
            ),
            maxLines: 4,
          ),
        ],
      ),
    ),
  );
}

📱 Example App #

The example/ app demonstrates the benefits of using KeyboardSafe:

✅ Includes a toggle for 'With' vs 'Without KeyboardSafe'
✅ Demonstrates auto-scroll to input, sticky footer, keyboard avoidance, and tap-outside dismissal

To run:

flutter run example

💡 If you use FVM, replace flutter with fvm flutter in the command above.

🎬 Demo #

Here's a quick demo of KeyboardSafe in action 👇

🧪 Try it on DartPad #

Want to test it live? Here's a minimal demo running in DartPad 👇

🧪 Run the DartPad demo locally #

To run the DartPad-compatible demo on your device/emulator:

# Make sure you're in the example/ folder
cd example

# Then run the custom demo entry point
flutter run -t lib/dartpad_demo.dart

💡 If you use FVM, replace flutter with fvm flutter in the command above.

📦 Parameters #

⌨️ Dismiss Keyboard #

You can programmatically dismiss the keyboard using:

KeyboardSafe.dismissKeyboard(context);

🧪 Testing #

This package includes widget tests that verify key behaviors:

flutter test

Covered features:

✅ Padding applied when MediaQuery.viewInsets.bottom is non-zero
✅ Keyboard dismissal when tapping outside of input

📄 License #

MIT License. See LICENSE for details.

💡 Contribute #

Feel free to file issues or submit PRs to help improve this package.
Star ⭐ the repo if you found this helpful!

💬 Maintainer #

Made by @ChathraNavoda