Search code examples
androidiosflutterdartuser-experience

Can Flutter reliably render "0.5"-width lines?


When designing UX, I find sometimes 0.5-width lines are suitable. For example, Divider(thickness: 0.5).

However, I wonder whether this can be rendered reliably in all kinds of devices? For example, will it completely disappear on some kind of devices?

Thanks for any suggestions!


Solution

  • Yes, it is possible that the line might not be visible on low-density screens. Try for example to draw a 0.001 line on your device. It will disappear.

    By using the devicePixelRatio you can prevent the line from becoming smaller than 1px.

    import 'dart:math' as math;
    
    final pixelPerPoint = MediaQuery.of(context).devicePixelRatio;
    final onePixelSize = 1 / pixelPerPoint;
    return Divider(
      thickness: math.max(0.01, onePixelSize),
    );
    
    /// The number of device pixels for each logical pixel. This number might not
    /// be a power of two. Indeed, it might not even be an integer. For example,
    /// the Nexus 6 has a device pixel ratio of 3.5.
    final double devicePixelRatio;