Disable letterSpacing for web (flutter#6)

Former-commit-id: f06e65e

lib/codeviewer/code_segments.dart.REMOVED.git-id

@@ -1 +1 @@
-de069186f83593427a029ce56089cf175628ffde
+3838b7de2f4884a66089b97cae587a4de1f0ec54

lib/demos/material/dialog_demo.dart

@@ -59,8 +59,8 @@ class DialogDemo extends StatelessWidget {
 
   void _showAlertDialog(BuildContext context) {
     final ThemeData theme = Theme.of(context);
-    final TextStyle dialogTextStyle =
-        theme.textTheme.subtitle1.copyWith(color: theme.textTheme.caption.color);
+    final TextStyle dialogTextStyle = theme.textTheme.subtitle1
+        .copyWith(color: theme.textTheme.caption.color);
     _showDemoDialog<String>(
       context: context,
       child: AlertDialog(
@@ -78,8 +78,8 @@ class DialogDemo extends StatelessWidget {
 
   void _showAlertDialogWithTitle(BuildContext context) {
     final ThemeData theme = Theme.of(context);
-    final TextStyle dialogTextStyle =
-        theme.textTheme.subtitle1.copyWith(color: theme.textTheme.caption.color);
+    final TextStyle dialogTextStyle = theme.textTheme.subtitle1
+        .copyWith(color: theme.textTheme.caption.color);
     _showDemoDialog<String>(
       context: context,
       child: AlertDialog(

lib/layout/image_placeholder.dart

@@ -12,7 +12,6 @@ import 'package:flutter/material.dart';
 /// It also lets you override the [child] argument, in case you want to wrap
 /// the image with another widget, for example an [Ink.image].
 class FadeInImagePlaceholder extends StatelessWidget {
-
   const FadeInImagePlaceholder({
     Key key,
     @required this.image,
@@ -23,9 +22,9 @@ class FadeInImagePlaceholder extends StatelessWidget {
     this.width,
     this.height,
     this.fit,
-  }) : assert(placeholder != null),
-       assert(image != null),
-       super(key: key);
+  })  : assert(placeholder != null),
+        assert(image != null),
+        super(key: key);
 
   /// The target image that we are loading into memory.
   final ImageProvider image;
@@ -77,5 +76,4 @@ class FadeInImagePlaceholder extends StatelessWidget {
       },
     );
   }
-
 }

lib/layout/letter_spacing.dart

@@ -0,0 +1,9 @@
+// Copyright 2020 The Flutter team. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+import 'package:flutter/foundation.dart';
+
+/// Using letter spacing in Flutter for Web can cause a performance drop,
+/// see https://github.com/flutter/flutter/issues/51234.
+double letterSpacingOrNone(double letterSpacing) =>
+    kIsWeb ? 0.0 : letterSpacing;

lib/pages/home.dart

@@ -189,7 +189,8 @@ class HomePage extends StatelessWidget {
               child: Row(
                 children: [
                   FadeInImagePlaceholder(
-                    image: Theme.of(context).colorScheme.brightness == Brightness.dark
+                    image: Theme.of(context).colorScheme.brightness ==
+                            Brightness.dark
                         ? AssetImage('assets/logo/flutter_logo.png')
                         : AssetImage('assets/logo/flutter_logo_color.png'),
                     placeholder: SizedBox.shrink(),

lib/pages/splash.dart

@@ -2,7 +2,6 @@
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
-import 'dart:async';
 import 'dart:math';
 
 import 'package:flutter/material.dart';

lib/studies/crane/item_cards.dart

@@ -117,15 +117,13 @@ class _DestinationCard extends StatelessWidget {
         child: FadeInImagePlaceholder(
           image: AssetImage(destination.assetName),
           fit: BoxFit.cover,
-          placeholder: LayoutBuilder(
-            builder: (context, constraints) {
-              return Container(
-                color: Colors.black.withOpacity(0.1),
-                width: constraints.maxWidth,
-                height: constraints.maxWidth / destination.imageAspectRatio,
-              );
-            }
-          ),
+          placeholder: LayoutBuilder(builder: (context, constraints) {
+            return Container(
+              color: Colors.black.withOpacity(0.1),
+              width: constraints.maxWidth,
+              height: constraints.maxWidth / destination.imageAspectRatio,
+            );
+          }),
         ),
       ),
       label: destination.assetSemanticLabel,

lib/studies/crane/theme.dart

@@ -5,6 +5,7 @@
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
 
+import 'package:gallery/layout/letter_spacing.dart';
 import 'package:gallery/studies/crane/colors.dart';
 
 final ThemeData craneTheme = _buildCraneTheme();
@@ -72,7 +73,7 @@ TextTheme _buildCraneTextTheme(TextTheme base) {
       subtitle1: base.subtitle1.copyWith(
         fontWeight: FontWeight.w500,
         fontSize: 16,
-        letterSpacing: 0.5,
+        letterSpacing: letterSpacingOrNone(0.5),
       ),
       subtitle2: base.subtitle2.copyWith(
         fontWeight: FontWeight.w600,
@@ -90,7 +91,7 @@ TextTheme _buildCraneTextTheme(TextTheme base) {
       button: base.button.copyWith(
         fontWeight: FontWeight.w600,
         fontSize: 13,
-        letterSpacing: 0.8,
+        letterSpacing: letterSpacingOrNone(0.8),
       ),
       caption: base.caption.copyWith(
         fontWeight: FontWeight.w500,

lib/studies/fortnightly/shared.dart

@@ -13,7 +13,12 @@ import 'package:gallery/layout/image_placeholder.dart';
 import 'package:gallery/layout/text_scale.dart';
 
 class ArticleData {
-  ArticleData({this.imageUrl, this.imageAspectRatio, this.category, this.title, this.snippet});
+  ArticleData(
+      {this.imageUrl,
+      this.imageAspectRatio,
+      this.category,
+      this.title,
+      this.snippet});
 
   final String imageUrl;
   final double imageAspectRatio;
@@ -62,7 +67,7 @@ class HorizontalArticlePreview extends StatelessWidget {
           image: AssetImage(data.imageUrl),
           placeholder: Container(
             color: Colors.black.withOpacity(0.1),
-            width: 64 / ( 1 / data.imageAspectRatio),
+            width: 64 / (1 / data.imageAspectRatio),
             height: 64,
           ),
           fit: BoxFit.cover,
@@ -99,15 +104,13 @@ class VerticalArticlePreview extends StatelessWidget {
             width: double.infinity,
             child: FadeInImagePlaceholder(
               image: AssetImage(data.imageUrl),
-              placeholder: LayoutBuilder(
-                builder: (context, constraints) {
-                  return Container(
-                    color: Colors.black.withOpacity(0.1),
-                    width: constraints.maxWidth,
-                    height: constraints.maxWidth / data.imageAspectRatio,
-                  );
-                }
-              ),
+              placeholder: LayoutBuilder(builder: (context, constraints) {
+                return Container(
+                  color: Colors.black.withOpacity(0.1),
+                  width: constraints.maxWidth,
+                  height: constraints.maxWidth / data.imageAspectRatio,
+                );
+              }),
               fit: BoxFit.fitWidth,
               width: double.infinity,
               excludeFromSemantics: true,
@@ -421,15 +424,13 @@ List<Widget> buildStockItems(BuildContext context) {
       width: double.infinity,
       child: FadeInImagePlaceholder(
         image: AssetImage('assets/fortnightly/fortnightly_chart.png'),
-        placeholder: LayoutBuilder(
-          builder: (context, constraints) {
-            return Container(
-              color: Colors.black.withOpacity(0.1),
-              width: constraints.maxWidth,
-              height: constraints.maxWidth / imageAspectRatio,
-            );
-          }
-        ),
+        placeholder: LayoutBuilder(builder: (context, constraints) {
+          return Container(
+            color: Colors.black.withOpacity(0.1),
+            width: constraints.maxWidth,
+            height: constraints.maxWidth / imageAspectRatio,
+          );
+        }),
         width: double.infinity,
         fit: BoxFit.contain,
         excludeFromSemantics: true,
@@ -486,15 +487,13 @@ class VideoPreview extends StatelessWidget {
           width: double.infinity,
           child: FadeInImagePlaceholder(
             image: AssetImage(data.imageUrl),
-            placeholder: LayoutBuilder(
-              builder: (context, constraints) {
-                return Container(
-                  color: Colors.black.withOpacity(0.1),
-                  width: constraints.maxWidth,
-                  height: constraints.maxWidth / data.imageAspectRatio,
-                );
-              }
-            ),
+            placeholder: LayoutBuilder(builder: (context, constraints) {
+              return Container(
+                color: Colors.black.withOpacity(0.1),
+                width: constraints.maxWidth,
+                height: constraints.maxWidth / data.imageAspectRatio,
+              );
+            }),
             fit: BoxFit.contain,
             width: double.infinity,
             excludeFromSemantics: true,

lib/studies/rally/app.dart

@@ -4,9 +4,10 @@
 
 import 'package:flutter/material.dart';
 import 'package:google_fonts/google_fonts.dart';
+
 import 'package:gallery/data/gallery_options.dart';
 import 'package:gallery/l10n/gallery_localizations.dart';
-
+import 'package:gallery/layout/letter_spacing.dart';
 import 'package:gallery/studies/rally/colors.dart';
 import 'package:gallery/studies/rally/home.dart';
 import 'package:gallery/studies/rally/login.dart';
@@ -71,19 +72,19 @@ class RallyApp extends StatelessWidget {
           bodyText1: GoogleFonts.eczar(
             fontSize: 40,
             fontWeight: FontWeight.w400,
-            letterSpacing: 1.4,
+            letterSpacing: letterSpacingOrNone(1.4),
             textStyle: base.bodyText1,
           ),
           // TODO: Use GoogleFonts.robotoCondensed when available
           button: base.button.copyWith(
             fontFamily: 'Roboto Condensed',
             fontWeight: FontWeight.w700,
-            letterSpacing: 2.8,
+            letterSpacing: letterSpacingOrNone(2.8),
           ),
           headline5: GoogleFonts.eczar(
             fontSize: 40,
             fontWeight: FontWeight.w600,
-            letterSpacing: 1.4,
+            letterSpacing: letterSpacingOrNone(1.4),
             textStyle: base.bodyText1,
           ),
         )

lib/studies/rally/charts/pie_chart.dart

@@ -7,6 +7,7 @@ import 'dart:math' as math;
 import 'package:flutter/material.dart';
 
 import 'package:gallery/data/gallery_options.dart';
+import 'package:gallery/layout/letter_spacing.dart';
 import 'package:gallery/layout/text_scale.dart';
 import 'package:gallery/studies/rally/colors.dart';
 import 'package:gallery/studies/rally/data.dart';
@@ -144,7 +145,7 @@ class _AnimatedRallyPieChart extends AnimatedWidget {
     final textTheme = Theme.of(context).textTheme;
     final labelTextStyle = textTheme.bodyText2.copyWith(
       fontSize: 14,
-      letterSpacing: 0.5,
+      letterSpacing: letterSpacingOrNone(0.5),
     );
 
     return LayoutBuilder(builder: (context, constraints) {

lib/studies/rally/finance.dart

@@ -428,7 +428,8 @@ class _EventAmount extends StatelessWidget {
     final textTheme = Theme.of(context).textTheme;
     return Text(
       usdWithSignFormat(context).format(amount),
-      style: textTheme.bodyText1.copyWith(fontSize: 20, color: RallyColors.gray),
+      style:
+          textTheme.bodyText1.copyWith(fontSize: 20, color: RallyColors.gray),
     );
   }
 }

lib/studies/rally/login.dart

@@ -152,14 +152,12 @@ class _TopBar extends StatelessWidget {
                   height: 80,
                   child: FadeInImagePlaceholder(
                     image: AssetImage('logo.png', package: 'rally_assets'),
-                    placeholder: LayoutBuilder(
-                      builder: (context, constraints) {
-                        return SizedBox(
-                          width: constraints.maxHeight,
-                          height: constraints.maxHeight,
-                        );
-                      }
-                    ),
+                    placeholder: LayoutBuilder(builder: (context, constraints) {
+                      return SizedBox(
+                        width: constraints.maxHeight,
+                        height: constraints.maxHeight,
+                      );
+                    }),
                   ),
                 ),
               ),

lib/studies/shrine/login.dart

@@ -9,6 +9,7 @@ import 'package:flutter/material.dart';
 import 'package:gallery/data/gallery_options.dart';
 import 'package:gallery/layout/adaptive.dart';
 import 'package:gallery/layout/image_placeholder.dart';
+import 'package:gallery/layout/letter_spacing.dart';
 import 'package:gallery/layout/text_scale.dart';
 import 'package:gallery/l10n/gallery_localizations.dart';
 import 'package:gallery/studies/shrine/colors.dart';
@@ -126,7 +127,8 @@ class _UsernameTextField extends StatelessWidget {
           decoration: InputDecoration(
             labelText:
                 GalleryLocalizations.of(context).shrineLoginUsernameLabel,
-            labelStyle: TextStyle(letterSpacing: mediumLetterSpacing),
+            labelStyle: TextStyle(
+                letterSpacing: letterSpacingOrNone(mediumLetterSpacing)),
           ),
         ),
       ),
@@ -153,7 +155,8 @@ class _PasswordTextField extends StatelessWidget {
           decoration: InputDecoration(
             labelText:
                 GalleryLocalizations.of(context).shrineLoginPasswordLabel,
-            labelStyle: TextStyle(letterSpacing: mediumLetterSpacing),
+            labelStyle: TextStyle(
+                letterSpacing: letterSpacingOrNone(mediumLetterSpacing)),
           ),
         ),
       ),
@@ -203,7 +206,8 @@ class _CancelAndNextButtons extends StatelessWidget {
                 padding: buttonTextPadding,
                 child: Text(
                   GalleryLocalizations.of(context).shrineNextButtonCaption,
-                  style: TextStyle(letterSpacing: largeLetterSpacing),
+                  style: TextStyle(
+                      letterSpacing: letterSpacingOrNone(largeLetterSpacing)),
                 ),
               ),
               elevation: 8,

lib/studies/shrine/model/products_repository.dart

@@ -358,4 +358,4 @@ class ProductsRepository {
       return allProducts.where((p) => p.category == category).toList();
     }
   }
-}
+}

lib/studies/shrine/shopping_cart.dart

@@ -7,12 +7,13 @@ import 'package:flutter/rendering.dart';
 import 'package:intl/intl.dart';
 import 'package:scoped_model/scoped_model.dart';
 
+import 'package:gallery/l10n/gallery_localizations.dart';
+import 'package:gallery/layout/letter_spacing.dart';
 import 'package:gallery/studies/shrine/colors.dart';
 import 'package:gallery/studies/shrine/expanding_bottom_sheet.dart';
 import 'package:gallery/studies/shrine/model/app_state_model.dart';
 import 'package:gallery/studies/shrine/model/product.dart';
 import 'package:gallery/studies/shrine/theme.dart';
-import 'package:gallery/l10n/gallery_localizations.dart';
 
 const _startColumnWidth = 60.0;
 const _ordinalSortKeyName = 'shopping_cart';
@@ -111,7 +112,9 @@ class _ShoppingCartPageState extends State<ShoppingCartPage> {
                           child: Text(
                             GalleryLocalizations.of(context)
                                 .shrineCartClearButtonCaption,
-                            style: TextStyle(letterSpacing: largeLetterSpacing),
+                            style: TextStyle(
+                                letterSpacing:
+                                    letterSpacingOrNone(largeLetterSpacing)),
                           ),
                         ),
                         onPressed: () {
@@ -143,7 +146,7 @@ class ShoppingCartSummary extends StatelessWidget {
     final TextStyle largeAmountStyle = Theme.of(context)
         .textTheme
         .headline4
-        .copyWith(letterSpacing: mediumLetterSpacing);
+        .copyWith(letterSpacing: letterSpacingOrNone(mediumLetterSpacing));
     final NumberFormat formatter = NumberFormat.simpleCurrency(
       decimalDigits: 2,
       locale: Localizations.localeOf(context).toString(),