flutter - Show widget when keyboard is shown while keeping textfield position. Or overlay widget on keyboard (not above keyboard

admin管理员组

文章数量:1377676

I’m working on a Flutter app and trying to show a widget when the keyboard appears while ensuring that the TextField stays fixed in its position.

I want to show widget when keyboard is shown while keeping textfield position like this (zalo app):

Or I want widget overlay keyboard like this:

I want when I tap a button, it will show a widget while screen not resize and the textfield keep its position.

I’m working on a Flutter app and trying to show a widget when the keyboard appears while ensuring that the TextField stays fixed in its position.

I want to show widget when keyboard is shown while keeping textfield position like this (zalo app):

Or I want widget overlay keyboard like this:

I want when I tap a button, it will show a widget while screen not resize and the textfield keep its position.

• flutter

Share Improve this question Follow edited Mar 19 at 6:46 DarkBee 15.5k88 gold badges7272 silver badges117117 bronze badges asked Mar 19 at 0:25 Dương Nguyễn Thị NgọcDương Nguyễn Thị Ngọc 1933 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default -1

Try this code which will show an overlay when longPressed on ListTile and will hide the overlay when tap outside

class OverlayDemo extends StatefulWidget {
  const OverlayDemo({super.key});

  @override
  State<OverlayDemo > createState() => _OverlayDemoState();
}

class _OverlayDemoState extends State<OverlayDemo > {
  OverlayEntry? _overlayEntry;

  void showOverlay(BuildContext context, Offset position, int index) {
    hideOverlay();

    _overlayEntry = OverlayEntry(
      builder:
          (context) => SizedBox(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            child: Stack(
              children: [
                ModalBarrier(onDismiss: hideOverlay),

                Positioned(
                  left: position.dx,
                  top: position.dy,
                  child: Material(
                    color: Colors.transparent,
                    child: GestureDetector(
                      onTap: hideOverlay,
                      child: Container(
                        padding: EdgeInsets.all(8),
                        decoration: BoxDecoration(
                          color: Colors.black87,
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Text(
                          "Item $index Options",
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
    );

    Overlay.of(context).insert(_overlayEntry!);
  }

  void hideOverlay() {
    _overlayEntry?.remove();
    _overlayEntry = null;
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: 10,
      itemBuilder: (_, index) {
        return GestureDetector(
          onLongPressStart:
              (details) => showOverlay(context, details.globalPosition, index),
          child: ListTile(title: Text("Item $index")),
        );
      },
    );
  }
}

if you want to learn more about overlay checkout this blog https://www.flutteris/blog/fr/astuce-6-calque-suite-a-un-longpress-dans-un-scroll-container

本文标签：