overlay_text_form_field 0.0.8

A Flutter package to add Overlay Text Form Field. It provides User Mentions and Tag Support.

A Flutter package to add Overlay Text Form Field.

Features

Overlay Text Form Field with Mention and Tags

Screenshots

Recording

https://github.com/MominRaza/assets/raw/main/overlay_text_form_field/recording-0.mp4

Getting started

import 'package:overlay_text_form_field/overlay_text_form_field.dart';

Note

Wrap your app with a Router widget to provide the necessary routing functionality. This allows the BackButtonListener to function correctly and handle back button press events within the overlay form field.

Usage

final controller = TextEditingController();

Widget overlayMentionBuilder(query, onOverlaySelect) {
return FirestoreListView(
    query:
        FirebaseFirestore.instance.collection('users').orderBy('userHandle'),
    loadingBuilder: (context) => const SizedBox(),
    itemBuilder: (context, snap) {
    final user = MyUser.fromJson(snap);
    return user.handle.toLowerCase().contains(query)
        ? ListTile(
            visualDensity: VisualDensity.compact,
            leading: MyUserAvatar(user.image),
            title: Text(user.name),
            subtitle: Text('@${user.handle}'),
            onTap: () => onOverlaySelect(user.handle),
            )
        : const SizedBox();
    },
);
}

Widget overlayTagBuilder(query, onOverlaySelect) {
return FirestoreListView(
    padding: EdgeInsets.zero,
    query: FirebaseFirestore.instance.collection('tags').orderBy('tag'),
    loadingBuilder: (context) => const SizedBox(),
    itemBuilder: (context, snap) {
    return snap.data()['tag'].toLowerCase().contains(query)
        ? ListTile(
            visualDensity: VisualDensity.compact,
            title: Text('#${snap.data()['tag']}'),
            onTap: () => onOverlaySelect(snap.data()['tag']),
            )
        : const SizedBox();
    },
);
}

OverlayTextFormField(
    controller: controller,
    overlayMentionBuilder: overlayMentionBuilder,
    overlayTagBuilder: overlayTagBuilder,
);

Additional information

Raise a PR to contribute to the package, Go to Issues to file issues