A custom made search field with selectable search suggestions.
import 'package:flutter/material.dart';
class Searching extends StatefulWidget {
@override
_SearchingState createState() => _SearchingState();
}
class _SearchingState extends State<Searching> {
TextEditingController editingController = TextEditingController();
final _items = List<String>.generate(100, (i) => "Søgetekst $i");
List<String> _itemsSuggestions = [];
void searchResults(String query) {
setState(() {
_itemsSuggestions = _items
.where((data) => data.toLowerCase().contains(query.toLowerCase()))
.toList();
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Søgning'),
),
body: Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: TextField(
onChanged: (value) => searchResults(value),
onSubmitted: (value) {
setState(() {
_itemsSuggestions = [];
});
print(value);
},
controller: editingController,
decoration: InputDecoration(
isDense: true,
labelText: "Søg efter varer",
hintText: "Varenavn",
prefixIcon: IconButton(
icon: Icon(Icons.arrow_back),
onPressed: () {},
),
suffixIcon: IconButton(
icon: Icon(Icons.clear),
onPressed: () {
setState(() {
editingController.text = '';
});
}),
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
),
),
),
),
Expanded(
child: ListView.builder(
itemCount: _itemsSuggestions.length,
itemBuilder: (context, index) {
return ListTile(
dense: true,
leading: Icon(Icons.search, color: Colors.grey,),
title: Text(
'${_itemsSuggestions[index]}',
style: TextStyle(
color: Colors.grey,
fontSize: 16,
),),
onTap: () {
setState(() {
editingController.text = _itemsSuggestions[index];
});
},
);
},
),
),
],
),
),
);
}
}

