keyboard_sticky 0.2.0

A UI component can sticky widget on the top of soft keyboard.

A UI component allowing sticky widget on the top of soft keyboard.

Features

Only the soft keyboard is shown and the original widget is overlapped, the sticky widget will be shown.

If no soft keyboard or the original widget is not overlapped, the sticky widget will not be shown.

• Sticky a floating TextField and syncing the text with the original TextField example

  

• Sticky a custom widget and syncing the text with the original TextField example

  

• Sticky a TextField and syncing its text with the original non-TextField widget.example

  

• Sticky a search bar on the top of the keyboard and syncing the selected item with the original widget/TextField. example

  

Getting started

import 'package:keyboard_sticky/keyboard_sticky.dart';

Usage

### Only Single `TextField`

```dart
  /// A shortcut to create a [KeyboardSticky] that only shows one [TextField] either in the original or floating widget.
  ///
  /// if [floating] is true, [fieldBuilder] will be used to build a [TextField] used by [builder];
  /// otherwise, [fieldBuilder] will be used to build a [TextField] used by [floatingBuilder].
  ///
  /// The original widget built from [builder] will be shown when the keyboard is not visible.
  /// The floating widget built from [floatingBuilder] will be shown when the keyboard is visible and the original widget is not visible.
  ///
  /// [controller] would be bound with [fieldBuilder] if provided.
  ///
  /// [focusNode] would be bound with [fieldBuilder] if provided and [floating] is false.
  ///
  /// [floatingFocusNode] would be bound with [floatingBuilder] if provided and [floating] is true.
  ///
  /// Please be sure to use the given [FocusNode] in the [TextField] built from [fieldBuilder],
  /// so as to listen to the focus changes and then show/hide the floating widget automatically.
  /// Through this way, you do not need to manage the floating widget manually via [KeyboardStickyController].
  KeyboardSticky.single({
    super.key,
    FocusNode? focusNode,
    TextEditingController? controller,
    FocusNode? floatingFocusNode,
    bool floating = false,
    this.useMaterial = true,
    required KeyboardStickyWrapperBuilder builder,
    required KeyboardStickyWrapperBuilder floatingBuilder,
    required KeyboardStickyFieldBuilder fieldBuilder,
  });

Both TextField

  /// A shortcut to create a [KeyboardSticky] that shows two [TextField]s in both the original and floating widgets.
  ///
  /// If [floatingBuilder] is not provided, [builder] will also be used to build the floating widget.
  /// If [floatingFieldBuilder] is not provided, [fieldBuilder] will also be used to build the floating [TextField].
  ///
  /// The original/floating [TextField] should share the same [controller] so that they can share the same text value.
  /// Therefore, [controller] would be used by both [fieldBuilder] and [floatingFieldBuilder] if provided;
  /// otherwise, a default [TextEditingController] will be created for them.
  ///
  /// However, the two [TextField]s should have different [FocusNode]s so that they can be focused separately.
  /// Therefore, [focusNode] would be used by [fieldBuilder] if provided, while [floatingFocusNode] would be used by [floatingFieldBuilder] if provided.
  ///
  /// Please be sure to use the given [FocusNode] in the [TextField] built from [fieldBuilder]/[floatingFieldBuilder].
  KeyboardSticky.both({
    super.key,
    FocusNode? focusNode,
    TextEditingController? controller,
    FocusNode? floatingFocusNode,
    TextEditingController? floatingController,
    this.useMaterial = true,
    required KeyboardStickyWrapperBuilder builder,
    required KeyboardStickyFieldBuilder fieldBuilder,
    KeyboardStickyWrapperBuilder? floatingBuilder,
    KeyboardStickyFieldBuilder? floatingFieldBuilder,
  })

KeyboardStickyController

/// [KeyboardStickyController] is a mixin class that provides the ability to show/hide the floating widget manually.
abstract mixin class KeyboardStickyController {
  /// whether the original widget is visible
  bool get visible;

  /// the current height of the keyboard
  double get keyboardHeight;

  /// show the floating widget manually
  void showFloating();

  /// hide the floating widget manually
  void hideFloating();
}