Unexpected vertical lines between container elements of a row

Question

I am developing app using Flutter framework. I noticed strange issue recently. I narrowed it down and created sample that reproduces the issue

See the code below:


import 'package:flutter/material.dart';

const Color color = const Color.fromARGB(255, 100, 100, 100);

void main() =>
    runApp(
      new Container(
        color: new Color.fromARGB(255, 0, 0, 0),
        child: new Row(
          textDirection: TextDirection.ltr,
          children: [
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
            new Expanded(
              child: new Container(
                color: color,
              ),
            ),
          ],
        ),
      ),
    );

produces following result:

If I remove one of rows children, lines are gone. Is it a bug or I am doing something wrong?

You can find result of flutter doctor below:

[✓] Flutter (on Linux, locale en_US.UTF-8, channel alpha) • Flutter at /flutter • Framework revision 8f65fec5f5 (6 weeks ago), 2017-12-12 09:50:14 -0800 • Engine revision edaecdc8b8 • Tools Dart version 1.25.0-dev.11.0 • Engine Dart version 2.0.0-edge.d8ae797298c3a6cf8dc9f4558707bd2672224d3e

[✓] Android toolchain - develop for Android devices (Android SDK 27.0.3) • Android SDK at • Android NDK location not configured (optional; useful for native profiling support) • Platform android-27, build-tools 27.0.3 • ANDROID_HOME = • Java binary at: /jre/bin/java • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b01)

[✓] Android Studio (version 3.0) • Android Studio at / • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-915-b01)

[✓] Connected devices • Android SDK built for x86 • emulator-5554 • android-x86 • Android 8.1.0 (API 27) (emulator)

This is a very good finding. You should open an issue with this. Nice — Razvan Cristian Lung
is it really necessary to have color: new Color.fromARGB(255, 0, 0, 0), as background? To work around this problem you could change to the color Color.fromARGB(255, 100, 100, 100); — rafaelcb21
In fact it is a bug, because in Expanded fill it scales the screen to fill, only depending on the amount of Expanded, especially if it is an odd number, the screen size divided by the amount of Expanded is not perfect — rafaelcb21
I think it came from const Color color = const Color.fromARGB(255, 100, 100, 100); let us check it by changing to red maybe Color color = Colors.red; — Putra Ardiansyah

Alex Radzishevsky Alex Radzishevsky · Accepted Answer · 2018-02-22T11:52:46

The issue is happening because container child is not aligned with physical pixels. This is of course possible but android LinearLayout in similar case adjusts some children width so in total whole container is filled. It is difficult to judge what approach is correct, but it would be nice for flutter to have at least option to measure children like android does.

At this moment the best workaround for me is to measure children manually like this:

int CHILDREN_COUNT = 7;
List<Widget> children = new List(CHILDREN_COUNT);

MediaQueryData mediaQueryData = MediaQuery.of(context);
int physicalWidth = (mediaQueryData.size.width * mediaQueryData.devicePixelRatio).floor();

for (int i = 0, pixelsLeft = physicalWidth; i < CHILDREN_COUNT; i++) {
  int columnWidth = (pixelsLeft / (CHILDREN_COUNT - i)).floor();

  children[i] = new Container(
    width: columnWidth / mediaQueryData.devicePixelRatio,
    color: color,
  );

  pixelsLeft -= columnWidth;
}

Unexpected vertical lines between container elements of a row

1 Answers