I have a problem with jumpy padding, when I start dragging list elements. Tested on Flutter Web (Chrome browser).
Minimal reproducible example:
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: ReorderableListView(
onReorder: (oldIndex, newIndex) {},
children: const [
ListRow(key: ValueKey('0'), text: '000000'),
ListRow(key: ValueKey('1'), text: '111111'),
ListRow(key: ValueKey('2'), text: '222222'),
],
)),
);
}
}
class ListRow extends StatelessWidget {
const ListRow({super.key, required this.text});
final String text;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(10.0),
child: ListTile(
hoverColor: Colors.blue,
onTap: () {},
title: Row(
children: [
const Expanded(
flex: 2,
child: Text('HelloWorld'),
),
Expanded(
flex: 4,
child: Align(
alignment: Alignment.centerLeft,
child: Card(
margin: EdgeInsets.zero,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(text),
),
),
))
],
),
),
);
}
}
I figured the reason is the Align widget. When I remove it, everything is OK. But I want to keep it so that Card doesn’t stretch. Do you know any workaround to keep this kind of look without the Align widget?
The other solution is to resign from ListTile, but I need it for the hoverColor.