mention_input

Description:

mention input

Mention Input #

Summary: Flutter mention input widget that has several custom properties. Inspired by flutter_mentions of fayeed.
Note: This package also expose flutter_portal so you do not need install this package in your project -> Need wrap Portal widget in which you use mention_input.
For example:
MaterialApp(
title: 'Flutter Demo',
home: Portal(
...
child: MentionInput(...)
)
);
copied to clipboard
How to install #

1. pubspec.yaml #
dependencies:
mention_input: ^0.0.1
copied to clipboard
2. Flutter CLI #
flutter pub add mention_input
copied to clipboard
Properties #

Common Properties #



Property
Description
Data Type
Default Value
Required?




mentions
List mention which each mention has its annotation and mention data
List<Mention>

*


controller
Methods for controlling mention_input
MentionInputController

*



Suggestion Container Properties #



Property
Description
Data Type
Default Value
Required?




suggestionContainerColor
Color of Suggestion Container
Color
Colors.amber



suggestionContainerPadding
Padding of Suggestion Container
EdgeInsetsGeometry
EdgeInsets.all(16)



suggestionContainerMargin
Margin of Suggestion Container
EdgeInsetsGeometry
EdgeInsets.symmetric(vertical: 16)



suggestionContainerDecoration
Decoration of Suggestion Container
Decoration




suggestionAlignment
Alignment of Suggestion Container relative to Input
SuggestionAlignment
SuggestionAlignment.top



suggestionContainerBorderRadius
Border radius of Suggestion Container
BorderRadius
BorderRadius.circular(12)




Suggestion Item Properties #



Property
Description
Data Type
Default Value
Required?




itemHeight
Height of Suggestion Item
double
40.0



dividerBetweenItem
Should have divider between items
bool
true



itemBuilder
Custom item builder
Widget Function(int index, MentionData data)





Text Field Properties #



Property
Description
Data Type
Default Value
Required?




placeHolder
Place holder of Text Field
String




autoFocus
Auto focus of Text Field
bool
true



clearTextAfterSent
Should clear text after sent
bool
true



leftInputMargin
Left margin of Text Field
double
8.0



rightInputMargin
Right margin of Text Field
double
8.0



leftWidgets
Left widgets relative to Text Field
List<Widget>




rightWidgets
Right widgets relative to Text Field
List<Widget>




shouldHideLeftWidgets
Should hide left widgets
bool
false



shouldHideRightWidgets
Should hide right widgets
bool
false



onChanged
onChange handler of text field
Function(String value)




cursorColor
Cursor Color
Color




keyboardType
Keyboard Type
TextInputType




minLines
Min number of lines
int




maxLines
Max number of lines
int




maxLength
Max number of characters
int




style
Style of Text Field
TextStyle




textAlign
Text Align
TextAlign




textAlignVertical
Text align vertical
TextAlignVertical




textCapitalization
Text capitalization
TextCapitalization




textDirection
Text direction
TextDirection





Text Field Container Properties #



Property
Description
Data Type
Default Value
Required?




textFieldContainerPadding
Padding of Input Container
EdgeInsetsGeometry
EdgeInsets.all(16)



textFieldContainerColor
Color of Input Container
Color
Colors.white



textFieldContainerBorderRadius
Border radius of Input Container
BorderRadius
BorderRadius.circular(16)



textFieldContainerDecoration
Decoration of Input Container
Decoration





Send Button Properties #



Property
Description
Data Type
Default Value
Required?




onSend
onSend method
Function




hasSendButton
Should have send button
bool
true



sendIcon
Custom send icon widget
Widget
Icon(Icons.send)




Models #

Mention #
String triggerAnnotation;
List<MentionData> data;
TextStyle? highlightStyle;
copied to clipboard
Mention Data #
String id;
String display;
String? imageUrl;
Map<String, dynamic>? customData;
copied to clipboard
References #

flutter_mentions: fayeed