Bonjour !
Je me prends la tête depuis hier pour crée un champ tag qui permet d’utiliser l’auto-complete et d’ajouter un nouveau tag s’il n’est pas présent :
import 'package:autocomplete_textfield/autocomplete_textfield.dart';
import 'package:blindtest_web_plateform/generated/l10n.dart';
import 'package:blindtest_web_plateform/page/music_page.dart';
import 'package:flutter/material.dart';
class TagsWidget extends StatefulWidget {
final IMusicViewModel viewModel;
const TagsWidget({Key? key, required this.viewModel}) : super(key: key);
@override
State<TagsWidget> createState() => _TagsWidgetState();
}
class _TagsWidgetState extends State<TagsWidget> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
final TextEditingController _tagEditingController = TextEditingController();
final GlobalKey<AutoCompleteTextFieldState<String>>
_autoCompleteTextFieldKey = GlobalKey();
final FocusNode _tagFocusNode = FocusNode();
List<String> _selectedTags = [];
Future<List<String>> _getSuggestions(String query) async {
final List<String> tags = await widget.viewModel.getAllTagsVM();
List<String> listTreatment =
tags.where((tag) => tag.startsWith(query)).toList();
print(listTreatment);
return listTreatment;
}
void _addTag(String tag) {
setState(() {
_selectedTags.add(tag);
_tagEditingController.clear();
});
}
void _removeTag(String tag) {
setState(() {
_selectedTags.remove(tag);
});
}
// bool _itemFilter(String item, String query) {
// print("$item / $query");
// print(item.toLowerCase().startsWith(query.toLowerCase()));
// return item.toLowerCase().startsWith(query.toLowerCase());
// }
bool _itemFilter(String item, String query) {
print("$item / $query");
if (query == null || query.isEmpty) {
return false;
}
return item.toLowerCase().startsWith(query.toLowerCase());
}
@override
Widget build(BuildContext context) {
return Form(
key: _formKey,
child: Column(
children: [
AutoCompleteTextField<String>(
key: _autoCompleteTextFieldKey,
controller: _tagEditingController,
focusNode: _tagFocusNode,
suggestions: [],
decoration: InputDecoration(
hintText: S.of(context).tag,
suffixIcon: IconButton(
icon: const Icon(Icons.add),
onPressed: () {
_addTag(_tagEditingController.text);
},
),
),
clearOnSubmit: false,
textSubmitted: (value) {
_addTag(value);
},
itemSubmitted: (tag) {
_addTag(tag);
},
itemBuilder: (context, String tag) {
print("truc");
return ListTile(title: Text(tag));
},
textChanged: (query) async {
return await _getSuggestions(query);
},
itemSorter: (a, b) => a.compareTo(b),
itemFilter: (String item, String query) => _itemFilter(item, query),
),
Wrap(
children: _selectedTags
.map(
(tag) => Chip(
label: Text(tag),
onDeleted: () {
_removeTag(tag);
},
),
)
.toList(),
),
],
),
);
}
}
Je récupère bien la liste des tags (via Directus API), je peux ajouter de nouveaux tags, mais les suggestions n’arrivent jamais, probablement parce que mon fonction « itemFilter » n’est jamais appelée ! Alors si quelqu’un a déjà fait ce genre de truc… qu’il soit béni !
Merci !