flutter_mentions 1.0.1 flutter_mentions: ^1.0.1 copied to clipboard
A simple flutter input widget to add @ mentions functionality to your app.
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_mentions/flutter_mentions.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
builder: (_, child) => Portal(child: child),
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
GlobalKey<FlutterMentionsState> key = GlobalKey<FlutterMentionsState>();
List<Map<String, String>> users = <Map<String, String>>[];
@override
void initState() {
key.currentState?.controller?.addListener(() {
print(key.currentState?.controller?.text);
});
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
RaisedButton(
child: Text('Get Text'),
onPressed: () {
print(key.currentState.controller.markupText);
},
),
Container(
padding: EdgeInsets.only(bottom: 40.0),
width: MediaQuery.of(context).size.width,
height: 120.0,
child: FlutterMentions(
key: key,
decoration: InputDecoration(hintText: 'Enter here...'),
suggestionPosition: SuggestionPosition.Top,
hideSuggestionList: true,
onEditingComplete: () {
key.currentState.controller.clear();
// key.currentState.controller.text = '';
},
onSearchChanged: (trigger, search) {
if (trigger == '@' && search == 'a') {
Timer(Duration(seconds: 2), () {
final _users = users.where((element) {
final ele = element['display'].toLowerCase();
final str =
search.toLowerCase().replaceAll(RegExp("@"), '');
return ele == str ? false : ele.contains(str);
}).toList();
print(_users);
setState(() {
users = _users;
});
});
}
},
mentions: [
Mention(
trigger: '@',
style: TextStyle(
color: Colors.amber,
),
markupBuilder: (trigger, mention, value) {
return '${trigger}__${mention}__${value}';
},
data: [...users],
matchAll: false,
suggestionBuilder: (data) {
return Container(
color: Colors.white,
padding: EdgeInsets.all(10.0),
child: Row(
children: <Widget>[
CircleAvatar(
backgroundImage: NetworkImage(
data['photo'],
),
),
SizedBox(
width: 20.0,
),
Column(
children: <Widget>[
Text(data['full_name']),
Text('@${data['display']}'),
],
)
],
),
);
}),
Mention(
trigger: '#',
disableMarkup: true,
style: TextStyle(
color: Colors.blue,
),
data: [
{'id': 'reactjs', 'display': 'reactjs'},
{'id': 'javascript', 'display': 'javascript'},
],
matchAll: true,
)
],
),
),
],
),
);
}
}