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);

@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}'),
),
);
}
}

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….!!!

Leave a Reply

Categories

Myles [CPS] IN
Shein WW