overlay_text_form_field

Description:

overlay text form field

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';
copied to clipboard
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,
);
copied to clipboard
Additional information #
Raise a PR to
contribute to the package, Go to Issues to file issues