[Gallery] Preserve demo state, simplify demo width calculations on desktop (#287)

* Maintain state on mobile

* Refactor section width code

* Fix state resetting on desktop

* Remove unused import

* Remove unecessary GestureDetectorBehavior

gallery/gallery/lib/pages/demo.dart

@@ -3,7 +3,6 @@
 // found in the LICENSE file.
 
 import 'dart:io' show Platform;
-import 'dart:math';
 
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
@@ -256,12 +255,14 @@ class _DemoPageState extends State<DemoPage> with TickerProviderStateMixin {
         appBar.preferredSize.height;
     final maxSectionHeight = isDesktop ? contentHeight : contentHeight - 64;
     final horizontalPadding = isDesktop ? mediaQuery.size.width * 0.12 : 0.0;
+    final maxSectionWidth = 420.0;
 
     Widget section;
     switch (_state) {
       case _DemoState.options:
         section = _DemoSectionOptions(
           maxHeight: maxSectionHeight,
+          maxWidth: maxSectionWidth,
           configurations: widget.demo.configurations,
           configIndex: _configIndex,
           onConfigChanged: (index) {
@@ -277,6 +278,7 @@ class _DemoPageState extends State<DemoPage> with TickerProviderStateMixin {
       case _DemoState.info:
         section = _DemoSectionInfo(
           maxHeight: maxSectionHeight,
+          maxWidth: maxSectionWidth,
           title: _currentConfig.title,
           description: _currentConfig.description,
         );
@@ -314,44 +316,13 @@ class _DemoPageState extends State<DemoPage> with TickerProviderStateMixin {
       buildRoute: _currentConfig.buildRoute,
     );
     if (isDesktop) {
-      // If the available width is not very wide, reduce the amount of space
+      final isFullScreen = _state == _DemoState.fullscreen;
-      // between the demo content and the selected section.
+      final Widget sectionAndDemo = Row(
-      const reducedMiddleSpaceWidth = 48.0;
-
-      // Width of the space between the section and the demo content
-      // when the code is NOT displayed.
-      final nonCodePageMiddleSpaceWidth = mediaQuery.size.width > 900
-          ? horizontalPadding
-          : reducedMiddleSpaceWidth;
-
-      // Width of the space between the section and the demo content
-      // when the code is displayed.
-      final codePageMiddleSpaceWidth =
-          min(reducedMiddleSpaceWidth, nonCodePageMiddleSpaceWidth);
-
-      // Width of the space between the section and the demo content
-      final middleSpaceWidth = _state == _DemoState.code
-          ? codePageMiddleSpaceWidth
-          : nonCodePageMiddleSpaceWidth;
-
-      // Width for demo content.
-      // It is calculated in this way because the code demands more space.
-      final demoContentWidth = (mediaQuery.size.width -
-              horizontalPadding * 2 -
-              nonCodePageMiddleSpaceWidth) /
-          2;
-
-      final Widget sectionAndDemo = (_state == _DemoState.fullscreen)
-          ? demoContent
-          : Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-                Expanded(child: section),
+          if (!isFullScreen) Expanded(child: section),
-                SizedBox(width: middleSpaceWidth),
+          SizedBox(width: !isFullScreen ? 48.0 : 0),
-                Container(
+          Expanded(child: demoContent),
-                  width: demoContentWidth,
-                  child: demoContent,
-                ),
         ],
       );
 
@@ -371,20 +342,22 @@ class _DemoPageState extends State<DemoPage> with TickerProviderStateMixin {
       );
 
       // Add a tap gesture to collapse the currently opened section.
-      if (_state != _DemoState.normal) {
       demoContent = Semantics(
         label: MaterialLocalizations.of(context).modalBarrierDismissLabel,
         child: GestureDetector(
-            behavior: HitTestBehavior.opaque,
           onTap: () {
+            if (_state != _DemoState.normal) {
               setStateAndUpdate(() {
                 _state = _DemoState.normal;
               });
+            }
           },
-            child: ExcludeSemantics(child: demoContent),
+          child: Semantics(
+            excludeSemantics: _state != _DemoState.normal,
+            child: demoContent,
+          ),
         ),
       );
-      }
 
       body = SafeArea(
         bottom: false,
@@ -491,12 +464,14 @@ class _DemoSectionOptions extends StatelessWidget {
   const _DemoSectionOptions({
     Key key,
     this.maxHeight,
+    this.maxWidth,
     this.configurations,
     this.configIndex,
     this.onConfigChanged,
   }) : super(key: key);
 
   final double maxHeight;
+  final double maxWidth;
   final List<GalleryDemoConfiguration> configurations;
   final int configIndex;
   final ValueChanged<int> onConfigChanged;
@@ -506,8 +481,10 @@ class _DemoSectionOptions extends StatelessWidget {
     final textTheme = Theme.of(context).textTheme;
     final colorScheme = Theme.of(context).colorScheme;
 
-    return Container(
+    return Align(
-      constraints: BoxConstraints(maxHeight: maxHeight),
+      alignment: AlignmentDirectional.topStart,
+      child: Container(
+        constraints: BoxConstraints(maxHeight: maxHeight, maxWidth: maxWidth),
         child: Column(
           crossAxisAlignment: CrossAxisAlignment.start,
           mainAxisSize: MainAxisSize.min,
@@ -550,6 +527,7 @@ class _DemoSectionOptions extends StatelessWidget {
             SizedBox(height: 12),
           ],
         ),
+      ),
     );
   }
 }
@@ -594,11 +572,13 @@ class _DemoSectionInfo extends StatelessWidget {
   const _DemoSectionInfo({
     Key key,
     this.maxHeight,
+    this.maxWidth,
     this.title,
     this.description,
   }) : super(key: key);
 
   final double maxHeight;
+  final double maxWidth;
   final String title;
   final String description;
 
@@ -607,14 +587,16 @@ class _DemoSectionInfo extends StatelessWidget {
     final textTheme = Theme.of(context).textTheme;
     final colorScheme = Theme.of(context).colorScheme;
 
-    return Container(
+    return Align(
+      alignment: AlignmentDirectional.topStart,
+      child: Container(
         padding: const EdgeInsetsDirectional.only(
           start: 24,
           top: 12,
           end: 24,
           bottom: 32,
         ),
-      constraints: BoxConstraints(maxHeight: maxHeight),
+        constraints: BoxConstraints(maxHeight: maxHeight, maxWidth: maxWidth),
         child: SingleChildScrollView(
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
@@ -636,6 +618,7 @@ class _DemoSectionInfo extends StatelessWidget {
             ],
           ),
         ),
+      ),
     );
   }
 }