Flutter – Search field

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];
                      });
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}