Dismissible content going outside - flutter

Question

I have a screen with a list of Widgets, each widet is a Dismissible with a ListTile inside, but when I swipe, the content is going outside (as pointed by the red arrow), this may be happening because of the padding around the Dismissible. There is a way to fix it?

Answer 1

You are not giving your code sample in your question so, I have make this type of widget to solve this problem. Please refer the code, (It's may be help to you),
class _MyHomePageState extends State<MyHomePage> {
final itemsList = List<String>.generate(10, (n) => "List item ${n}");
ListView generateItemsList() {
return ListView.builder(
itemCount: itemsList.length,
itemBuilder: (context, index) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 50, vertical: 10),
child: Dismissible(
key: Key(itemsList[index]),
background: slideRightBackground(),
secondaryBackground: slideLeftBackground(),
child: InkWell(
onTap: () {
print("${itemsList[index]} clicked");
},
child: ListTile(
tileColor: Colors.yellow,
title: Text('${itemsList[index]}'))),
),
);
}
);
}
Widget slideRightBackground() {
return Container(
color: Colors.green,
child: Align(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
width: 20,
),
Icon(
Icons.edit,
color: Colors.white,
),
Text(
" Edit",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.left,
),
],
),
alignment: Alignment.centerLeft,
),
);
}
Widget slideLeftBackground() {
return Container(
color: Colors.red,
child: Align(
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Icon(
Icons.delete,
color: Colors.white,
),
Text(
" Delete",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w700,
),
textAlign: TextAlign.right,
),
SizedBox(
width: 20,
),
],
),
alignment: Alignment.centerRight,
),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: generateItemsList(),
);
}
}
Output :