-
Notifications
You must be signed in to change notification settings - Fork 29.7k
Description
I have found out an issue with rendering 0,25px separators.
Tested it on master 3.7.0-15.0.pre.16, ios 16.1, iphone 13 pro.
Steps to Reproduce
Run below code.
Main.dart
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 MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
fontFamily: 'Poppins',
),
home: const MyHomePage(title: 'Flutter 0.25px Separator issue'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Expanded(
child: ListView.separated(
shrinkWrap: true,
itemBuilder: (_, __) {
return const SizedBox(
height: 70,
);
},
separatorBuilder: (_, __) => const ListTileDivider(),
itemCount: 100,
),
),
],
),
),
);
}
}
class ListTileDivider extends StatelessWidget {
const ListTileDivider({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
margin: const EdgeInsets.only(
bottom: 6.0,
),
decoration: const BoxDecoration(
border: Border(
top: BorderSide(
color: Color(0xFFC6C6C5),
width: 0.25,
),
),
),
);
}
}
Expected results:
Correct rendering can be seen on ios Mail/Message apps, or any native app using separators inside ListView (ie. Whatsapp and the likes). The lines remain sharp and visible during the scrolling and maintain their relative position.
Actual results:
Issue might not be evident to untrained eyes, but lines are not sharp and well visible during the scrolling (not being sharp, they tend to look like 0.5px instead of 0.25px). Also, they lose their relative position during fast scrolling.
separator.issue.mov
Flutter doctor:
[✓] Flutter (Channel master, 3.7.0-15.0.pre.16, on macOS 12.2 21D49 darwin-arm64, locale en-IT)
[!] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
✗ cmdline-tools component is missing
Run path/to/sdkmanager --install "cmdline-tools;latest"
See https://developer.android.com/studio/command-line for more details.
✗ Android license status unknown.
Run flutter doctor --android-licenses to accept the SDK licenses.
See https://flutter.dev/docs/get-started/install/macos#android-setup for more details.
[✓] Xcode - develop for iOS and macOS (Xcode 13.4.1)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability