Interaction with the UI is an integral part of any application. But more often than not, the information needs to be sent from one screen to another. For instance, say you need to pass data regarding a selected or tapped component of the UI to another route(ie, page). In this article, we will explore in detail the process of sending data to another screen by building a simple application.
For the purpose of better understanding, we will build a Task memo app that lists all the pending tasks on the home screen and when clicked on any of the tasks a respective detailed description of the task is shown on another page. Here we will be passing the data from the Home screen (the task that is tapped on) to a description screen.
To build the task memo app follow the below steps:
- Create a Task class
- List the tasks on the home screen
- Design a screen that displays the description of the task
- Pass data to the tapped task to the description screen
Let’s look into the task in detail.
Creating a Task class:
A simple way to define the task class is shown below:
Listing the tasks:
Use the ListView to generate the list of tasks. For the sake of simplicity we will be creating a list of 10 tasks as follows:
Now create a home screen where the list can be displayed using a StatelessWidget as follows:
Designing the Description screen:
Again use the StatelessWidget to create a route for the description page. The titlebar of the screen should show the task_name (name of the task) and the body should consist of the description of the task as shown below:
Passing Data to the Description page:
Here we will assign a callback function to the onTap() function that uses the Navigator.push() method of the Navigator claas to pass the data to the description screen as shown below:
Complete Source Code:
- Flutter - Send Data to Screen using RouteSettings
- Flutter - Return Data from Screen
- Splash Screen in Flutter
- Flutter - Animated Splash Screen
- Android | How to send data from one activity to second activity
- How to send an Email from your Android App?
- How to send message on WhatsApp in Android
- How to send message on WhatsApp in Android using Kotlin
- Retrieve Data From TextFields in Flutter
- Flutter - Updating Data on the Internet
- Flutter - Fetching Data From the Internet
- Flutter - Deleting Data On The Internet
- Flutter - Sending Data To The Internet
- Flutter - Read and Write Data on Firebase
- Android | Creating a Splash Screen
- Android | Creating multiple Screen app
- How to scale different Views to all screen sizes in Android Studio?
- Screen Orientations in Android with Examples
- Screen Pinning
- Locking Screen Orientation in Android
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to email@example.com. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.