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.

Solution

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.

Comments

[Jigar Patel]

When you tap on a category and it does not navigate, do you see any error in the console? If so, what is it?

[Ruchita Bhaskar]

No, there is no error on the console.

[Ruchita Bhaskar]

-It does not work there because category is defined in _loadCategories

[Jigar Patel]

The value parameter which you get on onChanged is equal to the name of the category which you just tapped. So you can pass that to the next screen's constructor like this TodosByCategory(category: value)

[Ruchita Bhaskar]

Thanks! It worked, But did'nt get the category name at the top.