ListView widget has a property named as onTap() which would call each time when app user clicks on ListTile item. We can easily call any function or specific task on onTap event. On the onTap() method we would pass the selected item to stand alone function where we would print the clicked item on mobile screen using Alert dialog message box. So in this tutorial we would Show Get Selected Item From ListView in Flutter Android iOS Example Tutorial.
Contents in this project Show Get Selected Item From ListView in Flutter Android iOS Example:
1. Import material.dart package in your app’s main.dart file.
|
1 |
import 'package:flutter/material.dart'; |
2. Call our main MyApp class using void main runApp() method.
|
1 |
void main() => runApp(MyApp()); |
3. Create our main class MyApp extends with StatelessWidget. We would call ListViewWidget() here in body section.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Get ListView Selected Item')), body: Center( child: ListViewWidget() ) ) ); } } |
4. Create a class named as ListViewWidget extends StatefulWidget. In this class we would make createState() method with ListViewState class. This method will allow us to use mutable state in given class tree.
|
1 2 3 4 5 |
class ListViewWidget extends StatefulWidget { ListViewState createState() => ListViewState(); } |
5. Create our main ListView class named as ListViewState extends with State.
|
1 2 3 4 |
class ListViewState extends State { } |
6. Create a List named as items in ListViewState class. We would use this list to create ListView items.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
List<String> items = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ]; |
7. Create a function named as getListViewItems() with String argument. In this function we would print the selected ListView item on screen using Alert dialog box.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
getListViewItems(String item){ showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text(item), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } |
8. Create the ListView widget with ListTile widget in Widget build area. We would print the items using map method.
- onTap : We are calling getListViewItems() function with data argument.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
Widget build(BuildContext context) { return Scaffold( body: Center( child: ListView( children: items .map((data) => ListTile( title: Text(data), onTap: ()=>{ getListViewItems(data) } )) .toList(), ), ) ); } |
9. 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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Get ListView Selected Item')), body: Center( child: ListViewWidget() ) ) ); } } class ListViewWidget extends StatefulWidget { ListViewState createState() => ListViewState(); } class ListViewState extends State { List<String> items = [ 'One', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Ten' ]; getListViewItems(String item){ showDialog( context: context, builder: (BuildContext context) { return AlertDialog( title: new Text(item), actions: <Widget>[ FlatButton( child: new Text("OK"), onPressed: () { Navigator.of(context).pop(); }, ), ], ); }, ); } @override Widget build(BuildContext context) { return Scaffold( body: Center( child: ListView( children: items .map((data) => ListTile( title: Text(data), onTap: ()=>{ getListViewItems(data) } )) .toList(), ), ) ); } } |
Screenshots:
