From bbd7b976647fc12cee0238404fd30fdc82bb9f05 Mon Sep 17 00:00:00 2001 From: Greg Spencer Date: Wed, 23 Sep 2020 11:14:58 -0700 Subject: [PATCH] Change the default visual density to be adaptive based on platform. (#66370) Based on feedback from various desktop developers, and to be consistent between the defaults and the sample code, this PR switches the default for visual density in desktop themes to be compact instead of standard. It also removes the same setting from the sample code generated by "flutter create" because it is no longer needed now that it is the default. --- .../non_nullable/lib/main.dart | 1 - .../flutter/lib/src/material/theme_data.dart | 2 +- .../test/material/theme_data_test.dart | 15 +++++++++++++ .../widgets/sliver_fill_remaining_test.dart | 22 ++++++++++--------- .../templates/app/lib/main.dart.tmpl | 4 ---- 5 files changed, 28 insertions(+), 16 deletions(-) diff --git a/dev/integration_tests/non_nullable/lib/main.dart b/dev/integration_tests/non_nullable/lib/main.dart index 0ca8efc78f..6e0fb3ac9b 100644 --- a/dev/integration_tests/non_nullable/lib/main.dart +++ b/dev/integration_tests/non_nullable/lib/main.dart @@ -18,7 +18,6 @@ class MyApp extends StatelessWidget { title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, - visualDensity: VisualDensity.adaptivePlatformDensity, ), home: const Center(child: Text('hello, world')) ); diff --git a/packages/flutter/lib/src/material/theme_data.dart b/packages/flutter/lib/src/material/theme_data.dart index 0d940a0799..9afb5a9fc8 100644 --- a/packages/flutter/lib/src/material/theme_data.dart +++ b/packages/flutter/lib/src/material/theme_data.dart @@ -291,7 +291,7 @@ class ThemeData with Diagnosticable { assert(colorScheme?.brightness == null || brightness == null || colorScheme.brightness == brightness); final Brightness _brightness = brightness ?? colorScheme?.brightness ?? Brightness.light; final bool isDark = _brightness == Brightness.dark; - visualDensity ??= const VisualDensity(); + visualDensity ??= VisualDensity.adaptivePlatformDensity; primarySwatch ??= Colors.blue; primaryColor ??= isDark ? Colors.grey[900] : primarySwatch; primaryColorBrightness ??= estimateBrightnessForColor(primaryColor); diff --git a/packages/flutter/test/material/theme_data_test.dart b/packages/flutter/test/material/theme_data_test.dart index 2bc3bf83cd..7c7d7728d5 100644 --- a/packages/flutter/test/material/theme_data_test.dart +++ b/packages/flutter/test/material/theme_data_test.dart @@ -195,6 +195,21 @@ void main() { } }, variant: TargetPlatformVariant.all()); + testWidgets('VisualDensity in ThemeData defaults to "compact" on desktop and "standard" on mobile', (WidgetTester tester) async { + final ThemeData themeData = ThemeData(); + switch (debugDefaultTargetPlatformOverride) { + case TargetPlatform.android: + case TargetPlatform.iOS: + case TargetPlatform.fuchsia: + expect(themeData.visualDensity, equals(const VisualDensity())); + break; + case TargetPlatform.linux: + case TargetPlatform.macOS: + case TargetPlatform.windows: + expect(themeData.visualDensity, equals(VisualDensity.compact)); + } + }, variant: TargetPlatformVariant.all()); + testWidgets('ThemeData.copyWith correctly creates new ThemeData with all copied arguments', (WidgetTester tester) async { final SliderThemeData sliderTheme = SliderThemeData.fromPrimaryColors( diff --git a/packages/flutter/test/widgets/sliver_fill_remaining_test.dart b/packages/flutter/test/widgets/sliver_fill_remaining_test.dart index 3a78720008..877b67dc7b 100644 --- a/packages/flutter/test/widgets/sliver_fill_remaining_test.dart +++ b/packages/flutter/test/widgets/sliver_fill_remaining_test.dart @@ -319,13 +319,14 @@ void main() { tester.renderObject(logo).size, const Size(100.0, 100.0), ); - expect(tester.getCenter(logo), const Offset(400.0, 351.0)); + final VisualDensity density = VisualDensity.adaptivePlatformDensity; + expect(tester.getCenter(logo), Offset(400.0, 351.0 - density.vertical * 2.0)); // Also check that the button alignment is true to expectations final Finder button = find.byType(ElevatedButton); expect( tester.renderObject(button).size, - const Size(116.0, 48.0), + Size(116.0 + density.horizontal * 8.0, 48.0 + density.vertical * 4.0), ); expect(tester.getBottomLeft(button).dy, equals(600.0)); expect(tester.getCenter(button).dx, equals(400.0)); @@ -344,7 +345,7 @@ void main() { expect(tester.getCenter(logo).dy, lessThan(351.0)); expect( tester.renderObject(button).size, - const Size(116.0, 48.0), + Size(116.0 + density.horizontal * 8.0, 48.0 + density.vertical * 4.0), ); expect(tester.getBottomLeft(button).dy, lessThan(600.0)); expect(tester.getCenter(button).dx, equals(400.0)); @@ -463,7 +464,7 @@ void main() { await tester.pump(); expect( tester.renderObject(find.byKey(key)).size.height, - equals(148.0), + equals(148.0 + VisualDensity.adaptivePlatformDensity.vertical * 4.0), ); // Check that the button alignment is true to expectations final Finder button = find.byType(ElevatedButton); @@ -486,7 +487,7 @@ void main() { await tester.pumpAndSettle(); expect( tester.renderObject(find.byKey(key)).size.height, - equals(148.0), + equals(148.0 + VisualDensity.adaptivePlatformDensity.vertical * 4.0), ); }, variant: const TargetPlatformVariant({ TargetPlatform.iOS, TargetPlatform.macOS })); @@ -588,13 +589,14 @@ void main() { tester.renderObject(logo).size, const Size(100.0, 100.0), ); - expect(tester.getCenter(logo), const Offset(400.0, 351.0)); + final VisualDensity density = VisualDensity.adaptivePlatformDensity; + expect(tester.getCenter(logo), Offset(400.0, 351.0 - density.vertical * 2.0)); // Also check that the button alignment is true to expectations. final Finder button = find.byType(ElevatedButton); expect( tester.renderObject(button).size, - const Size(116.0, 48.0), + Size(116.0 + density.horizontal * 8.0, 48.0 + density.vertical * 4.0), ); expect(tester.getBottomLeft(button).dy, equals(600.0)); expect(tester.getCenter(button).dx, equals(400.0)); @@ -615,7 +617,7 @@ void main() { expect(tester.getCenter(logo).dy, lessThan(351.0)); expect( tester.renderObject(button).size, - const Size(116.0, 48.0), + Size(116.0 + density.horizontal * 8.0, 48.0 + density.vertical * 4.0), ); expect(tester.getBottomLeft(button).dy, equals(600.0)); expect(tester.getCenter(button).dx, equals(400.0)); @@ -631,10 +633,10 @@ void main() { tester.renderObject(logo).size, const Size(100.0, 100.0), ); - expect(tester.getCenter(logo), const Offset(400.0, 351.0)); + expect(tester.getCenter(logo), Offset(400.0, 351.0 - density.vertical * 2.0)); expect( tester.renderObject(button).size, - const Size(116.0, 48.0), + Size(116.0 + density.horizontal * 8.0, 48.0 + density.vertical * 4.0), ); expect(tester.getBottomLeft(button).dy, equals(600.0)); expect(tester.getCenter(button).dx, equals(400.0)); diff --git a/packages/flutter_tools/templates/app/lib/main.dart.tmpl b/packages/flutter_tools/templates/app/lib/main.dart.tmpl index 80691b7d03..5a82f64575 100644 --- a/packages/flutter_tools/templates/app/lib/main.dart.tmpl +++ b/packages/flutter_tools/templates/app/lib/main.dart.tmpl @@ -36,10 +36,6 @@ class MyApp extends StatelessWidget { // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, - // This makes the visual density adapt to the platform that you run - // the app on. For desktop platforms, the controls will be smaller and - // closer together (more dense) than on mobile platforms. - visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), );