I have an app that has a dropdownbutton and a TypeAheadField. I want the TypeAheadField to filter suggestions based on the selection from the dropdownbutton. This works fine when a selection is made in the typeaheadfield, however when no selection is made from the typeaheadfield and the dropdownbutton value changes then the list of suggestions remains the same (based on the old drop down value.)

How can I trigger a rebuild of the suggestion list when no suggestion is chosen and the dropdown value changes?

this is a pic of the app

enter image description here

Sample of my data map:

Map<String, List?> mamimals = { "Amphibian": ["Edible Bullfrog", "Fornasini's Spiny Reed Frog", "Grey Foam-nest Tree Frog", "Mozambique Forest Tree Frog", "Müller's Platanna"],

"Bird": ["African Black Duck", "African Crested Flycatcher", "African Cuckoo",

Code:

import 'package:flutter/material.dart';
import 'cat_animal.dart';
import 'package:flutter_typeahead/flutter_typeahead.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: InputAndPicturePicker(),
    );
  }
}

class InputAndPicturePicker extends StatefulWidget {
  const InputAndPicturePicker({super.key});
  @override
  InputAndPicturePickerState createState() => InputAndPicturePickerState();
}

class InputAndPicturePickerState extends State<InputAndPicturePicker> {
  final TextEditingController _controller = TextEditingController();

  String? selectedCategory;
  String? selectedItem;
  List<String> items = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Dependent Dropdowns')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // First Dropdown (Category Selection)
            Text("Select Category"),
            DropdownButton<String>(
              value: selectedCategory,
              hint: Text("Choose a category"),
              isExpanded: true,
              items: mamimals.keys.map((String category) {
                return DropdownMenuItem<String>(
                  value: category,
                  child: Text(category),
                );
              }).toList(),
              onChanged: (value) {
                setState(() {
                  _controller.text = "";
                  selectedCategory = value;
                  print(selectedCategory);
                });
              },
            ),
            SizedBox(height: 20),
          TypeAheadField<String>(
          //direction: settings.direction.value,
            controller: _controller,
            builder: (context, controller, focusNode) => TextField(
            controller: controller,
            focusNode: focusNode,
            autofocus: true,
            style: DefaultTextStyle.of(context)
                .style
                .copyWith(fontStyle: FontStyle.italic),
              decoration: InputDecoration(
                border: const OutlineInputBorder(),
                hintText: 'search',
              ),
            ),
              suggestionsCallback: (pattern) {
                return mamimals[selectedCategory]
                    ?.where((item) => item.toLowerCase().contains(pattern.toLowerCase()))
                    .toList();
              },
              itemBuilder: (context, suggestion) {
                return ListTile(title: Text(suggestion));
              },
              onSelected: (suggestion) {
                _controller.text = suggestion;
              },
              ),
          ],
        ),
      ),
    );
  }
}



thanks for any advice