Search code examples
flutterflutter-web

Horizontal line between items in flutter web is not shown in firefox web browser


I developed a flutter web application. It works perfectly in other browsers except for the Firefox browser. I have a list of items between each item I added a horizontal line using

Container(
  width: double.infinity,
  height: 0.7,
  color: Color(0xffEBEBEB)                       
)

enter image description here

But in firefox lines between some items are not visible

enter image description here


Solution

  • It's because you have the height as a decimal. The height is in number of pixels. When you use decimals you can get rounding errors. That it rounds to 0 in some cases and 1 in other. Just give it a height of 1 like

    height: 1,
    

    You will see that it still looks the same, because they where actually rendered with height 1 for the places where you do see it. Using values that are not whole numbers doesn't make sense in most cases