overlay_text_form_field 0.0.8 copy "overlay_text_form_field: ^0.0.8" to clipboard
overlay_text_form_field: ^0.0.8 copied to clipboard

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

2
likes
140
pub points
77%
popularity

Publisher

verified publishermominraza.dev

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

BSD-3-Clause (LICENSE)

Dependencies

flutter

More

Packages that depend on overlay_text_form_field