Changes GoogleUserCircleAvatar to fade the profile image in over the … (#223)

... top of the placeholder.

Author: tvolkert

packages/google_sign_in/CHANGELOG.md

@@ -1,3 +1,8 @@
+## 1.0.0
+
+* Make GoogleUserCircleAvatar fade profile image over the top of placeholder
+* Bump to released version
+
 ## 0.3.1
 
 * Updated GMS to always use latest patch version for 11.0.x builds

packages/google_sign_in/lib/widgets.dart

@@ -2,6 +2,8 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
+import 'dart:typed_data';
+
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -61,8 +63,14 @@ class GoogleUserCircleAvatar extends StatelessWidget {
 
   /// Adds sizing information to [photoUrl], inserted as the last path segment
   /// before the image filename. The format is described in [sizeDirective].
+  ///
+  /// Falls back to the default profile photo if [photoUrl] is [null].
   static String _sizedProfileImageUrl(String photoUrl, double size) {
-    assert(photoUrl != null);
+    if (photoUrl == null) {
+      // If the user has no profile photo and no display name, fall back to
+      // the default profile photo as a last resort.
+      return 'https://lh3.googleusercontent.com/a/default-user=s${size.round()}-c';
+    }
     final Uri profileUri = Uri.parse(photoUrl);
     final List<String> pathSegments =
         new List<String>.from(profileUri.pathSegments);
@@ -80,30 +88,46 @@ class GoogleUserCircleAvatar extends StatelessWidget {
   Widget _buildClippedImage(BuildContext context, BoxConstraints constraints) {
     assert(constraints.maxWidth == constraints.maxHeight);
 
-    String photoUrl = identity.photoUrl ?? placeholderPhotoUrl;
-    if (photoUrl == null &&
-        identity.displayName != null &&
-        identity.displayName.startsWith(new RegExp(r'[A-Z][a-z]'))) {
-      // Display the user's initials rather than a profile photo.
-      return new Text(identity.displayName[0].toUpperCase());
+    // Placeholder to use when there is no photo URL, and while the photo is
+    // loading. Uses the first character of the display name (if it has one),
+    // or the first letter of the email address if it does not.
+    final List<String> placeholderCharSources = <String>[
+      identity.displayName,
+      identity.email,
+      '-',
+    ];
+    final String placeholderChar = placeholderCharSources
+        .firstWhere((String str) => str != null && str.trimLeft().isNotEmpty)
+        .trimLeft()[0]
+        .toUpperCase();
+    final Widget placeholder = new Center(
+      child: new Text(placeholderChar, textAlign: TextAlign.center),
+    );
+
+    final String photoUrl = identity.photoUrl ?? placeholderPhotoUrl;
+    if (photoUrl == null) {
+      return placeholder;
     }
 
-    // Add a sizing directive to the profile photo URL if we have one.
+    // Add a sizing directive to the profile photo URL.
     final double size =
         MediaQuery.of(context).devicePixelRatio * constraints.maxWidth;
-    if (photoUrl != null) {
-      photoUrl = _sizedProfileImageUrl(photoUrl, size);
-    }
+    final String sizedPhotoUrl = _sizedProfileImageUrl(photoUrl, size);
 
-    // If the user has no profile photo and no display name, fall back to
-    // the default profile photo as a last resort.
-    photoUrl ??=
-        'https://lh3.googleusercontent.com/a/default-user=s${size.round()}-c';
-
-    return new ClipOval(
-      child: new Image(
-        image: new NetworkImage(photoUrl),
-      ),
-    );
+    // Fade the photo in over the top of the placeholder.
+    return new SizedBox(
+        width: size,
+        height: size,
+        child: new ClipOval(
+          child: new Stack(fit: StackFit.expand, children: <Widget>[
+            placeholder,
+            new FadeInImage.memoryNetwork(
+              // This creates a transparent placeholder image, so that
+              // [placeholder] shows through.
+              placeholder: new Uint8List((size.round() * size.round())),
+              image: sizedPhotoUrl,
+            )
+          ]),
+        ));
   }
 }

packages/google_sign_in/pubspec.yaml

@@ -3,7 +3,7 @@ name: google_sign_in
 description: Google Sign-In plugin for Flutter.
 author: Flutter Team <flutter-dev@googlegroups.com>
 homepage: https://github.com/flutter/plugins/tree/master/packages/google_sign_in
-version: 0.3.1
+version: 1.0.0
 
 flutter:
   plugin: