To implement an input widget with @ mention functionality in Flutter, you can use a TextField
widget and listen to the TextEditingController
for changes. You can then parse the text and check if an @ symbol is followed by any characters, and if so, display a list of suggestions to the user.
Here’s an example implementation:
import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
TextEditingController _controller;
final List<String> _suggestions = ['John', 'Jane', 'Jim', 'Jill'];
String _mention;
List<String> _filteredSuggestions;
@override
void initState() {
super.initState();
_controller = TextEditingController();
_controller.addListener(() {
setState(() {
final text = _controller.text;
final index = text.lastIndexOf('@');
if (index >= 0 && index < text.length - 1) {
final mention = text.substring(index + 1);
if (mention != _mention) {
_mention = mention;
_filteredSuggestions = _suggestions
.where((name) => name.startsWith(_mention))
.toList();
}
} else {
_mention = null;
_filteredSuggestions = null;
}
});
});
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Column(
children: [
TextField(
controller: _controller,
decoration: InputDecoration(hintText: 'Enter text with @ mentions'),
),
if (_mention != null)
Expanded(
child: ListView.builder(
itemCount: _filteredSuggestions.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(_filteredSuggestions[index]),
onTap: () {
final mention = _filteredSuggestions[index];
final text = _controller.text;
final index = text.lastIndexOf('@');
_controller.value = TextEditingValue(
text: text.substring(0, index + 1) + mention,
selection: TextSelection.collapsed(
offset: text.length,
),
);
},
);
},
),
),
],
),
),
);
}
}
In this example, the TextEditingController
is used to listen for changes to the text in the TextField
, and the suggestions are filtered based on the entered text. The filtered suggestions are displayed in a ListView
below the TextField
.