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(...)
)
);
dependencies:
mention_input: ^0.0.1
flutter pub add mention_input
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)
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
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)
String triggerAnnotation;
List<MentionData> data;
TextStyle? highlightStyle;
String id;
String display;
String? imageUrl;
Map<String, dynamic>? customData;
flutter_mentions: fayeed
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent