CODEWITHSUNDEEP
dartflutterdialogflutter-layout
Utkarsh Singh
Utkarsh Singh

Reputation: 5

How to add a AlertDialog in ListTile

I want to show a AlertDialog whenever I Tap on the ListTile. I want to add the AlertDialog in the OnTap functon in the ListTile as shown in the code.

    import "package:flutter/material.dart";

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Exploring Ui Widgets',
    home: Scaffold(
      body: getListView(),
    ),
  ));
}

Widget getListView() {
  var listview = ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.accessible),
        title: Text('Get Up!'),
        subtitle: Text('Use your Legs!'),
        trailing: Icon(Icons.accessible_forward),
        onTap: () {
          // I want to add a AlertDialog here!
        },
      ),
      ListTile(
        leading: Icon(Icons.airline_seat_individual_suite),
        title: Text('Wake Up!'),
        subtitle: Text('Dont Sleep!'),
        trailing: Icon(Icons.airline_seat_flat_angled),
      )
    ],
  );
  return listview;
   }

Upvotes: 0

Views: 2769

Answers (1)

Haroun Hajem
Haroun Hajem

Reputation: 5628

You can do it like this: 

onTap: () => alertDialog(context),

Then declare this method:

void alertDialog(BuildContext context) {
  var alert = AlertDialog(
    title: Text("My title"),
    content: Text("Dialog description"),
  );
 showDialog(context: context, builder: (BuildContext context) => alert);
}

It would look like this inside your code: 

import "package:flutter/material.dart";

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Exploring Ui Widgets',
    home: Scaffold(
      body: getListView(),
    ),
  ));
}

Widget getListView() {
  var listview = ListView(
    children: <Widget>[
      ListTile(
        leading: Icon(Icons.accessible),
        title: Text('Get Up!'),
        subtitle: Text('Use your Legs!'),
        trailing: Icon(Icons.accessible_forward),
        onTap: () {
          onTap: () => alertDialog(context),
        },
      ),
      ListTile(
        leading: Icon(Icons.airline_seat_individual_suite),
        title: Text('Wake Up!'),
        subtitle: Text('Dont Sleep!'),
        trailing: Icon(Icons.airline_seat_flat_angled),
      )
    ],
  );
  return listview;
}

void alertDialog(BuildContext context) {
  var alert = AlertDialog(
    title: Text("Dialog title"),
    content: Text("Dialog description"),
  );
 showDialog(context: context, builder: (BuildContext context) => alert);
}

Upvotes: 3

Related Questions