Sign_in flutter 的 Google 图标（徽标）

Question

我正在尝试通过从 https://developers.google.com/identity/branding-guidelines 下载添加 google 徽标以使用 google 登录。但是当我在 flutter 应用程序中使用它时，徽标周围出现了一些线条和点。

GestureDetector(
   child: Container(
      padding: EdgeInsets.only(right: _size.height * 0.016),
      decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(15.0),
                    ),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
             Container(
             // decoration: BoxDecoration(color: Colors.blue),
                                child: Image.asset(                      
         'assets/images/google_icon/btn_google_light_normal.9.png',
                                  fit: BoxFit.fitWidth,
                                ),
                              ),
             SizedBox(
                 width: 5.0,
                 ),
             Text('Sign-in with Google')
           ],
          ),
         ),
        ), 

导致

在此输入图片描述

或

在此输入图片描述

如何消除G标志周围的毛刺？

Answer 1

我认为您使用的图像格式可能有问题，请尝试此代码

Container(
  width:300,
  height:80,
  child: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Container(
        // decoration: BoxDecoration(color: Colors.blue),
          child:
          Image.network(
              'http://pngimg.com/uploads/google/google_PNG19635.png',
              fit:BoxFit.cover
          )                  
      ),
      SizedBox(
        width: 5.0,
      ),
      Text('Sign-in with Google')
    ],
  ),
)

Answer 2

您可以使用开源背景去除工具（例如remove.bg/upload）来删除徽标周围的所有内容。然后，您可以做同样的事情：

Image.network('<your path>', height: 40, width: 40)

或任何尺寸。

Answer 3

也许这不是最优雅的解决方案，但我只是裁剪了原始图像以去除线条。

之前：

之后：