"<p>There may be times when you not only want to navigate to a new screen, but also pass data to that screen. An example of this would be if you wanted to pass information about an item that has been tapped. In such cases, it is important to remember that screens are simply widgets.</p> <p>You can use this knowledge to create a list of tabs, with each tab corresponding to a different screen (widget).When a particular tab is tapped, the associated screen will appear and display the requested information.</p> <p> This process uses the following steps:</p> <ol> <li>Define a Task class ✔️ (<a href="https://devbrains.tn/tutorials/create-a-model-class">Learn more</a>)</li> <li>Display a list of Todo Tasks ✔️ (<a href="https://devbrains.tn/tutorials/create-list-interface">Learn more</a>)</li> <li>Create a custom widget (screen) that can display a specific list of Tasks ✔️ (<a href="https://devbrains.tn/tutorials/nested-list-view">Learn more</a>)</li> <li>Navigate and pass data to the custom widget</li> </ol> <h3><strong>How to navigate and pass data to the custom widget ?</strong></h3> <p>With a <code>ListTasksByTabWidget </code>in place, you’re ready to perform the Navigation. In this example, navigate to the <code>ListTasksByTabWidget </code>when a user taps a tab. Pass the tabKey to our custom widget.</p> <p>This is our ListTasksByTabWidget :</p> <pre> <code>import 'package:provider/provider.dart'; import 'package:todo/provider/TaskModel.dart'; import 'package:flutter/material.dart'; class ListTasksByTabWidget extends StatelessWidget { final String tabKey; const ListTasksByTabWidget({Key? key,required this.tabKey}) : super(key: key); @override Widget build(BuildContext context) { return Consumer<TaskModel>( builder: (context, model, child) { return Padding( padding: const EdgeInsets.all(8.0), child: ListView.builder( itemCount:model.todoTasks[tabKey]!.length, itemBuilder: (BuildContext context, int index) { return Padding( padding: const EdgeInsets.only(top:8.0), child: Container( decoration: BoxDecoration( color: Color(0xFFE2E2E2), border: Border.all( color: Color(0xFFE2E2E2), ), borderRadius: BorderRadius.circular(10) ), child: ListTile( contentPadding: EdgeInsets.zero, title: Text(model.todoTasks[tabKey]![index].title), subtitle: Text(model.todoTasks[tabKey]![index].deadline.toString()), leading: Checkbox( value: model.todoTasks[tabKey]![index].status, onChanged: (bool? value) { model.markAsDone(tabKey,index); print(model.todoTasks[tabKey]![index].status); }, ), ), ), ); }, ), ); } ); } } </code></pre> <p>Now before we test, we need to make sure that we have passed the required parameter tabKey. This key will be used to filter the tasks stored in our todos Map in our TaskModel (provider).</p> <p>Here is the full code of our view where we created our Tabs and passed the parameter tabKey to our custom widget :</p> <pre> <code>import 'package:flutter/material.dart'; import 'package:todo/widget/ListTasksByTabWidget.dart'; import 'package:todo/library/globals.dart' as globals; import '../widget/ListAllTasksWidget.dart'; class ListTasksView extends StatefulWidget { const ListTasksView({Key? key}) : super(key: key); @override _ListTasksViewState createState() => _ListTasksViewState(); } class _ListTasksViewState extends State<ListTasksView> { @override Widget build(BuildContext context) { return DefaultTabController( length: 5, child: Scaffold( appBar: AppBar( title: Text("List Tasks"), bottom: const TabBar( isScrollable: true, tabs: [ Tab(text:"All"), Tab(text:"Today"), Tab(text:"Tomorrow"), Tab(text:"This Week"), Tab(text:"Next Week"), ], ), ), body: const TabBarView( children: [ ListAllTasksWidget(), ListTasksByTabWidget(tabKey: globals.today), ListTasksByTabWidget(tabKey: globals.tomorrow), ListTasksByTabWidget(tabKey: globals.thisWeek), ListTasksByTabWidget(tabKey: globals.nextWeek), ], ), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () { Navigator.pushNamed(context, 'addTask'); }, ), ), ); } }</code> </pre> <p>If you would like to see the full code, here is the link for the GitHub repository: <a href="https://github.com/HoussemTN/devbrains-todo">https://github.com/HoussemTN/devbrains-todo</a> </p>"