Closed arturoszulc closed 12 hours ago
darshankawar
commented
2 weeks ago Thanks for the report @arturoszulc I see below upon running the code sample:
https://github.com/flutter/flutter/assets/67046386/537811c5-11db-44a5-a967-00d95dffdb86
Can you please elaborate when you says padding changes or provide us a short video that shows the behavior ?
arturoszulc
commented
2 weeks ago Steps to reproduce: Start draggin any list element. Upon drag start, right in the moment of mouse click, ListTile contents shift down:
https://github.com/flutter/flutter/assets/61434086/cd95f5bc-b9fa-4fa9-8ba5-858a685f0a99
Instead, it should look like this:
https://github.com/flutter/flutter/assets/61434086/ee9d6832-76f4-4398-964c-10ab5829b824
arturoszulc
commented
2 weeks ago Additional side by side comparison. Look how content of a ListTile is shifted down. This makes ListTile unsymmetrical:
darshankawar
commented
2 weeks ago Thanks for the updates. Can you check if your issue resembles https://github.com/flutter/flutter/issues/63527 or not ?
arturoszulc
commented
1 week ago Nope. Differences:
Example without Card widget:
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: Container(
color: Colors.red,
margin: EdgeInsets.zero,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(text),
),
),
))
],
),
),
);
}
}I found a workaround to my problem: Instead of a ListTile I have to use InkWell. It's a solution, but not an ideal one, because I lose some of the useful ListTile props (like leading, trailing, etc.)
Workaround code:
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: InkWell(
hoverColor: Colors.blue,
onTap: () {},
child: Row(
children: [
const Expanded(
flex: 2,
child: Text('HelloWorld'),
),
Expanded(
flex: 4,
child: Align(
alignment: Alignment.centerLeft,
child: Container(
color: Colors.red,
margin: EdgeInsets.zero,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(text),
),
),
))
],
),
),
);
}
}Thanks for the update. This isn't specific to web, as, on desktop (macos) as well, I see same behavior.
https://github.com/flutter/flutter/assets/67046386/c1691712-e654-44e5-9f6b-8af5364b81c9
Steps to reproduce
Start dragging any list element (Tested on Chrome Browser)
Expected results
Padding stays intact
Actual results
Padding changes (the whole tile shifts down) To fix this I have to either resign from ListTile or Align widget. But I need both to keep hoverColor and prevent Card from stretching.
Code sample
Code sample
```dart 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), ), ), )) ], ), ), ); } } ```Flutter Doctor output
Doctor output
```console [√] Flutter (Channel stable, 3.19.6, on Microsoft Windows [Version 10.0.19045.4291], locale pl-PL) • Flutter version 3.19.6 on channel stable at C:\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision 54e66469a9 (9 days ago), 2024-04-17 13:08:03 -0700 • Engine revision c4cd48e186 • Dart version 3.3.4 • DevTools version 2.31.1 [√] Windows Version (Installed version of Windows is version 10 or higher) [√] Android toolchain - develop for Android devices (Android SDK version 33.0.0) • Android SDK at C:\Users\Artur\AppData\Local\Android\sdk • Platform android-34, build-tools 33.0.0 • Java binary at: C:\Program Files\Android\Android Studio\jbr\bin\java • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694) • All Android licenses accepted. [√] Chrome - develop for the web • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe [√] Visual Studio - develop Windows apps (Visual Studio Community 2022 17.4.3) • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Community • Visual Studio Community 2022 version 17.4.33205.214 • Windows 10 SDK version 10.0.22000.0 [√] Android Studio (version 2022.2) • Android Studio at C:\Program Files\Android\Android Studio • Flutter plugin can be installed from: https://plugins.jetbrains.com/plugin/9212-flutter • Dart plugin can be installed from: https://plugins.jetbrains.com/plugin/6351-dart • Java version OpenJDK Runtime Environment (build 17.0.6+0-b2043.56-9586694) [√] VS Code (version 1.88.1) • VS Code at C:\Users\Artur\AppData\Local\Programs\Microsoft VS Code • Flutter extension version 3.86.0 [√] Connected device (3 available) • Windows (desktop) • windows • windows-x64 • Microsoft Windows [Version 10.0.19045.4291] • Chrome (web) • chrome • web-javascript • Google Chrome 124.0.6367.78 • Edge (web) • edge • web-javascript • Microsoft Edge 122.0.2365.92 [√] Network resources • All expected network resources are available. • No issues found! ```