Skip to content

Commit f19ecdd

Browse files
syedaniqsyedaniq
authored
[image_picker] redesign example app (#9625)
Replace default `FloatingActionButton`s with `FloatingActionButton.extended` to add text labels describing each button's action fixes flutter/flutter#165888 | before | after | | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | | <img width="1320" height="2868" alt="image" src="https://github.com/user-attachments/assets/87a9bce0-3e43-4ac5-b9c7-1567218b566c" /> | <img width="1320" height="2868" alt="image" src="https://github.com/user-attachments/assets/d470d991-8264-4016-a06c-b10dd191a3f3" /> | | ## Pre-Review Checklist [^1]: Regular contributors who have demonstrated familiarity with the repository guidelines only need to comment if the PR is not auto-exempted by repo tooling.
1 parent e2c7222 commit f19ecdd

File tree

5 files changed

+116
-75
lines changed

5 files changed

+116
-75
lines changed

‎packages/image_picker/image_picker_android/example/lib/main.dart

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -336,7 +336,8 @@ class _MyHomePageState extends State<MyHomePage> {
336336
appBar: AppBar(
337337
title: Text(widget.title!),
338338
),
339-
body: Center(
339+
body: Align(
340+
alignment: Alignment.topCenter,
340341
child: !kIsWeb && defaultTargetPlatform == TargetPlatform.android
341342
? FutureBuilder<void>(
342343
future: retrieveLostData(),
@@ -372,20 +373,21 @@ class _MyHomePageState extends State<MyHomePage> {
372373
children: <Widget>[
373374
Semantics(
374375
label: 'image_picker_example_from_gallery',
375-
child: FloatingActionButton(
376+
child: FloatingActionButton.extended(
376377
key: const Key('image_picker_example_from_gallery'),
377378
onPressed: () {
378379
_isVideo = false;
379380
_onImageButtonPressed(ImageSource.gallery, context: context);
380381
},
381382
heroTag: 'image0',
382383
tooltip: 'Pick Image from gallery',
383-
child: const Icon(Icons.photo),
384+
label: const Text('Pick Image from gallery'),
385+
icon: const Icon(Icons.photo),
384386
),
385387
),
386388
Padding(
387389
padding: const EdgeInsets.only(top: 16.0),
388-
child: FloatingActionButton(
390+
child: FloatingActionButton.extended(
389391
onPressed: () {
390392
_isVideo = false;
391393
_onImageButtonPressed(
@@ -397,12 +399,13 @@ class _MyHomePageState extends State<MyHomePage> {
397399
},
398400
heroTag: 'multipleMedia',
399401
tooltip: 'Pick Multiple Media from gallery',
400-
child: const Icon(Icons.photo_library),
402+
label: const Text('Pick Multiple Media from gallery'),
403+
icon: const Icon(Icons.photo_library),
401404
),
402405
),
403406
Padding(
404407
padding: const EdgeInsets.only(top: 16.0),
405-
child: FloatingActionButton(
408+
child: FloatingActionButton.extended(
406409
onPressed: () {
407410
_isVideo = false;
408411
_onImageButtonPressed(
@@ -413,12 +416,13 @@ class _MyHomePageState extends State<MyHomePage> {
413416
},
414417
heroTag: 'media',
415418
tooltip: 'Pick Single Media from gallery',
416-
child: const Icon(Icons.photo_library),
419+
label: const Text('Pick Single Media from gallery'),
420+
icon: const Icon(Icons.photo_library),
417421
),
418422
),
419423
Padding(
420424
padding: const EdgeInsets.only(top: 16.0),
421-
child: FloatingActionButton(
425+
child: FloatingActionButton.extended(
422426
onPressed: () {
423427
_isVideo = false;
424428
_onImageButtonPressed(
@@ -429,45 +433,49 @@ class _MyHomePageState extends State<MyHomePage> {
429433
},
430434
heroTag: 'image1',
431435
tooltip: 'Pick Multiple Image from gallery',
432-
child: const Icon(Icons.photo_library),
436+
label: const Text('Pick Multiple Image from gallery'),
437+
icon: const Icon(Icons.photo_library),
433438
),
434439
),
435440
Padding(
436441
padding: const EdgeInsets.only(top: 16.0),
437-
child: FloatingActionButton(
442+
child: FloatingActionButton.extended(
438443
onPressed: () {
439444
_isVideo = false;
440445
_onImageButtonPressed(ImageSource.camera, context: context);
441446
},
442447
heroTag: 'image2',
443448
tooltip: 'Take a Photo',
444-
child: const Icon(Icons.camera_alt),
449+
label: const Text('Take a Photo'),
450+
icon: const Icon(Icons.camera_alt),
445451
),
446452
),
447453
Padding(
448454
padding: const EdgeInsets.only(top: 16.0),
449-
child: FloatingActionButton(
455+
child: FloatingActionButton.extended(
450456
backgroundColor: Colors.red,
451457
onPressed: () {
452458
_isVideo = true;
453459
_onImageButtonPressed(ImageSource.gallery, context: context);
454460
},
455461
heroTag: 'video0',
456462
tooltip: 'Pick Video from gallery',
457-
child: const Icon(Icons.video_library),
463+
label: const Text('Pick Video from gallery'),
464+
icon: const Icon(Icons.video_library),
458465
),
459466
),
460467
Padding(
461468
padding: const EdgeInsets.only(top: 16.0),
462-
child: FloatingActionButton(
469+
child: FloatingActionButton.extended(
463470
backgroundColor: Colors.red,
464471
onPressed: () {
465472
_isVideo = true;
466473
_onImageButtonPressed(ImageSource.camera, context: context);
467474
},
468475
heroTag: 'video1',
469476
tooltip: 'Take a Video',
470-
child: const Icon(Icons.videocam),
477+
label: const Text('Take a Video'),
478+
icon: const Icon(Icons.videocam),
471479
),
472480
),
473481
],

‎packages/image_picker/image_picker_ios/example/lib/main.dart

Lines changed: 24 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -284,28 +284,31 @@ class _MyHomePageState extends State<MyHomePage> {
284284
appBar: AppBar(
285285
title: Text(widget.title!),
286286
),
287-
body: Center(
287+
body: Align(
288+
alignment: Alignment.topCenter,
288289
child: _handlePreview(),
289290
),
290291
floatingActionButton: Column(
291292
mainAxisAlignment: MainAxisAlignment.end,
293+
crossAxisAlignment: CrossAxisAlignment.end,
292294
children: <Widget>[
293295
Semantics(
294296
label: 'image_picker_example_from_gallery',
295-
child: FloatingActionButton(
297+
child: FloatingActionButton.extended(
296298
key: const Key('image_picker_example_from_gallery'),
297299
onPressed: () {
298300
_isVideo = false;
299301
_onImageButtonPressed(ImageSource.gallery, context: context);
300302
},
301303
heroTag: 'image0',
302304
tooltip: 'Pick Image from gallery',
303-
child: const Icon(Icons.photo),
305+
label: const Text('Pick Image from gallery'),
306+
icon: const Icon(Icons.photo),
304307
),
305308
),
306309
Padding(
307310
padding: const EdgeInsets.only(top: 16.0),
308-
child: FloatingActionButton(
311+
child: FloatingActionButton.extended(
309312
onPressed: () {
310313
_isVideo = false;
311314
_onImageButtonPressed(
@@ -317,12 +320,13 @@ class _MyHomePageState extends State<MyHomePage> {
317320
},
318321
heroTag: 'multipleMedia',
319322
tooltip: 'Pick Multiple Media from gallery',
320-
child: const Icon(Icons.photo_library),
323+
label: const Text('Pick Multiple Media from gallery'),
324+
icon: const Icon(Icons.photo_library),
321325
),
322326
),
323327
Padding(
324328
padding: const EdgeInsets.only(top: 16.0),
325-
child: FloatingActionButton(
329+
child: FloatingActionButton.extended(
326330
onPressed: () {
327331
_isVideo = false;
328332
_onImageButtonPressed(
@@ -333,12 +337,13 @@ class _MyHomePageState extends State<MyHomePage> {
333337
},
334338
heroTag: 'media',
335339
tooltip: 'Pick Single Media from gallery',
336-
child: const Icon(Icons.photo_library),
340+
label: const Text('Pick Single Media from gallery'),
341+
icon: const Icon(Icons.photo_library),
337342
),
338343
),
339344
Padding(
340345
padding: const EdgeInsets.only(top: 16.0),
341-
child: FloatingActionButton(
346+
child: FloatingActionButton.extended(
342347
onPressed: () {
343348
_isVideo = false;
344349
_onImageButtonPressed(
@@ -349,45 +354,49 @@ class _MyHomePageState extends State<MyHomePage> {
349354
},
350355
heroTag: 'image1',
351356
tooltip: 'Pick Multiple Image from gallery',
352-
child: const Icon(Icons.photo_library),
357+
label: const Text('Pick Multiple Image from gallery'),
358+
icon: const Icon(Icons.photo_library),
353359
),
354360
),
355361
Padding(
356362
padding: const EdgeInsets.only(top: 16.0),
357-
child: FloatingActionButton(
363+
child: FloatingActionButton.extended(
358364
onPressed: () {
359365
_isVideo = false;
360366
_onImageButtonPressed(ImageSource.camera, context: context);
361367
},
362368
heroTag: 'image2',
363369
tooltip: 'Take a Photo',
364-
child: const Icon(Icons.camera_alt),
370+
label: const Text('Take a Photo'),
371+
icon: const Icon(Icons.camera_alt),
365372
),
366373
),
367374
Padding(
368375
padding: const EdgeInsets.only(top: 16.0),
369-
child: FloatingActionButton(
376+
child: FloatingActionButton.extended(
370377
backgroundColor: Colors.red,
371378
onPressed: () {
372379
_isVideo = true;
373380
_onImageButtonPressed(ImageSource.gallery, context: context);
374381
},
375382
heroTag: 'video0',
376383
tooltip: 'Pick Video from gallery',
377-
child: const Icon(Icons.video_library),
384+
label: const Text('Pick Video from gallery'),
385+
icon: const Icon(Icons.video_library),
378386
),
379387
),
380388
Padding(
381389
padding: const EdgeInsets.only(top: 16.0),
382-
child: FloatingActionButton(
390+
child: FloatingActionButton.extended(
383391
backgroundColor: Colors.red,
384392
onPressed: () {
385393
_isVideo = true;
386394
_onImageButtonPressed(ImageSource.camera, context: context);
387395
},
388396
heroTag: 'video1',
389397
tooltip: 'Take a Video',
390-
child: const Icon(Icons.videocam),
398+
label: const Text('Take a Video'),
399+
icon: const Icon(Icons.videocam),
391400
),
392401
),
393402
],

‎packages/image_picker/image_picker_linux/example/lib/main.dart

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -277,28 +277,30 @@ class _MyHomePageState extends State<MyHomePage> {
277277
appBar: AppBar(
278278
title: Text(widget.title!),
279279
),
280-
body: Center(
280+
body: Align(
281+
alignment: Alignment.topCenter,
281282
child: _handlePreview(),
282283
),
283284
floatingActionButton: Column(
284285
mainAxisAlignment: MainAxisAlignment.end,
285286
children: <Widget>[
286287
Semantics(
287288
label: 'image_picker_example_from_gallery',
288-
child: FloatingActionButton(
289+
child: FloatingActionButton.extended(
289290
key: const Key('image_picker_example_from_gallery'),
290291
onPressed: () {
291292
_isVideo = false;
292293
_onImageButtonPressed(ImageSource.gallery, context: context);
293294
},
294295
heroTag: 'image0',
295296
tooltip: 'Pick Image from gallery',
296-
child: const Icon(Icons.photo),
297+
label: const Text('Pick Image from gallery'),
298+
icon: const Icon(Icons.photo),
297299
),
298300
),
299301
Padding(
300302
padding: const EdgeInsets.only(top: 16.0),
301-
child: FloatingActionButton(
303+
child: FloatingActionButton.extended(
302304
onPressed: () {
303305
_isVideo = false;
304306
_onImageButtonPressed(
@@ -310,12 +312,13 @@ class _MyHomePageState extends State<MyHomePage> {
310312
},
311313
heroTag: 'multipleMedia',
312314
tooltip: 'Pick Multiple Media from gallery',
313-
child: const Icon(Icons.photo_library),
315+
label: const Text('Pick Multiple Media from gallery'),
316+
icon: const Icon(Icons.photo_library),
314317
),
315318
),
316319
Padding(
317320
padding: const EdgeInsets.only(top: 16.0),
318-
child: FloatingActionButton(
321+
child: FloatingActionButton.extended(
319322
onPressed: () {
320323
_isVideo = false;
321324
_onImageButtonPressed(
@@ -326,12 +329,13 @@ class _MyHomePageState extends State<MyHomePage> {
326329
},
327330
heroTag: 'media',
328331
tooltip: 'Pick Single Media from gallery',
329-
child: const Icon(Icons.photo_library),
332+
label: const Text('Pick Single Media from gallery'),
333+
icon: const Icon(Icons.photo_library),
330334
),
331335
),
332336
Padding(
333337
padding: const EdgeInsets.only(top: 16.0),
334-
child: FloatingActionButton(
338+
child: FloatingActionButton.extended(
335339
onPressed: () {
336340
_isVideo = false;
337341
_onImageButtonPressed(
@@ -342,47 +346,51 @@ class _MyHomePageState extends State<MyHomePage> {
342346
},
343347
heroTag: 'image1',
344348
tooltip: 'Pick Multiple Image from gallery',
345-
child: const Icon(Icons.photo_library),
349+
label: const Text('Pick Multiple Image from gallery'),
350+
icon: const Icon(Icons.photo_library),
346351
),
347352
),
348353
if (_picker.supportsImageSource(ImageSource.camera))
349354
Padding(
350355
padding: const EdgeInsets.only(top: 16.0),
351-
child: FloatingActionButton(
356+
child: FloatingActionButton.extended(
352357
onPressed: () {
353358
_isVideo = false;
354359
_onImageButtonPressed(ImageSource.camera, context: context);
355360
},
356361
heroTag: 'image2',
357362
tooltip: 'Take a Photo',
358-
child: const Icon(Icons.camera_alt),
363+
label: const Text('Take a Photo'),
364+
icon: const Icon(Icons.camera_alt),
359365
),
360366
),
361367
Padding(
362368
padding: const EdgeInsets.only(top: 16.0),
363-
child: FloatingActionButton(
369+
child: FloatingActionButton.extended(
364370
backgroundColor: Colors.red,
365371
onPressed: () {
366372
_isVideo = true;
367373
_onImageButtonPressed(ImageSource.gallery, context: context);
368374
},
369375
heroTag: 'video0',
370376
tooltip: 'Pick Video from gallery',
371-
child: const Icon(Icons.video_library),
377+
label: const Text('Pick Video from gallery'),
378+
icon: const Icon(Icons.video_library),
372379
),
373380
),
374381
if (_picker.supportsImageSource(ImageSource.camera))
375382
Padding(
376383
padding: const EdgeInsets.only(top: 16.0),
377-
child: FloatingActionButton(
384+
child: FloatingActionButton.extended(
378385
backgroundColor: Colors.red,
379386
onPressed: () {
380387
_isVideo = true;
381388
_onImageButtonPressed(ImageSource.camera, context: context);
382389
},
383390
heroTag: 'video1',
384391
tooltip: 'Take a Video',
385-
child: const Icon(Icons.videocam),
392+
label: const Text('Take a Video'),
393+
icon: const Icon(Icons.videocam),
386394
),
387395
),
388396
],

0 commit comments

Comments
 (0)