-
Notifications
You must be signed in to change notification settings - Fork 9.7k
[google_sign_in] Use a transparent image as a placeholder for the GoogleUserCircleAvatar
#4391
Changes from 10 commits
dd83135
4ffd27f
8008688
8048451
75725ef
a54232d
9a9d6d4
b18a8e2
d25857f
316afbf
166822e
03c48da
bf0f524
1d2638a
4d17090
6c69b63
3291d1b
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -106,10 +106,59 @@ class GoogleUserCircleAvatar extends StatelessWidget { | |
FadeInImage.memoryNetwork( | ||
// This creates a transparent placeholder image, so that | ||
// [placeholder] shows through. | ||
placeholder: Uint8List((size.round() * size.round())), | ||
placeholder: _transparentImage, | ||
image: sizedPhotoUrl, | ||
) | ||
]), | ||
)); | ||
} | ||
} | ||
|
||
/// This is an transparent 1x1 gif image | ||
final Uint8List _transparentImage = Uint8List.fromList( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You should check in a script that generates this code and add a comment here pointing to it. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I'm sorry, I'm a bit confused and I don't understand what you want me to do? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Why? Under what circumstance would the bytes of a static image need to be re-generated? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Presumably a script was already written to generate it. Who knows, maybe there is a bug where the pixel is #000000FF but we need #FFFFFFFF, depending on alpha blending that can make a difference. Plus it means people don't need to execute the code to know it is correct. I don't know the gif header format. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Alternately, we could compare it byte by byte to the source, which would be significantly less work than reviewing (and then maintaining) a script. @ValentinVignal Can you add a comment with the URL of the source gif you used? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Good idea. So let's land the gif (maybe in a new package-level directory with a README explaining why it's there), and reference it in a comment in the code. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Hello, I'm sorry again, I'm still not clear on what I should do exactly. Let me try to reformulate and you tell me if I'm wrong? I should:
Did I miss something? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. No, you just need to add the source GIF to this PR. My suggestion is that it be in a subdirectory (e.g., There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @stuartmorgan @gaaclarke I couldn't remember where I took the image in the first place. In 4d17090, I used this one: from this wikimedia page. I added the image in the repo as I got the bytes by doing: final bytes = await File('resources/transparentImage.gif').readAsBytes(); Is it what you were requesting? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Yep, that sounds good to me, thanks! |
||
[ | ||
0x47, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can improve these data blobs by adding a E.g.:
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've formatter the data blobs in 166822e |
||
0x49, | ||
0x46, | ||
0x38, | ||
0x39, | ||
0x61, | ||
0x01, | ||
0x00, | ||
0x01, | ||
0x00, | ||
0x80, | ||
0x00, | ||
0x00, | ||
0xFF, | ||
0xFF, | ||
0xFF, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x21, | ||
0xF9, | ||
0x04, | ||
0x01, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x2C, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x01, | ||
0x00, | ||
0x01, | ||
0x00, | ||
0x00, | ||
0x02, | ||
0x02, | ||
0x44, | ||
0x01, | ||
0x00, | ||
0x3B, | ||
], | ||
); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,151 @@ | ||
// Copyright 2013 The Flutter Authors. 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:async'; | ||
import 'dart:io'; | ||
import 'dart:typed_data'; | ||
|
||
import 'package:flutter/material.dart'; | ||
import 'package:flutter_test/flutter_test.dart'; | ||
import 'package:google_sign_in/google_sign_in.dart'; | ||
|
||
/// A instantiable class that extends [GoogleIdentity] | ||
class _TestGoogleIdentity extends GoogleIdentity { | ||
_TestGoogleIdentity({ | ||
required this.id, | ||
required this.email, | ||
this.photoUrl, | ||
}); | ||
|
||
final String id; | ||
final String email; | ||
|
||
final String? photoUrl; | ||
|
||
@override | ||
String? get displayName => null; | ||
|
||
@override | ||
String? get serverAuthCode => null; | ||
} | ||
|
||
/// A mocked [HttpClient] which always returns a [_MockHttpRequest]. | ||
class _MockHttpClient extends Fake implements HttpClient { | ||
@override | ||
bool autoUncompress = true; | ||
|
||
@override | ||
Future<HttpClientRequest> getUrl(Uri url) { | ||
return Future<HttpClientRequest>.value(_MockHttpRequest()); | ||
} | ||
} | ||
|
||
/// A mocked [HttpClientRequest] which always returns a [_MockHttpClientResponse]. | ||
class _MockHttpRequest extends Fake implements HttpClientRequest { | ||
@override | ||
Future<HttpClientResponse> close() { | ||
return Future<HttpClientResponse>.value(_MockHttpResponse()); | ||
} | ||
} | ||
|
||
/// This is an transparent 1x1 gif image | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Please comment that this is just an arbitrary valid image, and that it's not important that it match the placeholder, since that confused me. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've tried to add a better comment in 03c48da |
||
final Uint8List _transparentImage = Uint8List.fromList( | ||
[ | ||
0x47, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same formatting note here. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I've formatter the data blobs in 166822e |
||
0x49, | ||
0x46, | ||
0x38, | ||
0x39, | ||
0x61, | ||
0x01, | ||
0x00, | ||
0x01, | ||
0x00, | ||
0x80, | ||
0x00, | ||
0x00, | ||
0xFF, | ||
0xFF, | ||
0xFF, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x21, | ||
0xF9, | ||
0x04, | ||
0x01, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x2C, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x00, | ||
0x01, | ||
0x00, | ||
0x01, | ||
0x00, | ||
0x00, | ||
0x02, | ||
0x02, | ||
0x44, | ||
0x01, | ||
0x00, | ||
0x3B, | ||
], | ||
); | ||
|
||
/// A mocked [HttpClientResponse] which is empty and has a [statusCode] of 200 | ||
/// and returns a 1x1 transparent image. | ||
stuartmorgan-g marked this conversation as resolved.
Show resolved
Hide resolved
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. s/1x1 transparent/valid/ since that's what matters. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I changed it in 03c48da |
||
class _MockHttpResponse extends Fake implements HttpClientResponse { | ||
final Stream<Uint8List> _delegate = | ||
Stream<Uint8List>.value(_transparentImage); | ||
|
||
@override | ||
int get contentLength => -1; | ||
|
||
@override | ||
HttpClientResponseCompressionState get compressionState { | ||
return HttpClientResponseCompressionState.decompressed; | ||
} | ||
|
||
@override | ||
StreamSubscription<Uint8List> listen(void Function(Uint8List event)? onData, | ||
{Function? onError, void Function()? onDone, bool? cancelOnError}) { | ||
return _delegate.listen(onData, | ||
onError: onError, onDone: onDone, cancelOnError: cancelOnError); | ||
} | ||
|
||
@override | ||
int get statusCode => 200; | ||
} | ||
|
||
void main() { | ||
testWidgets('It should build th GoogleUserCircleAvatar successfully', | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Typo: the There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. I have fixed the typo in bf0f524 |
||
(WidgetTester tester) async { | ||
final GoogleIdentity identity = _TestGoogleIdentity( | ||
email: '[email protected]', | ||
id: 'userId', | ||
photoUrl: 'photoUrl', | ||
); | ||
tester.binding.window.physicalSizeTestValue = Size(100, 100); | ||
|
||
await HttpOverrides.runZoned( | ||
() async { | ||
await tester.pumpWidget(MaterialApp( | ||
home: SizedBox( | ||
height: 100, | ||
width: 100, | ||
child: GoogleUserCircleAvatar( | ||
identity: identity, | ||
), | ||
), | ||
)); | ||
}, | ||
createHttpClient: (SecurityContext? c) => _MockHttpClient(), | ||
); | ||
}); | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nit: should have a "." at the end of the comment.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I added the "." in 03c48da