Flutter List View Ripple Effect Doesn't Work

user_7716326 0
Viewed 433

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]),
          ),
        );
      }),
);

}

flutter-layout dart flutter
3 Answers

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]),
  ),
)
user_30808480

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'),
           ));
         },
    );
user_84800690

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'),
            ),
          ),
        ));
  }
}
user_120000530
Related