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)

Answer 1

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;
}