在表单中使用 TypeAheadFormField - Flutter

Question

我在点击搜索者的建议后添加所选选项时遇到困难，（将所选选项添加到表单）。

当输入几个字母后显示选项时 我想按这个建议然后它应该出现在表格 , 我是 flutter 的新手，我不知道该怎么做，非常感谢任何可能的帮助。

也许还有其他选项可以做到这一点，在输入单词并单击搜索器图标后，将出现新容器

       void search(String query) {
      setState(() {
    pickedValues.add(query);
});
}

Widget _buildSearchBar() {
return Column(mainAxisSize: MainAxisSize.min, children: [
  ConstrainedBox(
    constraints: const BoxConstraints.tightFor(width: 350),
    child: TypeAheadField<Breed?>(
      // ask server after 500
      debounceDuration: Duration(milliseconds: 500),
      hideSuggestionsOnKeyboardHide: false,
      textFieldConfiguration: TextFieldConfiguration(
        controller: controller,
        // onFieldSubmitted: search,
        decoration: InputDecoration(
          labelText: 'Search',
          hintText: 'Search',
          fillColor: Colors.white,
          filled: true,
          isDense: true,
          suffixIcon: GestureDetector(
            onTap: () {
              controller.clear();
            },
            child: const Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 10,
                vertical: 10,
              ),
              child: Icon(
                Icons.clear,
                size: 30,
              ),
            ),
          ),
          prefixIcon: GestureDetector(
            onTap: () {
             search(controller.text) ;
            },

            /// widget isntead of normal button
            // cancellationWidget: Text("Cancel"),
            child: const Padding(
              padding: EdgeInsets.symmetric(
                horizontal: 10,
                vertical: 10,
              ),
              child: Icon(
                Icons.search_outlined,
                size: 30,
              ),
            ),
          ),
          focusedBorder: const OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(30),
            ),
            borderSide: BorderSide(
              width: 2,
              color: Colors.teal,
            ),
          ),
          disabledBorder: InputBorder.none,
          border: InputBorder.none,
          enabledBorder: const OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(30),
            ),
            borderSide: BorderSide(
              width: 2,
              color: Colors.grey,
            ),
          ),
          errorBorder: const OutlineInputBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(5),
            ),
            borderSide: BorderSide(
              width: 2,
              color: Colors.red,
            ),
          ),
        ),
      ),
      suggestionsCallback: BreedApi.getBreedSuggestions,
      itemBuilder: (context, Breed? suggestion) {
        final breed = suggestion!;
        return ListTile(
          title: Text(breed.name),
        );
      },
      noItemsFoundBuilder: (context) => Container(
        height: 100,
        child: Center(
          child: Text(
            'No Breed Found.',
            style: TextStyle(fontSize: 24),
          ),
        ),
      ),
      onSuggestionSelected: (Breed? suggestion) {
        final breed = suggestion!;

        ScaffoldMessenger.of(context)
          ..removeCurrentSnackBar()
          ..showSnackBar(SnackBar(
            content: Text('Selected breed: ${breed.name}'),
          ));
      },
    ),
  )
]);
}

api 品种的一部分：

class Breed {
 final String name;

const Breed({
  required this.name,
});

static Breed fromJson(Map<String, dynamic> json) => Breed(
  name: json['name'],
);
}

class BreedApi {
  static Future<List<Breed>> getBreedSuggestions(String query) async {
final url = Uri.parse('https://api.thedogapi.com/v1/breeds');
final response = await http.get(url);

if (response.statusCode == 200) {
  final List breeds = json.decode(response.body);

  return breeds.map((json) => Breed.fromJson(json)).where((breed) {
    final nameLower = breed.name.toLowerCase();
    final queryLower = query.toLowerCase();

    return nameLower.contains(queryLower);
  }).toList();
} else {
  throw Exception();
  }
   }
    }

Answer 1

在 suggestionsCallback 函数中使用 ListTile 的 onTap 方法，并将选定的名称发送到新屏幕或仅将其发送到使用命名参数的函数。

suggestionsCallback: BreedApi.getBreedSuggestions,
  itemBuilder: (context, Breed? suggestion) {
    final breed = suggestion!;
    return ListTile(
      onTap:(){
              ScreenName(name: breed.name) or FunctionName(breed.name);
              }
      title: Text(breed.name),
    );
  },

在表单中使用 TypeAheadFormField - Flutter

Use the TypeAheadFormField inside a Form - Flutter

dart

flutter

flutter-dependencies

flutter-layout

flutter-animation