'Create Sign-in-with-Google button in Flutter in accordance with the terms

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?

Solution 1:^[1]

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),)
            ),
          ],
        )
      ),
    ),

Solution 2:^[2]

use this one

      child: InkWell(
        onTap: () {},
        child: Container(
          height: 50,
          width: CustomWidth(context) - 100,
          color: Colors.blueAccent,
          child: Row(
            children: [
              Container(
                margin: EdgeInsets.symmetric(horizontal: 3),
                height: 45,
                width: 50,
                decoration: BoxDecoration(
                    color: Colors.white,
                    image: DecorationImage(
                        image: NetworkImage("https://cdn-icons-png.flaticon.com/512/2991/2991148.png"))),
              ),
              SizedBox(
                width: 10,
              ),
              DefaultTextView(
                text: "SignUp With Google",
                color: AppColors.whiteColor,
                fontweight: FontWeight.bold,
              )
            ],
          ),
        ),
      ),

Solution 3:^[3]

There Is A Pretty Awesome Package Called flutter_signin_button on pub.dev.

You Can Use It It Has Sign In Buttons For

Email
Google
Facebook
GitHub
LinkedIn
Pinterest
Tumblr
Twitter
Apple

With Some Supporting Dark Mode Also With Mini Buttons!

First Add It To Your pubspec.yaml

dependencies:
  ...
  flutter_signin_button:

then import it into your file:

import 'package:flutter_signin_button/flutter_signin_button.dart';

and use the buttons like this:

SignInButton(
  Buttons.Google,
  onPressed: () {},
)

Here Is A Preview Of All The Buttons:

Solution 4:^[4]

For google logo image on white background and raised button with blue background:

Container(
          margin: EdgeInsets.fromLTRB(30.0, 5.0, 30.0, 5.0),
          child: new RaisedButton(
              padding: EdgeInsets.all(1.0),
              color: const Color(0xff4285F4),
              onPressed: () async {
                _signInWithGoogle();
              },
              child: new Row(
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Container(
                    padding: EdgeInsets.all(8.0),
                    decoration: BoxDecoration(
                      color: Colors.white,
                    ),
                    child: Image.asset(
                      Images.googleLogo,
                      height: 18.0,
                    ),
                  ),
                  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),
                      )),
                ],
              )),
        ),

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Viren V Varasadiya
Solution 2	Muhammad Imtiaz
Solution 3	Adison Masih
Solution 4	Ian Pinto

'Create Sign-in-with-Google button in Flutter in accordance with the terms

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]

Solution 4:^[4]