Flutter Get ListView Selected Item in Alert Dialog

There are 2 types of ListView in frameworks, ListView which are showing just items and ListView with On item selection trigger event. To invoke a event on ListView item selection first we have to get selected item from ListView. There are multiple ways to select item from ListView in flutter. Today we will get ListView selected item with InkWell and show the item in Alert Dialog.

Flutter Get ListView Selected Item in Alert Dialog

1. Creating a List and defining multiple types of items.

List<Map<String, dynamic>> listData = [
    {"id": 1, "title": "Apple"},
    {
      "id": 2,
      "title": "Avocados",
    },
    {
      "id": 3,
      "title": "Cranberry",
    },
    {
      "id": 4,
      "title": "Dragonfruit",
    },
    {
      "id": 5,
      "title": "Banana",
    },
    {
      "id": 6,
      "title": "Blueberry",
    },
    {
      "id": 7,
      "title": "Dates",
    },
    {
      "id": 8,
      "title": "Cherry",
    },
    {
      "id": 9,
      "title": "Coconut",
    },
    {
      "id": 10,
      "title": "Dragon fruit",
    },
    {
      "id": 11,
      "title": "Guava",
    },
    {
      "id": 12,
      "title": "Watermelon",
    }
  ];

2. Creating a function getListItem() with item argument to receive selected item from ListView. We will be showing selected item in Alert Dialog.

  Future<void> getListItem(item) async {
    await showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(item),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('OK'),
            )
          ],
        );
      },
    );
  }

3. Creating ListView.builder() function and here we will be defining InkWell widget and wrap Text as child to enable Click event on list item.

ListView.builder(
        itemCount: listData.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 50,
            width: double.infinity,
            margin: const EdgeInsets.all(1.7),
            color: Colors.lightBlue,
            child: Center(
                child: InkWell(
                    onTap: () async {
                      getListItem(listData[index]["title"]);
                    },
                    child: Text(
                      '${listData[index]["title"]}',
                      style: const TextStyle(
                          fontSize: 22,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ))),
          );
        });

Source code for main.dart file:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: SafeArea(child: MyApp())));
  }
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State {
  List<Map<String, dynamic>> listData = [
    {"id": 1, "title": "Apple"},
    {
      "id": 2,
      "title": "Avocados",
    },
    {
      "id": 3,
      "title": "Cranberry",
    },
    {
      "id": 4,
      "title": "Dragonfruit",
    },
    {
      "id": 5,
      "title": "Banana",
    },
    {
      "id": 6,
      "title": "Blueberry",
    },
    {
      "id": 7,
      "title": "Dates",
    },
    {
      "id": 8,
      "title": "Cherry",
    },
    {
      "id": 9,
      "title": "Coconut",
    },
    {
      "id": 10,
      "title": "Dragon fruit",
    },
    {
      "id": 11,
      "title": "Guava",
    },
    {
      "id": 12,
      "title": "Watermelon",
    }
  ];

  Future<void> getListItem(item) async {
    await showDialog<void>(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text(item),
          actions: <Widget>[
            TextButton(
              onPressed: () {
                Navigator.of(context).pop();
              },
              child: const Text('OK'),
            )
          ],
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: listData.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            height: 50,
            width: double.infinity,
            margin: const EdgeInsets.all(1.7),
            color: Colors.lightBlue,
            child: Center(
                child: InkWell(
                    onTap: () async {
                      getListItem(listData[index]["title"]);
                    },
                    child: Text(
                      '${listData[index]["title"]}',
                      style: const TextStyle(
                          fontSize: 22,
                          color: Colors.white,
                          fontWeight: FontWeight.bold),
                    ))),
          );
        });
  }
}

Screenshots: