How do I set the size of the list, so that when swiped to the left, it doesn't exceed the Card layout limit in Slidable Flutter

Viewed 22

i'm using slidable flutter, but i'm having ui problem. How do I set the size of the list, so that when swiped to the left, it doesn't exceed the Card layout limit. this is the problem image: enter image description here

this is my code:

ListView.builder(
        padding: const EdgeInsets.all(5),
        itemCount: member.length,
        itemBuilder: (BuildContext context, int index) {
          return Card(
            child: Slidable(
              key: const ValueKey(0),
              endActionPane: const ActionPane(
                extentRatio: 0.2,
                motion: ScrollMotion(),
                children: [
                  SlidableAction(
                    onPressed: null,
                    backgroundColor: Color(0xFFEEB4B0),
                    foregroundColor: Color(0xffCB3A31),
                    icon: Icons.delete,
                  ),
                ],
              ),
              child: ListTile(
                  leading: CircleAvatar(),
                  title: Text(member[index]["name"]),
                  subtitle: Text(member[index]["noHp"]),
                  onTap: () {}),
            ),
          );
        },
      ),
1 Answers

You can just put it in sizedbox for making that into the size you want.

In your Case -

ListView.builder(
    padding: const EdgeInsets.all(5),
    itemCount: member.length,
    itemBuilder: (BuildContext context, int index) {
      return Card(
        child: SizedBox(
width:MediaQuery.of(context).size.width-20, 
Slidable(
          key: const ValueKey(0),
          endActionPane: const ActionPane(
            extentRatio: 0.2,
            motion: ScrollMotion(),
            children: [
              SlidableAction(
                onPressed: null,
                backgroundColor: Color(0xFFEEB4B0),
                foregroundColor: Color(0xffCB3A31),
                icon: Icons.delete,
              ),
            ],
          ),
          child: ListTile(
              leading: CircleAvatar(),
              title: Text(member[index]["name"]),
              subtitle: Text(member[index]["noHp"]),
              onTap: () {}),
        ),),
      );
    },
  ),
Related