Создать кнопку Войти через Google в Flutter в соответствии с условиями

Question

Я хочу добавить кнопку «Войти через Google» в свое приложение Flutter.Эта кнопка должна соответствовать условиям 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

И не как моя версия

Может кто-нибудь сказать мне, как создатьоригинальная кнопка гугл?Есть ли лучший способ, чем создать RaisedButton?

Answer 1

Вы можете использовать свойство Padding поднятой кнопки, а также использовать свойство виджета Row и mainAxisSize кнопки.Следующий код может помочь вам понять.

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

Answer 2

Я создал пакет flutter_auth_buttons , чтобы предложить растущую коллекцию кнопок для различных социальных сетей.

Он включает в себя светлые и темные версии кнопки Google:

(извините за мелкие скриншоты, они действительно выглядят четкими и четкими в приложении Flutter).

Answer 3

RaisedButton обеспечивает заполнение по умолчанию 16.0 слева.Вы можете заменить свои RaisedButton на GestureDetector и Container и присвоить им onTap() и обработать поведение.Вы также можете использовать InkWell, чтобы показать волновой эффект.