Autocomplete

Hjälp användaren med inmatningen genom att visa förslag.

Installera paketet enligt instruktionerna.

import 'package:flutter_typeahead/flutter_typeahead.dart';

Skapa en TextEditingController i din State-klass för att kunna ändra texten i inmatningsfältet till det som användaren väljer i listan.

TextEditingController controller = TextEditingController();

Placera denna widget i koden i stället för den vanliga TextField:

TypeAheadField(
  textFieldConfiguration: TextFieldConfiguration(
    controller: controller,
    decoration: InputDecoration(
      hintText: 'Skriv din söktext')),
  suggestionsCallback: (query) {
    return matchSuggestions(query);
  },
  itemBuilder: (context, suggestion) {
    return ListTile(title: Text(suggestion));
  },
  onSuggestionSelected: (suggestion) {
    controller.text = suggestion;
    search(suggestion);
  })

Dags att skriva de tre metoderna matchSuggestions (söka igenom datat för att hitta förslag som matchar det användaren skrivit), itemBuilder (användargränssnittet för listan som visar förslagen) och search för att göra något med det som användaren valt.

matchSuggestions får en String med det som användaren har skrivit och förväntas returnera en lista med strängar som ska visas som förslag.

Lämna ett svar

Stäng meny