Line data    Source code

       1             : import 'package:flutter/material.dart';
       2             : 
       3             : import '../../../shared/widgets/stretchable_button.dart';
       4             : 
       5             : /// A sign in button that matches Google's design guidelines.
       6             : ///
       7             : /// The button text can be overridden, however the default text is recommended
       8             : /// in order to be compliant with the design guidelines and to maximise
       9             : /// conversion.
      10             : class GoogleSignInButton extends StatelessWidget {
      11             :   final String text;
      12             :   final TextStyle? textStyle;
      13             :   final bool darkMode;
      14             :   final double borderRadius;
      15             :   final VoidCallback? onPressed;
      16             :   final Color? splashColor;
      17             :   final bool centered;
      18             : 
      19             :   /// Creates a new button. Set [darkMode] to `true` to use the dark
      20             :   /// blue background variant with white text, otherwise an all-white background
      21             :   /// with dark text is used.
      22           0 :   const GoogleSignInButton(
      23             :       {this.onPressed,
      24             :       this.text = 'Sign in with Google',
      25             :       this.textStyle,
      26             :       this.splashColor,
      27             :       this.darkMode = false,
      28             :       // Google doesn't specify a border radius, but this looks about right.
      29             :       this.borderRadius = defaultBorderRadius,
      30             :       this.centered = false,
      31             :       Key? key})
      32           0 :       : super(key: key);
      33             : 
      34           0 :   @override
      35             :   Widget build(BuildContext context) {
      36           0 :     return StretchableButton(
      37           0 :       buttonColor: darkMode ? const Color(0xFF4285F4) : Colors.white,
      38           0 :       borderRadius: borderRadius,
      39           0 :       splashColor: splashColor,
      40           0 :       onPressed: onPressed,
      41             :       buttonPadding: 0.0,
      42           0 :       centered: centered,
      43           0 :       children: <Widget>[
      44             :         // The Google design guidelines aren't consistent. The dark mode
      45             :         // seems to have a perfect square of white around the logo, with a
      46             :         // thin 1dp (ish) border. However, since the height of the button
      47             :         // is 40dp and the logo is 18dp, it suggests the bottom and top
      48             :         // padding is (40 - 18) * 0.5 = 11. That's 10dp once we account for
      49             :         // the thin border.
      50             :         //
      51             :         // The design guidelines suggest 8dp padding to the left of the
      52             :         // logo, which doesn't allow us to center the image (given the 10dp
      53             :         // above). Something needs to give - either the 8dp is wrong or the
      54             :         // 40dp should be 36dp. I've opted to increase left padding to 10dp.
      55           0 :         Padding(
      56             :           padding: const EdgeInsets.all(1.0),
      57           0 :           child: Container(
      58             :             height: 38.0, // 40dp - 2*1dp border
      59             :             width: 38.0, // matches above
      60           0 :             decoration: BoxDecoration(
      61           0 :               color: darkMode ? Colors.white : null,
      62           0 :               borderRadius: BorderRadius.circular(borderRadius),
      63             :             ),
      64             :             child: const Center(
      65             :               child: Image(
      66             :                 image: AssetImage('assets/google.png', package: 'redfire'),
      67             :                 height: 18.0,
      68             :                 width: 18.0,
      69             :               ),
      70             :             ),
      71             :           ),
      72             :         ),
      73             : 
      74             :         const SizedBox(width: 14.0 /* 24.0 - 10dp padding */),
      75           0 :         Padding(
      76             :           padding: const EdgeInsets.fromLTRB(0.0, 8.0, 8.0, 8.0),
      77           0 :           child: Text(
      78           0 :             text,
      79           0 :             style: textStyle ??
      80           0 :                 TextStyle(
      81             :                   fontSize: 18.0,
      82             :                   fontFamily: 'Roboto',
      83             :                   fontWeight: FontWeight.w500,
      84             :                   color:
      85           0 :                       darkMode ? Colors.white : Colors.black.withOpacity(0.54),
      86             :                 ),
      87             :           ),
      88             :         ),
      89             :       ],
      90             :     );
      91             :   }
      92             : }