Dec

Flutter Send Data To New Screen Example

Flutter Send data to a new screen:

Most of the times, we not only want to navigate to a new screen, but also we want to pass some data to the new screen as well. For example, we often want to pass information about the item we tapped on.

In Flutter Screens are Just Widget. In this example, we will create a List of Todos. When we tapped on the todo, we will navigate to a new screen ( here in flutter new screen is a Widget) that displays information about the todo.

Using Send data to a new screen functionality in Flutter:

Define a Todo class
Display a List of Todos
Create a Detail Screen that can display information about a todo
Navigate and pass data to the Detail Screen

First we have to define a Todo class:

Here, we will need a simple way to represent Todos. In this example, we will create a class that contains two pieces of data: i.e one is the title and other one is description.

class Todo {
final String title;
final String description;

Todo(this.title, this.description);
}

Creating a List of Todos in Flutter:

In this example, we will creating 20 todos and showing them using a ListView.

below sample code used to generate 20 todos.

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

Display the List of Todos using a ListView in Flutter:

Below sample code used to display the todos in list view.

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

Create a Detail Screen that can display information about a todo in Flutter:

Now, here we will create our second screen. The title of the screen will contain the title of the todo, and the body of the screen will show the description about the todo.

Tt is a normal StatelessWidget, we will simply require that users creating the Screen pass through a Todo!

here we will build a UI using the given Todo.

class DetailScreen extends StatelessWidget {
// Declare a field that holds the Todo
final Todo todo;

// In the constructor, require a Todo
DetailScreen({Key key, @required this.todo}) : super(key: key);

@override
Widget build(BuildContext context) {
// Use the Todo to create our UI
return Scaffold(
appBar: AppBar(
title: Text("${todo.title}"),
),
body: Padding(
padding: EdgeInsets.all(16.0),
child: Text('${todo.description}'),
),
);
}
}

Navigate and pass data to the Detail Screen in Flutter:

We created our DetailScreen , we are ready to perform the Navigation! Here, we want to Navigate to the DetailScreen when a user taps on a Todo in our List. When we do so, we also want to pass the Todo to the DetailScreen.

To Navigate to the DetailScreen We will use an onTap() callback method for our ListTile Widget. Within our onTap callback method, we will use the Navigator.push method.

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

Below is the Complete Example Code to Send Data To the New Screen in Flutter:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class Todo {
final String title;
final String description;

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 {
final List todos;

TodosScreen({Key key, @required this.todos}) : super(key: key);

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Todos'),
),
body: ListView.builder(
itemCount: todos.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(todos[index].title),
// When a user taps on the ListTile, navigate to the DetailScreen.
// Notice that we're not only creating a DetailScreen, we're
// also passing the current todo through to it!
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => DetailScreen(todo: todos[index]),
),
);
},
);
},
),
);
}
}

class DetailScreen extends StatelessWidget {
// Declare a field that holds the Todo
final Todo todo;

// In the constructor, require a Todo
DetailScreen({Key key, @required this.todo}) : super(key: key);

Congratulations You Have Learned To Send Data To The New Screen In Flutter….!!!

If It Is Useful Share It With Your Friends….!!!

If You Have Any Query Please make A Comment….!!!

PrevNext