Stop passing State objects between widgets in LayoutExplorer

Replace passing FlexLayoutExplorerWidgetState to VisualizeFlexChildren
and FlexChildVisualizer with FlexLayoutExplorerScope, an InheritedWidget
providing rootProperties, animation controllers, and mutation/selection
callbacks.

Fixes #2701

Author: srawlins

packages/devtools_app/lib/src/screens/inspector/layout_explorer/flex/flex.dart

@@ -300,7 +300,6 @@ class FlexLayoutExplorerWidgetState
               ),
             ),
             child: VisualizeFlexChildren(
-              state: this,
               properties: propertiesLocal,
               children: children,
               highlighted: highlighted,
@@ -383,14 +382,22 @@ class FlexLayoutExplorerWidgetState
       ),
     );
 
-    return Container(
-      constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
-      child: Stack(
-        children: [
-          flexDescription,
-          verticalAxisDescription,
-          horizontalAxisDescription,
-        ],
+    return FlexLayoutExplorerScope(
+      rootProperties: propertiesLocal,
+      onTap: onTap,
+      onDoubleTap: onDoubleTap,
+      markAsDirty: markAsDirty,
+      entranceController: entranceController,
+      entranceCurve: entranceCurve,
+      child: Container(
+        constraints: BoxConstraints(maxWidth: maxWidth, maxHeight: maxHeight),
+        child: Stack(
+          children: [
+            flexDescription,
+            verticalAxisDescription,
+            horizontalAxisDescription,
+          ],
+        ),
       ),
     );
   }
@@ -405,7 +412,6 @@ class FlexLayoutExplorerWidgetState
 class VisualizeFlexChildren extends StatefulWidget {
   const VisualizeFlexChildren({
     super.key,
-    required this.state,
     required this.properties,
     required this.children,
     required this.highlighted,
@@ -418,7 +424,6 @@ class VisualizeFlexChildren extends StatefulWidget {
   final LayoutProperties? highlighted;
   final ScrollController scrollController;
   final Axis direction;
-  final FlexLayoutExplorerWidgetState state;
 
   @override
   State<VisualizeFlexChildren> createState() => _VisualizeFlexChildrenState();
@@ -499,7 +504,6 @@ class _VisualizeFlexChildrenState extends State<VisualizeFlexChildren> {
 
             final visualizer = FlexChildVisualizer(
               key: isSelected ? selectedChildKey : null,
-              state: widget.state,
               layoutProperties: child,
               isSelected: isSelected,
               renderProperties: renderProperties[i],
@@ -573,44 +577,39 @@ class _VisualizeFlexChildrenState extends State<VisualizeFlexChildren> {
 class FlexChildVisualizer extends StatelessWidget {
   const FlexChildVisualizer({
     super.key,
-    required this.state,
     required this.layoutProperties,
     required this.renderProperties,
     required this.isSelected,
   });
 
-  final FlexLayoutExplorerWidgetState state;
-
   final bool isSelected;
 
   final LayoutProperties layoutProperties;
 
   final RenderProperties renderProperties;
 
-  // TODO(polina-c, jacob314): consider refactoring to remove `!`.
-  FlexLayoutProperties get root => state.properties!;
-
   LayoutProperties get properties => renderProperties.layoutProperties;
 
   ObjectGroup? get objectGroup =>
       properties.node.objectGroupApi as ObjectGroup?;
 
-  void onChangeFlexFactor(int? newFlexFactor) async {
-    state.markAsDirty();
+  void _onChangeFlexFactor(int? newFlexFactor, VoidCallback markAsDirty) async {
+    markAsDirty();
     await objectGroup!.invokeSetFlexFactor(
       properties.node.valueRef,
       newFlexFactor,
     );
   }
 
-  void onChangeFlexFit(FlexFit? newFlexFit) async {
-    state.markAsDirty();
+  void _onChangeFlexFit(FlexFit? newFlexFit, VoidCallback markAsDirty) async {
+    markAsDirty();
     await objectGroup!.invokeSetFlexFit(properties.node.valueRef, newFlexFit!);
   }
 
   Widget _buildFlexFactorChangerDropdown(
     int maximumFlexFactor,
     ThemeData theme,
+    VoidCallback markAsDirty,
   ) {
     final propertiesLocal = properties;
 
@@ -632,7 +631,7 @@ class FlexChildVisualizer extends StatelessWidget {
 
     return DropdownButton<int>(
       value: propertiesLocal.flexFactor?.toInt().clamp(0, maximumFlexFactor),
-      onChanged: onChangeFlexFactor,
+      onChanged: (newFactor) => _onChangeFlexFactor(newFactor, markAsDirty),
       iconEnabledColor: textColor,
       underline: buildUnderline(),
       items: <DropdownMenuItem<int>>[
@@ -642,7 +641,10 @@ class FlexChildVisualizer extends StatelessWidget {
     );
   }
 
-  Widget _buildFlexFitChangerDropdown(ThemeData theme) {
+  Widget _buildFlexFitChangerDropdown(
+    ThemeData theme,
+    VoidCallback markAsDirty,
+  ) {
     Widget flexFitDescription(FlexFit flexFit) => Text(
       'fit: ${flexFit.name}',
       style: theme.regularTextStyleWithColor(emphasizedTextColor),
@@ -664,7 +666,7 @@ class FlexChildVisualizer extends StatelessWidget {
 
     return DropdownButton<FlexFit>(
       value: propertiesLocal.flexFit,
-      onChanged: onChangeFlexFit,
+      onChanged: (newFit) => _onChangeFlexFit(newFit, markAsDirty),
       underline: buildUnderline(),
       iconEnabledColor: emphasizedTextColor,
       items: <DropdownMenuItem<FlexFit>>[
@@ -675,7 +677,7 @@ class FlexChildVisualizer extends StatelessWidget {
     );
   }
 
-  Widget _buildContent(ThemeData theme) {
+  Widget _buildContent(ThemeData theme, FlexLayoutExplorerScope scope) {
     // TODO(https://github.com/flutter/devtools/issues/4058) allow more dynamic
     // flex factor input
     final currentFlexFactor = properties.flexFactor?.toInt() ?? 0;
@@ -690,11 +692,15 @@ class FlexChildVisualizer extends StatelessWidget {
         crossAxisAlignment: CrossAxisAlignment.end,
         children: [
           Flexible(
-            child: _buildFlexFactorChangerDropdown(currentMaxFlexFactor, theme),
+            child: _buildFlexFactorChangerDropdown(
+              currentMaxFlexFactor,
+              theme,
+              scope.markAsDirty,
+            ),
           ),
           if (!properties.hasFlexFactor)
             Text(
-              'unconstrained ${root.isMainAxisHorizontal ? 'horizontal' : 'vertical'}',
+              'unconstrained ${scope.rootProperties.isMainAxisHorizontal ? 'horizontal' : 'vertical'}',
               style: theme.regularTextStyle.copyWith(
                 color: theme.colorScheme.unconstrainedColor,
                 fontStyle: FontStyle.italic,
@@ -705,18 +711,19 @@ class FlexChildVisualizer extends StatelessWidget {
               textScaler: const TextScaler.linear(smallTextScaleFactor),
               textAlign: TextAlign.center,
             ),
-          _buildFlexFitChangerDropdown(theme),
+          _buildFlexFitChangerDropdown(theme, scope.markAsDirty),
         ],
       ),
     );
   }
 
   @override
   Widget build(BuildContext context) {
+    final scope = FlexLayoutExplorerScope.of(context);
     final renderSize = renderProperties.size;
     final renderOffset = renderProperties.offset;
     final propertiesLocal = properties;
-    final rootLocal = root;
+    final rootLocal = scope.rootProperties;
 
     Widget buildEntranceAnimation(BuildContext _, Widget? child) {
       final vertical = rootLocal.isMainAxisVertical;
@@ -730,11 +737,11 @@ class FlexChildVisualizer extends StatelessWidget {
                 vertical ? minRenderHeight - entranceMargin : renderSize.height,
               ),
               end: renderSize,
-            ).evaluate(state.entranceCurve)!
+            ).evaluate(scope.entranceCurve)!
           : renderSize;
       // Not-expanded widgets enter much faster.
       return Opacity(
-        opacity: min([state.entranceCurve.value * 5, 1.0]),
+        opacity: min([scope.entranceCurve.value * 5, 1.0]),
         child: Padding(
           padding: EdgeInsets.symmetric(
             horizontal: math.max(0.0, (renderSize.width - size.width) / 2),
@@ -749,14 +756,14 @@ class FlexChildVisualizer extends StatelessWidget {
       top: renderOffset.dy,
       left: renderOffset.dx,
       child: GestureDetector(
-        onTap: () => unawaited(state.onTap(propertiesLocal)),
-        onDoubleTap: () => state.onDoubleTap(propertiesLocal),
-        onLongPress: () => state.onDoubleTap(propertiesLocal),
+        onTap: () => unawaited(scope.onTap(propertiesLocal)),
+        onDoubleTap: () => scope.onDoubleTap(propertiesLocal),
+        onLongPress: () => scope.onDoubleTap(propertiesLocal),
         child: SizedBox(
           width: renderSize.width,
           height: renderSize.height,
           child: AnimatedBuilder(
-            animation: state.entranceController,
+            animation: scope.entranceController,
             builder: buildEntranceAnimation,
             child: WidgetVisualizer(
               isFlex: true,
@@ -769,7 +776,7 @@ class FlexChildVisualizer extends StatelessWidget {
                 properties: propertiesLocal,
                 child: Align(
                   alignment: Alignment.topRight,
-                  child: _buildContent(Theme.of(context)),
+                  child: _buildContent(Theme.of(context), scope),
                 ),
               ),
             ),
@@ -783,3 +790,54 @@ class FlexChildVisualizer extends StatelessWidget {
   /// for example if it's set to 5 the dropdown will consist of 6 items (null and 0..5)
   static const maximumFlexFactorOptions = 5;
 }
+
+/// Scope providing [FlexLayoutProperties] and callbacks for
+/// [FlexLayoutExplorerWidget] descendants.
+class FlexLayoutExplorerScope extends InheritedWidget {
+  const FlexLayoutExplorerScope({
+    super.key,
+    required this.rootProperties,
+    required this.onTap,
+    required this.onDoubleTap,
+    required this.markAsDirty,
+    required this.entranceController,
+    required this.entranceCurve,
+    required super.child,
+  });
+
+  /// The properties of the root flex widget being inspected.
+  final FlexLayoutProperties rootProperties;
+
+  /// Callback when a child widget is tapped.
+  final Future<void> Function(LayoutProperties properties) onTap;
+
+  /// Callback when a child widget is double tapped.
+  final void Function(LayoutProperties properties) onDoubleTap;
+
+  /// Callback to mark the layout explorer as dirty for a future refresh.
+  final VoidCallback markAsDirty;
+
+  /// The animation controller for the entrance animation.
+  final AnimationController entranceController;
+
+  /// The curved animation for the entrance animation.
+  final CurvedAnimation entranceCurve;
+
+  /// Retrieves the nearest [FlexLayoutExplorerScope] ancestor.
+  static FlexLayoutExplorerScope of(BuildContext context) {
+    final scope = context
+        .dependOnInheritedWidgetOfExactType<FlexLayoutExplorerScope>();
+    assert(scope != null, 'No FlexLayoutExplorerScope found in context');
+    return scope!;
+  }
+
+  @override
+  bool updateShouldNotify(FlexLayoutExplorerScope oldWidget) {
+    return rootProperties != oldWidget.rootProperties ||
+        onTap != oldWidget.onTap ||
+        onDoubleTap != oldWidget.onDoubleTap ||
+        markAsDirty != oldWidget.markAsDirty ||
+        entranceController != oldWidget.entranceController ||
+        entranceCurve != oldWidget.entranceCurve;
+  }
+}