overlay_keeb 0.0.1
overlay_keeb: ^0.0.1 copied to clipboard
Flutter plugin that enables custom overlay keyboards on Android and iOS
Overlay Keeb Flutter Plugin #
A Flutter plugin that allows you to display a custom Flutter widget as an overlay, typically appearing above the keyboard, similar to WhatsApp's attachment menu. This plugin currently supports Android.
Features #
- Custom Flutter UI Overlay: Display any Flutter widget content (defined within the plugin's secondary Dart entrypoint) in a native overlay window.
- Above Keyboard Presentation: Designed to appear above the soft keyboard without dismissing it.
- Configurable Height: The height of the overlay adjust wrt to height keyboard height.
- Slide Animations: Smooth slide-in and slide-out animations for the overlay window (configurable via native Android animations).
Screenshots #
-
Add this to your package's
pubspec.yaml
file:dependencies: overlay_keeb: ^0.0.1 # Replace with the latest version
-
Install packages from the command line:
flutter pub get
Basic Usage #
Import the plugin:
import 'package:flutter/material.dart';
import 'dart:developer' as developer;
@pragma('vm:entry-point')
void overlayMain() {
developer.log('--- OVERLAY_UI.DART: overlayMain() STARTED ---', name: 'MyOverlayDartLog');
try {
runApp(const OverlayApp()); // Your custom overlay app
developer.log('--- OVERLAY_UI.DART: runApp() CALLED SUCCESSFULLY ---', name: 'MyOverlayDartLog');
} catch (e, stackTrace) {
developer.log('--- OVERLAY_UI.DART: EXCEPTION ---', name: 'MyOverlayDartLog', error: e, stackTrace: stackTrace);
}
}
class OverlayApp extends StatelessWidget {
const OverlayApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: OverlayContent(), // Your main overlay widget
);
}
}
class OverlayContent extends StatelessWidget {
const OverlayContent({super.key});
@override
Widget build(BuildContext context) {
// Build your custom UI here
return Container(
color: Colors.grey[200], // Example background for the overlay panel
child: Center(
child: Text("My Custom Overlay UI!"),
// Example: Add your Rows, Columns, Buttons for an item picker
),
);
}
}
Sample Usage #
final _overlayKeeb = OverlayKeeb();
bool _nativeOverlayVisible = false;
@override
void initState() {
super.initState();
// Register the overlay UI
_overlayKeeb.registerOverlayUi(
entrypointFunctionName: 'overlayMain',
entrypointLibraryPath: 'package:your_app_name/overlay_ui.dart',
);
}
Future<void> _showActualNativeOverlay() async {
await _overlayKeeb.showOverlay();
setState(() => _nativeOverlayVisible = true);
}
Future<void> _hideNativeOverlay() async {
await _overlayKeeb.hideOverlay();
setState(() => _nativeOverlayVisible = false);
}
Platform Support #
Currently, this plugin supports Android. iOS support is planned for future releases.
Contributing #
Contributions are welcome! If you have suggestions for improvements or new features, please open an issue or submit a pull request.
License #
This project is licensed under the MIT License - see the LICENSE file for details.