[image_picker] Adopt code excerpts in README (#5523)

Improves image_picker_for_web README example and updates it to use code excerpts.

Part of [flutter/flutter#102679](flutter/flutter#102679)

Author: mike-v2

packages/image_picker/image_picker_for_web/CHANGELOG.md

@@ -1,3 +1,7 @@
+## 3.0.4
+
+* Improves README example and updates it to use code excerpts.
+
 ## 3.0.3
 
 * Migrates package and tests to `package:web`.

packages/image_picker/image_picker_for_web/README.md

@@ -76,22 +76,20 @@ The instance will also let you retrieve the bytes of the selected file across al
 
 If you want to use the path directly, your code would need look like this:
 
+<?code-excerpt "example/lib/readme_excerpts.dart (ImageFromPath)"?>
 ```dart
-...
 if (kIsWeb) {
-  Image.network(pickedFile.path);
+  image = Image.network(pickedFile.path);
 } else {
-  Image.file(File(pickedFile.path));
+  image = Image.file(File(pickedFile.path));
 }
-...
 ```
 
 Or, using bytes:
 
+<?code-excerpt "example/lib/readme_excerpts.dart (ImageFromBytes)"?>
 ```dart
-...
-Image.memory(await pickedFile.readAsBytes())
-...
+image = Image.memory(await pickedFile.readAsBytes());
 ```
 
 [1]: https://pub.dev/packages/image_picker

packages/image_picker/image_picker_for_web/example/integration_test/readme_excerpts_test.dart

@@ -0,0 +1,65 @@
+// 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:convert';
+import 'dart:typed_data';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:image_picker_for_web_integration_tests/readme_excerpts.dart';
+import 'package:image_picker_platform_interface/image_picker_platform_interface.dart';
+import 'package:integration_test/integration_test.dart';
+
+void main() {
+  IntegrationTestWidgetsFlutterBinding.ensureInitialized();
+
+  testWidgets('getImageFromPath loads image from XFile path',
+      (WidgetTester tester) async {
+    final XFile file = createXFileWeb();
+
+    // Use the excerpt code to get an Image from the XFile path.
+    final Image image = getImageFromPath(file);
+
+    await pumpImage(tester, image);
+
+    // Check if Image widget is present.
+    expect(find.byType(Image), findsOneWidget);
+  });
+
+  testWidgets('getImageFromBytes loads image from XFile bytes',
+      (WidgetTester tester) async {
+    final XFile file = createXFileWeb();
+
+    // Use the excerpt code to get an Image from the XFile byte data.
+    final Image image = await getImageFromBytes(file);
+
+    await pumpImage(tester, image);
+
+    // Check if Image widget is present.
+    expect(find.byType(Image), findsOneWidget);
+  });
+}
+
+/// Creates an XFile with a 1x1 png file.
+XFile createXFileWeb() {
+  const String pixel = 'iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR'
+      '42mNk+A8AAQUBAScY42YAAAAASUVORK5CYII=';
+  final Uint8List data = base64Decode(pixel);
+  return XFile.fromData(
+    data,
+    name: 'identity.png',
+    mimeType: 'image/png',
+    lastModified: DateTime.now(),
+  );
+}
+
+/// Pumps an [image] widget into a [tester].
+Future<void> pumpImage(WidgetTester tester, Image image) async {
+  await tester.pumpWidget(MaterialApp(
+    home: Scaffold(
+      body: image,
+    ),
+  ));
+}

packages/image_picker/image_picker_for_web/example/lib/readme_excerpts.dart

@@ -0,0 +1,35 @@
+// 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:io';
+
+import 'package:flutter/foundation.dart';
+import 'package:flutter/widgets.dart';
+import 'package:image_picker_platform_interface/image_picker_platform_interface.dart';
+
+/// Demonstrates creating an Image widget from an XFile's path.
+Image getImageFromPath(XFile pickedFile) {
+  final Image image;
+
+// #docregion ImageFromPath
+  if (kIsWeb) {
+    image = Image.network(pickedFile.path);
+  } else {
+    image = Image.file(File(pickedFile.path));
+  }
+// #enddocregion ImageFromPath
+
+  return image;
+}
+
+/// Demonstrates creating an Image widget from an XFile's bytes.
+Future<Image> getImageFromBytes(XFile pickedFile) async {
+  final Image image;
+
+// #docregion ImageFromBytes
+  image = Image.memory(await pickedFile.readAsBytes());
+// #enddocregion ImageFromBytes
+
+  return image;
+}

packages/image_picker/image_picker_for_web/pubspec.yaml

@@ -2,7 +2,7 @@ name: image_picker_for_web
 description: Web platform implementation of image_picker
 repository: https://github.com/flutter/packages/tree/main/packages/image_picker/image_picker_for_web
 issue_tracker: https://github.com/flutter/flutter/issues?q=is%3Aissue+is%3Aopen+label%3A%22p%3A+image_picker%22
-version: 3.0.3
+version: 3.0.4
 
 environment:
   sdk: ^3.3.0

script/configs/temp_exclude_excerpt.yaml

@@ -7,7 +7,6 @@
 # https://github.com/flutter/flutter/issues/102679
 - espresso
 - go_router_builder
-- image_picker_for_web
 - in_app_purchase/in_app_purchase
 - palette_generator
 - pointer_interceptor