Flutter List View Ripple Effect Doesn't Work

Question

I have a ListView in AlertDialog container. There is an InkWell method but ripple effect doesn't work and I can't put the separator. How can I put separator and have ripple effect?

Widget setupAlertDialoadContainer(context) {
return Container(
  color: Colors.white,
  height: 300.0,
  width: 300.0,
  child: ListView.builder(
      itemCount: showroomModel.length,
      itemBuilder: (BuildContext context, int index) {
        return InkWell(
          onTap: () => {
            print(showroomModel[index]),
          },
          child: ListTile(
            title: Text(showroomModel[index]),
          ),
        );
      }),
);

}

Answer 1

For the InkWell ripple effect, try wrapping the InkWell in a Material widget.

Material(
  child: InkWell(
    onTap: () {
      print(showroomModel[index]);
    },
    child: ListTile(
      title: Text(showroomModel[index]),
    ),
  ),
)

For the separator use ListView.separated as in Tasnuva oshin's answer.

---

As pointed out by TheFabbius, the above code can also be simplified by removing the InkWell and moving the onTap inside the ListTile.

Material(
  child: ListTile(
    onTap: () {
      print(showroomModel[index]);
    },
    title: Text(showroomModel[index]),
  ),
)

Answer 2

Check this out :

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('List app'),
          
        ),
        body: Scaffold(
          body: Center(
            child: ElevatedButton(
              onPressed: () {
                showDialog(
                    context: context,
                    builder: (BuildContext context) {
                      return AlertDialog(
                        title: Text("Image Required"),
                        content: Container(
                          height: 200,
                          width: 200,
                          child: ListView.separated(
                            itemBuilder: (context, index) {
                              return Ink(
                                color: Colors.white,
                                child: ListTile(
                                  leading: Text("Sample"),
                                  title: Text("title"),
                                  onTap: () {},
                                ),
                              );
                            },
                            separatorBuilder: (context, index) {
                              return Divider();
                            },
                            itemCount: 4,
                          ),
                        ),
                        actions: <Widget>[
                          FlatButton(
                            child: Text("Close"),
                            onPressed: () {
                              Navigator.of(context).pop();
                            },
                          )
                        ],
                      );
                    });
              },
              child: Text('Press'),
            ),
          ),
        ));
  }
}

Answer 3

For Separator & Ripple Effect Use

    ListView.separated(
         itemCount: 25,
         separatorBuilder: (BuildContext context, int index) => Divider(height: 1),
         itemBuilder: (BuildContext context, int index) {
           return  Inkwell(child: 
ListTile(
             title: Text('item $index'),
           ));
         },
    );