Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Google Icon(Logo) for Sign_in flutter

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?

like image 967
smsakthi99 Avatar asked Oct 18 '25 00:10

smsakthi99


2 Answers

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')
    ],
  ),
)
like image 103
Azad Prajapat Avatar answered Oct 19 '25 14:10

Azad Prajapat


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.

like image 32
Miro Avatar answered Oct 19 '25 14:10

Miro