根据条款在Flutter中创建“使用Google登录”按钮

Question

我想在Flutter应用中添加一个“使用Google登录”按钮。此按钮应符合Google 的条款。

我的问题是，我创建的按钮看起来真的很糟糕。

我使用了Google在其网站上提供的图像，但不知道我是否正确地使用了按钮的代码。

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

我想要的是我的按钮看起来像原始的Google按钮

而且不喜欢我的版本

谁能告诉我如何创建原始的Google按钮？有没有比创建一个更好的方法RaisedButton？

Answer 1

pub.dev上有一个非常棒的软件包，名为flutter_signin_button。

您可以使用它，它有登录按钮

• 电子邮件
• 谷歌
• Facebook
• GitHub
• 领英
• 兴趣
• 豆瓣
• 推特
• 苹果

有一些支持黑暗模式还有迷你按钮！

首先将其添加到您的pubspec.yaml

dependencies:
  ...
  flutter_signin_button:

然后将其导入到您的文件中：

import 'package:flutter_signin_button/flutter_signin_button.dart';

并使用这样的按钮：

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

这是所有按钮的预览：

Answer 2

我创建了flutter_auth_buttons 包，以为各种社交网络提供越来越多的按钮集合。

它包括Google按钮的明暗版本：

（请原谅颗粒状的屏幕截图，它们实际上在Flutter应用中看起来清晰清晰）。

Answer 3

我给你一个总体思路，使用你的 Google 图像替换 Android 图标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'),
        ],
      ),
    ),
  ),
)