Unwanted spacing between widgets

[GeoffroyMeunier]

Has your issue been reported?

• I have searched the existing issues and confirm it has not been reported.
• I give permission for members of the FlutterFlow team to access and test my project for the sole purpose of investigating this issue.

Current Behavior

You can't put a container (or any widget) right next to another. There's always a spacing between them. By default and even if you set the spacing to 0px, there will always be a spacing of ~1px (could be smaller, hard to tell).

Flutterflow seems to not make the element "float" properly, which mean you can't have 0px spacing for anything you will ever build. That's a huge problem in my opinion. In a complex design it can probably create an offset of 10px (10 container creating 1px space = 10px space at the end). But more importantly, that means we can't put an element right next to another.

You can read my post on the Community forum for more details: https://community.flutterflow.io/ask-the-community/post/space-between-images-in-listview-3KVjm4dBVrtbo1a?highlight=YRYneaFOAnGy3bi

Expected Behavior

The spacing between any elements with default properties or set to 0px should be of 0px.

Steps to Reproduce

1. Create a new projet
2. Create a new Component
3. Add a column
4. Add a container in the column
5. Add a column in this container
6. Add two containers in this column

1. Notice the problem

There's an unwanted space between containers by default and setting every spacing, padding, etc to 0px doesn't solve this issue.

Reproducible from Blank

• The steps to reproduce above start from a blank project.

Bug Report Code (Required)

ITESz/Hqx89gosBK7an+dflAhQMkQzM6bZI7ku1EdwEhfJT2O7N/dsz4dkpLYteATVB2GWaamkMdw/D2ueHxMPEEAySuGpxlz5RXQTrdVk+7RLHRDZOSWkFQJ+RNG0/CyMOs2xRCIvZ1dGQnwU6MB/CNG3qCf9qOYwx5e6fDbOY=

Context

I'm trying to create a reading app for webtoon. All the series publish on our website are affected, because every illustration is chopped in half by this 1px line between container since webtoons are slice in multiple 800 x 1280 px images (example: 50 images per chapter). It's a huge problem for us and we can't launch our app until this problem is solved.

Visual documentation

You can read my post on the Community forum for more details: https://community.flutterflow.io/ask-the-community/post/space-between-images-in-listview-3KVjm4dBVrtbo1a?highlight=YRYneaFOAnGy3bi

Additional Info

No response

Environment

- FlutterFlow version: v4.1 - Flutter 3.13.7
- Platform: Web
- Browser name and version: Chrome 121.0.6167.85
- Operating system and version affected: Windows 10

[wenkaifan0720]

Hi @GeoffroyMeunier. This is more of a rendering issue of Flutter. If you run your project in test/run mode, or zoom in a bit, you would see the line goes away.

[GeoffroyMeunier]

But that doesn't work for me. 😲

Have a look at my Test mode, 200% zoom-in:

And here's what we see in our live app published on our subdomain. All our BETA Testers who tried to publish their series see the spacing line between their images:

Did you do something special to not get this unwanted spacing? 🤔

[wenkaifan0720]

As I said, this is more of a rendering artifact issue with Flutter itself. I can see if I set the zoom level in the builder to 125%, 175%, etc, the line would show up. But the line will go away when the zoom level is like 150%, 200%. Also in test mode, the line would not show up for me no matter the zoom level I set. This is a open issue with Flutter (see discussions here: flutter/flutter#14288) and is dependent on the sizes of your widget and also things like the zoom level and the physical pixels of the end user.