Antialiasing behaviour when same-colour #14288
Comments
|
Another example (I believe it is somehow related: ) import 'package:flutter/material.dart';
const Color grey = const Color.fromARGB(255, 100, 100, 100);
const Color black = const Color.fromARGB(255, 0, 0, 0);
void main() =>
runApp(
new Container(
color: grey,
child: new Center(
child: new Container(
width: 151.0,
height: 151.0,
color: black,
child: new Container(
color: grey,
),
),
),
),
);
We should not see border here. If widht/height are changed to 150.0, square is gone. |
|
This is normal behaviour. What's happening is that the boxes are not quite aligned with pixel boundaries, so there's some anti-aliasing happening on the boundaries, which involves transparency, which means that for those pixels the two grays are overlapping and looking darker. As a general rule when doing anti-aliasing you want to avoid putting identically-coloured boxes adjacent or over each other unless you can guarantee physical pixel alignment. Alternatively, you can use |
|
This is not boxes overlapping, but rather spare space between boxes, so color of background is popping up. I was changing background to different color and this color was popping out. |
|
Root cause is that boxes can not be aligned with physical pixels. I would not call it "normal", I would rather call it "expected". <?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal"
android:background="#000000"
tools:context="com.radzish.android_lines_bug.MainActivity">
<FrameLayout
android:layout_width="0dp"
android:layout_weight="1"
android:background="#646464"
android:layout_height="match_parent"/>
<FrameLayout
android:layout_width="0dp"
android:layout_weight="1"
android:background="#646464"
android:layout_height="match_parent"/>
<FrameLayout
android:layout_width="0dp"
android:layout_weight="1"
android:background="#646464"
android:layout_height="match_parent"/>
<FrameLayout
android:layout_width="0dp"
android:layout_weight="1"
android:background="#646464"
android:layout_height="match_parent"/>
<FrameLayout
android:layout_width="0dp"
android:layout_weight="1"
android:background="#646464"
android:layout_height="match_parent"/>
<FrameLayout
android:layout_width="0dp"
android:layout_weight="1"
android:background="#646464"
android:layout_height="match_parent"/>
<FrameLayout
android:layout_width="0dp"
android:layout_weight="1"
android:background="#646464"
android:layout_height="match_parent"/>
</LinearLayout>So I think flutter should improve in this case. |
Hixie
changed the title
Hixie
changed the title
Hixie
changed the title
zoechi
added
framework
zoechi
added
the
framework
goderbauer
added
the
customer: crowd
|
@radzish what is Android doing to avoid the problem? |
|
These comments have suggestions for things to put in documentation: |
|
Any updates here? Because this is very annoying(( |
|
@knopp Thank you for creating pixel_snap. Can you help show an example on how to use it with import 'package:pixel_snap/pixel_snap.dart';
import 'package:pixel_snap/material.dart';
...
CustomScrollView(
controller: PixelSnapScrollController(),
slivers: [
SliverAppBar(
pinned: true,
expandedHeight: ps(MediaQuery.of(context).size.height * 2 / 3),
...
),
SliverPadding(
padding: const EdgeInsets.all(16.0).pixelSnap(ps),
sliver: SliverToBoxAdapter(child: Text(...)),
),
],
) |
If you can provide a reproducible example please create issue in pixel_snap repository and I'll take a look. The snippet that you have posted here looks good, but it is possible that the |
|
There are many cases where adjacent boxes dont have the same color, and can not be merged. Example with alternating color, and a timer that auto scrolls to show the gaps: import 'dart:async';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp();
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark(),
home: const Scaffold(
body: MyWidget(),
),
);
}
}
class MyWidget extends StatefulWidget {
const MyWidget({Key? key}) : super(key: key);
@override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget> {
late ScrollController _controller;
late Timer _timer;
double _scrollOffset = 0.0;
@override
void initState() {
super.initState();
_controller = ScrollController();
_timer = Timer.periodic(const Duration(seconds: 1), _scroll);
}
@override
void dispose() {
_timer.cancel();
_controller.dispose();
super.dispose();
}
void _scroll(Timer timer) {
_scrollOffset += 0.25;
_controller.jumpTo(_scrollOffset);
}
@override
Widget build(BuildContext context) {
return Container(
color: Colors.black,
child: SingleChildScrollView(
controller: _controller,
child: Column(
children: [
for (int i = 0; i < 1000; i++) //
Container(
color: i % 2 == 0 ? Colors.blue : Colors.grey,
height: 20,
width: 100,
child: Text("$i"),
),
],
),
),
);
}
}
Screen.Recording.2024-02-12.at.19.53.31.movAnd without auto scroll: Screen.Recording.2024-02-12.at.19.54.02.movAnd without alternating colors, showing the color from behind: Screen.Recording.2024-02-12.at.19.56.51.mov |
|
Hello, I'm dealing with the same problems as mention above, thin white lines between widgets (rows in my case), when rendering to web. It looks like an anti-alias or not-pixel-perfect issue, also as already mentioned above. Have I understood it correctly that there is no proper/native solution to this, and the best option is to use pixel_snap? UPDATE: I also tried building/running for Linux desktop, and I get the same white lines. But using a Scaffold with backgroundColor works as a workaround, which happens to be usable in this case. |
Also you may try space_fixer https://pub.dev/packages/space_fixer Example: Container(
width: MediaQuery.of(context).size.width,
height: 50,
color: Colors.black,
),
SpaceFixerHorizontalLine(
context: context,
overflowHeight: 3,
overflowColor: Colors.black,
),
Container(
width: MediaQuery.of(context).size.width,
height: 50,
color: Colors.black,
),You can use this widget as a divider in the list |
Replace pixel_snap.mov |
Why would i ever give fixed height to a list item. |
|
Just wanted to share another case with you (#150035). It happens with Impeller on iOS too. import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: [
Positioned.fill(child: ColoredBox(color: Colors.blue)),
Center(
child: SizedBox(
width: 200,
height: 200,
child: Stack(
children: [
Positioned.fill(child: ColoredBox(color: Colors.red)),
Positioned.fill(
child: ColoredBox(color: Colors.blue),
)
],
),
),
),
],
),
);
}
} |
|
Is it a skia or a Flutter issue? |
thanks to you, I was able to easily solve the problem without much overhead. thank you so much |
|
this stack Overflow answered worked for me |
|
Unbelievable, this issue has existed for a few years? |
|
This issue can be very apparent when you're making games with Flutter (and Flame), and the curious thing is that nowadays the issue is usually worse with Impeller than it is with Skia. |
|
The same issue is noticed on Flutter Web (3.24.4) for |
and others
Latest status update: #14288 (comment); some work around suggestions: #14288 (comment)
Steps to Reproduce
Following source code:
produces following result:
Looks like background of the container is popping out and we see vertical lines. That should not be the case as all children of the row are Expanded and thus should fill the whole area.
If we remove one child lines are gone.
Logs
Flutter Doctor
The text was updated successfully, but these errors were encountered: