Skip to content

[Impeller & Skia] 0.25px separators rendering issue #118947

@delfme

Description

@delfme

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listc: renderingUI glitches reported at the engine/skia or impeller rendering levelengineflutter/engine related. See also e: labels.found in release: 3.7Found to occur in 3.7has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-iosiOS applications specificallyteam-engineOwned by Engine teamtriaged-engineTriaged by Engine team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions