Flutter开发如何避免文本字段周边出现canvas颜色的细线？

问题原因 #

你遇到的细线是Flutter渲染抗锯齿导致的色块溢出：你包裹Text组件的Material组件未指定背景色，默认继承了全局主题的canvasColor（蓝色），而你给内层Container和Text单独设置了白色背景，两个色块交接的边缘因为抗锯齿计算就会露出底层的蓝色细线。

解决方案 #

最简单的方案是给Material组件显式指定白色背景，不需要修改全局主题配置，修改后你也可以删掉内层Container和Text样式里重复的白色背景配置，简化代码：

Material(
  // 新增这一行，指定当前Material组件的背景色为白色，不影响全局主题
  color: Colors.white,
  child: Container(
    padding: const EdgeInsets.only(left : 10.0),
    child: Text('Email',
          style: TextStyle(
          fontSize: 18,
          color: Colors.grey,
        )
    ),
  ),
)

你只需要把两处包裹文本的Material组件都加上color: Colors.white配置即可完全消除蓝色细线。
如果你的场景不需要用到Material组件提供的水波纹、阴影等特性，也可以直接删掉Material包裹层，直接放Container和Text组件，也可以解决问题。

内容的提问来源于stack exchange，提问作者Lucas García de Viedma Pérez