Often, you not only want to navigate to a new screen, but also pass data to the screen as well. For example, you might want to pass information about the item that's been tapped.

Remember: Screens are just widgets. In this example, create a list of todos. When a todo is tapped, navigate to a new screen (widget) that displays information about the todo. This recipe uses the following steps:

1. Define a todo class.
2. Display a list of todos.
3. Create a detail screen that can display information about a todo.
4. Navigate and pass data to the detail screen.

First, you need a simple way to represent todos. For this example, create a class that contains two pieces of data: the title and description.

classTodo{finalStringtitle;finalStringdescription;​constTodo(this.title,this.description);}

Second, display a list of todos. In this example, generate 20 todos and show them using a ListView. For more information on working with lists, see theUse lists recipe.

finaltodos=List.generate(20,(i)=>Todo('Todo$i','A description of what needs to be done for Todo$i',),);

ListView.builder(itemCount:todos.length,itemBuilder:(context,index){returnListTile(title:Text(todos[index].title));},)

So far, so good. This generates 20 todos and displays them in a ListView.

For this, we create aStatelessWidget. We call itTodosScreen. Since the contents of this page won't change during runtime, we'll have to require the list of todos within the scope of this widget.

We pass in ourListView.builder as body of the widget we're returning tobuild(). This'll render the list on to the screen for you to get going!

classTodosScreenextendsStatelessWidget{// Requiring the list of todos.constTodosScreen({super.key,requiredthis.todos});​finalList<Todo>todos;​@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText('Todos')),//passing in the ListView.builderbody:ListView.builder(itemCount:todos.length,itemBuilder:(context,index){returnListTile(title:Text(todos[index].title));},),);}}

With Flutter's default styling, you're good to go without sweating about things that you'd like to do later on!

Now, create the second screen. The title of the screen contains the title of the todo, and the body of the screen shows the description.

Since the detail screen is a normalStatelessWidget, require the user to enter aTodo in the UI. Then, build the UI using the given todo.

classDetailScreenextendsStatelessWidget{// In the constructor, require a Todo.constDetailScreen({super.key,requiredthis.todo});​// Declare a field that holds the Todo.finalTodotodo;​@overrideWidgetbuild(BuildContextcontext){// Use the Todo to create the UI.returnScaffold(appBar:AppBar(title:Text(todo.title)),body:Padding(padding:constEdgeInsets.all(16),child:Text(todo.description),),);}}

With aDetailScreen in place, you're ready to perform the Navigation. In this example, navigate to theDetailScreen when a user taps a todo in the list. Pass the todo to theDetailScreen.

To capture the user's tap in theTodosScreen, write anonTap() callback for theListTile widget. Within theonTap() callback, use theNavigator.push() method.

body:ListView.builder(itemCount:todos.length,itemBuilder:(context,index){returnListTile(title:Text(todos[index].title),// When a user taps the ListTile, navigate to the DetailScreen.// Notice that you're not only creating a DetailScreen, you're// also passing the current todo through to it.onTap:(){Navigator.push(context,MaterialPageRoute<void>(builder:(context)=>DetailScreen(todo:todos[index]),),);},);},),

import 'package:flutter/material.dart';class Todo {  final String title;  final String description;  const Todo(this.title, this.description);}void main() {  runApp(    MaterialApp(      title: 'Passing Data',      home: TodosScreen(        todos: List.generate(          20,          (i) => Todo(            'Todo $i',            'A description of what needs to be done for Todo $i',          ),        ),      ),    ),  );}class TodosScreen extends StatelessWidget {  const TodosScreen({super.key, required this.todos});  final List<Todo> todos;  @override  Widget build(BuildContext context) {    return Scaffold(      appBar: AppBar(title: const Text('Todos')),      body: ListView.builder(        itemCount: todos.length,        itemBuilder: (context, index) {          return ListTile(            title: Text(todos[index].title),            // When a user taps the ListTile, navigate to the DetailScreen.            // Notice that you're not only creating a DetailScreen, you're            // also passing the current todo through to it.            onTap: () {              Navigator.push(                context,                MaterialPageRoute<void>(                  builder: (context) => DetailScreen(todo: todos[index]),                ),              );            },          );        },      ),    );  }}class DetailScreen extends StatelessWidget {  // In the constructor, require a Todo.  const DetailScreen({super.key, required this.todo});  // Declare a field that holds the Todo.  final Todo todo;  @override  Widget build(BuildContext context) {    // Use the Todo to create the UI.    return Scaffold(      appBar: AppBar(title: Text(todo.title)),      body: Padding(        padding: const EdgeInsets.all(16),        child: Text(todo.description),      ),    );  }}

Repeat the first two steps.

Next, create a detail screen that extracts and displays the title and description from theTodo. To access theTodo, use theModalRoute.of() method. This method returns the current route with the arguments.

classDetailScreenextendsStatelessWidget{constDetailScreen({super.key});​@overrideWidgetbuild(BuildContextcontext){finaltodo=ModalRoute.of(context)!.settings.argumentsasTodo;​// Use the Todo to create the UI.returnScaffold(appBar:AppBar(title:Text(todo.title)),body:Padding(padding:constEdgeInsets.all(16),child:Text(todo.description),),);}}

Finally, navigate to theDetailScreen when a user taps aListTile widget usingNavigator.push(). Pass the arguments as part of theRouteSettings. TheDetailScreen extracts these arguments.

ListView.builder(itemCount:todos.length,itemBuilder:(context,index){returnListTile(title:Text(todos[index].title),// When a user taps the ListTile, navigate to the DetailScreen.// Notice that you're not only creating a DetailScreen, you're// also passing the current todo through to it.onTap:(){Navigator.push(context,MaterialPageRoute<void>(builder:(context)=>constDetailScreen(),// Pass the arguments as part of the RouteSettings. The// DetailScreen reads the arguments from these settings.settings:RouteSettings(arguments:todos[index]),),);},);},)

import'package:flutter/material.dart';​classTodo{finalStringtitle;finalStringdescription;​constTodo(this.title,this.description);}​voidmain(){runApp(MaterialApp(title:'Passing Data',home:TodosScreen(todos:List.generate(20,(i)=>Todo('Todo$i','A description of what needs to be done for Todo$i',),),),),);}​classTodosScreenextendsStatelessWidget{constTodosScreen({super.key,requiredthis.todos});​finalList<Todo>todos;​@overrideWidgetbuild(BuildContextcontext){returnScaffold(appBar:AppBar(title:constText('Todos')),body:ListView.builder(itemCount:todos.length,itemBuilder:(context,index){returnListTile(title:Text(todos[index].title),// When a user taps the ListTile, navigate to the DetailScreen.// Notice that you're not only creating a DetailScreen, you're// also passing the current todo through to it.onTap:(){Navigator.push(context,MaterialPageRoute<void>(builder:(context)=>constDetailScreen(),// Pass the arguments as part of the RouteSettings. The// DetailScreen reads the arguments from these settings.settings:RouteSettings(arguments:todos[index]),),);},);},),);}}​classDetailScreenextendsStatelessWidget{constDetailScreen({super.key});​@overrideWidgetbuild(BuildContextcontext){finaltodo=ModalRoute.of(context)!.settings.argumentsasTodo;​// Use the Todo to create the UI.returnScaffold(appBar:AppBar(title:Text(todo.title)),body:Padding(padding:constEdgeInsets.all(16),child:Text(todo.description),),);}}