Create Sign-in-with-Google button in Flutter in accordance with the terms
Solution 1
I'm giving you a general idea, replace Android icon with your Google image using Image.asset(google_image)
InkWell(
onTap: () {},
child: Ink(
color: Color(0xFF397AF3),
child: Padding(
padding: EdgeInsets.all(6),
child: Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
children: [
Icon(Icons.android), // <-- Use 'Image.asset(...)' here
SizedBox(width: 12),
Text('Sign in with Google'),
],
),
),
),
)
Solution 2
you can use Padding property of raised button also use property of Row widget and mainAxisSize of button. Following code may help you to understand clearly.
new Container(
margin: EdgeInsets.fromLTRB(30.0, 5.0, 30.0, 5.0),
child: new RaisedButton(
padding: EdgeInsets.only(top: 3.0,bottom: 3.0,left: 3.0),
color: const Color(0xFF4285F4),
onPressed: () {},
child: new Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new Image.asset(
'res/images/icons/google/btn_google_dark_normal_mdpi.9.png',
height: 48.0,
),
new Container(
padding: EdgeInsets.only(left: 10.0,right: 10.0),
child: new Text("Sign in with Google",style: TextStyle(color: Colors.white,fontWeight: FontWeight.bold),)
),
],
)
),
),
Mani76
Updated on July 31, 2022Comments
-
Mani76 over 1 year
I'd like to add a "Sign in with Google" Button to my Flutter app. This button should be in accordance with the terms of Google.
My problem is, that the button I've create looks really awful.
I used the images which Google provides on their website but I don't know if I'm doing right with the code for the button.
Widget _createLoginButtonGoogle() { return new Expanded( child: new Container( margin: EdgeInsets.fromLTRB(30.0, 5.0, 30.0, 5.0), child: new RaisedButton( color: const Color(0xFF4285F4), shape: _createButtonBorder(), onPressed: () {}, child: new Row( children: <Widget>[ new Image.asset( 'res/images/icons/google/btn_google_dark_normal_mdpi.9.png', height: 48.0, ), new Expanded( child: _createButtonText('Sign in with Google', Colors.white), ), ], ), ), ), ); }
What I want is that my button looks like the original Google button
And not like my version
Can anyone tell me how to create the original google button? Is there a better way than creating a
RaisedButton
? -
kuemme01 over 2 yearsWouldn't conform to the guidelines like this: developers.google.com/identity/branding-guidelines?hl=en
-
CopsOnRoad over 2 years@kuemme01 That's why I mentioned to use your own asset there.