In flutter we can easily access the ListView selected item value but the main task is to Flutter Send ListView Selected Item to Another Activity Screen and receive the sent value on next screen using super(key: key) method. This method would allow us to receive values sent by another activity screen on navigation time. In this tutorial we would use the Navigator.push() method to navigate between screens and along with it we would send the selected item value to next activity in flutter android iOS app example tutorial.
Contents in this project Flutter Send ListView Selected Item to Another Activity Screen Android iOS Example Tutorial:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Create flutter’s default void main runApp() method and here we would call our first home screen named as HomeScreen(). This would be our first screen for app.
|
1 2 3 4 5 |
void main() { runApp(MaterialApp( home: HomeScreen(), )); } |
3. Create our main first screen class named as HomeScreen extends StatelessWidget.
|
1 2 3 4 |
class HomeScreen extends StatelessWidget{ } |
4. Create a List <String> named as items in HomeScreen class. Using this List we would initialize the List Items values.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
final List<String> items = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ]; |
5. Create a function named as getItemAndNavigate() with Context and String argument. We would call this function on ListView item click event. Inside this function we would navigate to another activity screen and along with it we would send the selected item value to next screen using Navigator.push() method.
|
1 2 3 4 5 6 7 8 |
getItemAndNavigate(String item, BuildContext context){ Navigator.push( context, MaterialPageRoute( builder: (context) => SecondScreen(itemHolder : item) ) ); } |
6. Create ListView in widget build area in HomeScreen class. Here we would use the items List to populate the List items.
- onTap : Call the getItemAndNavigate() function on onPress event with selected item and application context.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Home Activity Screen"), ), body: Center( child: ListView( children: items .map((data) => ListTile( title: Text(data), onTap: ()=>{ getItemAndNavigate(data, context) } )) .toList(), ), ) ); } |
7. Now our first screen work has done. Next step is to create a class named as SecondScreen extends StatelessWidget. This would be our second screen of app.
|
1 2 3 4 |
class SecondScreen extends StatelessWidget { } |
8. Create a final String variable named as itemHolder. We would use this variable to receive the sent value.
|
1 |
final String itemHolder ; |
9. Create constructor with same class name and receive the send value to itemHolder variable in SecondScreen class.
|
1 |
SecondScreen({Key key, @required this.itemHolder}) : super(key: key); |
10. Create a function named as goBack() with context parameter. In this function we would call the Navigator.pop(context) method to go back to previous screen.
|
1 2 3 |
goBack(BuildContext context){ Navigator.pop(context); } |
11. Create 1 Text widget and 1 Raised button widget in Widget build area of SecondScreen class. The text widget is used to display the selected ListView item and Raised button in used to go back to previous screen.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Activity Screen"), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Center(child: Text('Selected Item = ' + itemHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), RaisedButton( onPressed: () {goBack(context);}, color: Colors.lightBlue, textColor: Colors.white, child: Text('Go Back To Previous Screen'), )]) ); } |
12. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 |
import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( home: HomeScreen(), )); } class HomeScreen extends StatelessWidget{ final List<String> items = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ]; getItemAndNavigate(String item, BuildContext context){ Navigator.push( context, MaterialPageRoute( builder: (context) => SecondScreen(itemHolder : item) ) ); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Home Activity Screen"), ), body: Center( child: ListView( children: items .map((data) => ListTile( title: Text(data), onTap: ()=>{ getItemAndNavigate(data, context) } )) .toList(), ), ) ); } } class SecondScreen extends StatelessWidget { final String itemHolder ; SecondScreen({Key key, @required this.itemHolder}) : super(key: key); goBack(BuildContext context){ Navigator.pop(context); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text("Second Activity Screen"), ), body: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Center(child: Text('Selected Item = ' + itemHolder, style: TextStyle(fontSize: 22), textAlign: TextAlign.center,)), RaisedButton( onPressed: () {goBack(context);}, color: Colors.lightBlue, textColor: Colors.white, child: Text('Go Back To Previous Screen'), )]) ); } } |
Screenshots:
Hello, First of all thank you for you example it helps me alot. But I have one issue that I have to send multiple data from listview to next screen. So can you help me that how can I do that. I am waiting for your response and thak you in advance.
Rohit my next tutorial about sending multiple data to next screen 🙂 .