From dff703f09f3b6acbd68143dd815bf90c0e4c3fbb Mon Sep 17 00:00:00 2001
From: Greg Spencer <gspencergoog@users.noreply.github.com>
Date: Wed, 23 Jun 2021 19:36:58 -0700
Subject: [PATCH] Update GestureDetector docs to use DartPad sample (#85148)

This removes the broken video for GestureDetector, and replaces it with a Dartpad sample, for both samples in GestureDetector.
---
 .../lib/src/widgets/gesture_detector.dart     | 116 ++++++++++--------
 1 file changed, 65 insertions(+), 51 deletions(-)

diff --git a/packages/flutter/lib/src/widgets/gesture_detector.dart b/packages/flutter/lib/src/widgets/gesture_detector.dart
index f8d8173810..d9caf37b8f 100644
--- a/packages/flutter/lib/src/widgets/gesture_detector.dart
+++ b/packages/flutter/lib/src/widgets/gesture_detector.dart
@@ -127,67 +127,81 @@ class GestureRecognizerFactoryWithHandlers<T extends GestureRecognizer> extends
 /// effects. The [InkWell] class implements this effect and can be used in place
 /// of a [GestureDetector] for handling taps.
 ///
-/// {@animation 200 150 https://flutter.github.io/assets-for-api-docs/assets/widgets/gesture_detector.mp4}
+/// {@tool dartpad --template=stateful_widget_material}
 ///
-/// {@tool snippet}
-///
-/// This example of a [Container] contains a black light bulb wrapped in a [GestureDetector].
-/// It turns the light bulb yellow when the "turn lights on" button is tapped
-/// by setting the `_lights` field. Above animation shows the code in use:
+/// This example contains a black light bulb wrapped in a [GestureDetector]. It
+/// turns the light bulb yellow when the "TURN LIGHT ON" button is tapped by
+/// setting the `_lights` field, and off again when "TURN LIGHT OFF" is tapped.
 ///
 /// ```dart
-/// Container(
-///   alignment: FractionalOffset.center,
-///   color: Colors.white,
-///   child: Column(
-///     mainAxisAlignment: MainAxisAlignment.center,
-///     children: <Widget>[
-///       Padding(
-///         padding: const EdgeInsets.all(8.0),
-///         child: Icon(
-///           Icons.lightbulb_outline,
-///           color: _lights ? Colors.yellow.shade600 : Colors.black,
-///           size: 60,
-///         ),
+/// bool _lightIsOn = false;
+///
+/// @override
+/// Widget build(BuildContext context) {
+///   return Scaffold(
+///     body: Container(
+///       alignment: FractionalOffset.center,
+///       child: Column(
+///         mainAxisAlignment: MainAxisAlignment.center,
+///         children: <Widget>[
+///           Padding(
+///             padding: const EdgeInsets.all(8.0),
+///             child: Icon(
+///               Icons.lightbulb_outline,
+///               color: _lightIsOn ? Colors.yellow.shade600 : Colors.black,
+///               size: 60,
+///             ),
+///           ),
+///           GestureDetector(
+///             onTap: () {
+///               setState(() {
+///                 // Toggle light when tapped.
+///                 _lightIsOn = !_lightIsOn;
+///               });
+///             },
+///             child: Container(
+///               color: Colors.yellow.shade600,
+///               padding: const EdgeInsets.all(8),
+///               // Change button text when light changes state.
+///               child: Text(_lightIsOn ? 'TURN LIGHT OFF' : 'TURN LIGHT ON'),
+///             ),
+///           ),
+///         ],
 ///       ),
-///       GestureDetector(
-///         onTap: () {
-///           setState(() {
-///             _lights = true;
-///           });
-///         },
-///         child: Container(
-///           color: Colors.yellow.shade600,
-///           padding: const EdgeInsets.all(8),
-///           child: const Text('TURN LIGHTS ON'),
-///         ),
-///       ),
-///     ],
-///   ),
-/// )
+///     ),
+///   );
+/// }
 /// ```
 /// {@end-tool}
 ///
-/// {@tool snippet}
+/// {@tool dartpad --template=stateful_widget_material}
 ///
-/// This example of a [Container] wraps a [GestureDetector] widget.
-/// Since the [GestureDetector] does not have a child it takes on the size of
-/// its parent making the entire area of the surrounding [Container] clickable.
-/// When tapped the [Container] turns yellow by setting the `_color` field:
+/// This example uses a [Container] that wraps a [GestureDetector] widget which
+/// detects a tap.
+///
+/// Since the [GestureDetector] does not have a child, it takes on the size of its
+/// parent, making the entire area of the surrounding [Container] clickable. When
+/// tapped, the [Container] turns yellow by setting the `_color` field. When
+/// tapped again, it goes back to white.
 ///
 /// ```dart
-/// Container(
-///   color: _color,
-///   height: 200.0,
-///   width: 200.0,
-///   child: GestureDetector(
-///     onTap: () {
-///       setState(() {
-///         _color = Colors.yellow;
-///       });
-///     },
-///   ),
-/// )
+/// Color _color = Colors.white;
+///
+/// @override
+/// Widget build(BuildContext context) {
+///   return Container(
+///     color: _color,
+///     height: 200.0,
+///     width: 200.0,
+///     child: GestureDetector(
+///       onTap: () {
+///         setState(() {
+///           _color == Colors.yellow ? _color = Colors.white : _color = Colors.yellow;
+///         });
+///       },
+///     ),
+///   );
+/// }
 /// ```
 /// {@end-tool}
 ///