OnTap Function in the DropDownMenu Button in Flutter

Question

I've tried to populate the dropdown menu button with the data from the SQLite database. Then on the onTap Function I wanted to navigate to the selected category.

When I tap on the category it does not navigate.

I have saved each category with an id in the database which is used the identify the selected item. Here is the code:

'''

class _HomeState extends State<Home> {

  TodoService _todoService;
  var _selectedValue;

  var _categories = List<DropdownMenuItem>();

  List<Todo>_todoList=List<Todo>();

@override
  initState(){
    super.initState();
_loadCategories();

  }

_loadCategories() async {
    var _categoryService = CategoryService();
    var categories = await _categoryService.readCategory();
    categories.forEach((category) {
      setState(() {
        _categories.add(DropdownMenuItem(
          child: Text(category['name']),
          value: category['name'],
          onTap: ()=>Navigator.of(context).push(MaterialPageRoute(builder:(context)=>TodosByCategory(category: category['name'],))),
        ));
      });
    });
  }

@override
  Widget build(BuildContext context) {
    return Scaffold(
      key: _globalKey,
      appBar: AppBar(
        actions: <Widget>[
          DropdownButtonHideUnderline(
            child: DropdownButton(
              value: _selectedValue,
              items: _categories,
              dropdownColor: Colors.blue,
              style: TextStyle(color: Colors.white,fontSize: 16.0),
              iconDisabledColor: Colors.white,
              iconEnabledColor: Colors.white,
              onChanged: (value) {
                setState(() {
                  _selectedValue = value;
                });
              },
            ),
          ),

'''

Here is the todosByCategory():

'''

class _TodosByCategoryState extends State<TodosByCategory> {

  List<Todo>_todoList=List<Todo>();

  TodoService _todoService=TodoService();

  @override
  initState(){
    super.initState();
    getTodosByCategories();
  }

  getTodosByCategories()async{
    var todos=await _todoService.readTodoByCategory(this.widget.category);
    todos.forEach((todo){
      setState(() {
        var model= Todo();
        model.title=todo['title'];
        model.dueDate=todo['dueDate'];

        _todoList.add(model);

      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos By Category'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: ListView.builder(
              itemCount: _todoList.length,
              itemBuilder: (context, index){
              return Padding(
                padding: EdgeInsets.only(top:8.0, left: 8.0, right: 8.0),
                child: Card(
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(0),
                  ),
                  elevation: 8.0,
                  child: ListTile(
                    title: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Text(_todoList[index].title)
                      ],
                    ),
                    subtitle: Text(_todoList[index].dueDate),
//                    trailing: Text(_todoList[index].dueDate),
                  ),
                ),
              );
            },),
          )
        ],
      ),
    );
  }
}

''' Please help me out.

Answer 1

Instead of writing the navigation code inside onTap of DropdownMenuItem, you can write it inside onChanged of DropdownButton where you are also getting the category name string as the value. It should work then.