Flutter : Passing Data Between Screens | Passing Parameters Using Constructors And Named Routes.

we studied screen navigation in the last tutorial in this tutorial we will study how to pass data from one screen to another for that we will study two methods passing parameters using Constructors and passing parameters using named routes passing parameters using Constructors you can pass parameters by creating a Constructor in the destination screen and providing the required arguments when navigating to it to demonstrate this create cre a new project for now add nothing in the body except for a center widget next create a destination screen create a new dart file named detail screen. Dart import material Dart then create a stateless widget class named detail screen declare a variable for the parameter include that variable in the Constructor which is used for passing the parameter use required this. data inside the build function return a scaffold widget create an app bar and set a title named detail screen then create the body create a text widget inside a center widget display the past variable data in that text widget use the dollar symbol to display the variable value in Dart open the main. dart file and create an elevated button to navigate to the new page and pass the variable set an anonymous function in onpressed set a button text then call the Navigator push method that we studied earlier set the route with material page route call the detail screen class in the Builder here we pass the parameter which is a string data import detail screen. Dart pass a string value as the parameter add a semicolon at the end then run the app click the button it will move to the detail screen and the past value will be displayed in the text then we will study how to pass multiple data to another screen using a Constructor here we declare three parameters with different data types string integer and double pass the three parameters in the Constructor open main. Dart file and pass the new variables in the detail screen class title is a string value ID is an integer and price is a double then open the detail screen file and display the past variables adding a new line character between each value then run the app go to the detail screen the past values are displayed on the new page passing parameters using named routes then we are going to study another method using named parameters first we remove all the parameters from The Constructor we are using the same files to study the new method remove the displayed variables as well remove the parameters from the main doart file to first we create a named route in the material app widget we already studied that in the last tutorial video the route name is detail and it calls the detail screen class then change the buttons on pressed function to navigator push named use the route name detail here then set the new parameter arguments to pass the data here we pass a string value next open the detail screen do. file declare a string variable to receive the past string value string data retrieve the data using modal route. of context do settings. arguments then convert it to a string finally display that data in a text which run the app and go to the details screen the past data is displayed on the new screen next we will pass multiple data using the push named function remove this single parameter we are passing multiple data with different data types there are many methods for doing that but we will use one of the easiest ways for that we create a new class in a new file file name is detail arguments. Dart class name is detail arguments create variables that we need to pass through the push named function three variables string title in ID double price then create the Constructor with these three parameters save and go to the main. dart file the route is already created and called we need changes in the argument section in the arguments parameter we call our new class detail arguments and pass values to its Constructor we need to import that class file at the top then pass three values title ID and price open detail screen. Dart and receive the data and display it receive it as our created Class Type detail arguments we need to import the class file the variable name is ARS and retrieve it using modal route. of context. settings. arguments values are available in the ARs variable title is arts. tile for id rs. id separate data with new lines price is. price then run the app go to the detail screen past values are displayed in the detail screen these are the two ways to pass values between screens we have another way to access declared variables throughout the app which we will study in the future subscribe to this channel for more videos like this thank you for watching

Channel: True Coders

Views: 144

Keywords: navigate with paramter, pass values between pages, data pass between app, flutter app data pass

Id: hwrVQ7EqgdI

Length: 14min 53sec (893 seconds)

Published: Tue Jun 18 2024