I'm trying to add google logo for sign in with google by downloading from https://developers.google.com/identity/branding-guidelines. But when I use it in flutter app, some lines and dots are appearing around logo.
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')
],
),
),
),
which results in
enter image description here
or
enter image description here
How to remove glitches around the G logo?
i think there may be problem in the format of image you are using try out this code
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')
],
),
)
You can use an open-source background remover tool such as remove.bg/upload to remove everything around the logo. Then, you can just do the same thing: Image.network('<your path>', height: 40, width: 40) or any size.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With