Unverified Commit bbd7b976 authored by Greg Spencer's avatar Greg Spencer Committed by GitHub

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.
parent 9cee75ba
...@@ -18,7 +18,6 @@ class MyApp extends StatelessWidget { ...@@ -18,7 +18,6 @@ class MyApp extends StatelessWidget {
title: 'Flutter Demo', title: 'Flutter Demo',
theme: ThemeData( theme: ThemeData(
primarySwatch: Colors.blue, primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
), ),
home: const Center(child: Text('hello, world')) home: const Center(child: Text('hello, world'))
); );
......
...@@ -291,7 +291,7 @@ class ThemeData with Diagnosticable { ...@@ -291,7 +291,7 @@ class ThemeData with Diagnosticable {
assert(colorScheme?.brightness == null || brightness == null || colorScheme.brightness == brightness); assert(colorScheme?.brightness == null || brightness == null || colorScheme.brightness == brightness);
final Brightness _brightness = brightness ?? colorScheme?.brightness ?? Brightness.light; final Brightness _brightness = brightness ?? colorScheme?.brightness ?? Brightness.light;
final bool isDark = _brightness == Brightness.dark; final bool isDark = _brightness == Brightness.dark;
visualDensity ??= const VisualDensity(); visualDensity ??= VisualDensity.adaptivePlatformDensity;
primarySwatch ??= Colors.blue; primarySwatch ??= Colors.blue;
primaryColor ??= isDark ? Colors.grey[900] : primarySwatch; primaryColor ??= isDark ? Colors.grey[900] : primarySwatch;
primaryColorBrightness ??= estimateBrightnessForColor(primaryColor); primaryColorBrightness ??= estimateBrightnessForColor(primaryColor);
......
...@@ -195,6 +195,21 @@ void main() { ...@@ -195,6 +195,21 @@ void main() {
} }
}, variant: TargetPlatformVariant.all()); }, 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 { testWidgets('ThemeData.copyWith correctly creates new ThemeData with all copied arguments', (WidgetTester tester) async {
final SliderThemeData sliderTheme = SliderThemeData.fromPrimaryColors( final SliderThemeData sliderTheme = SliderThemeData.fromPrimaryColors(
......
...@@ -319,13 +319,14 @@ void main() { ...@@ -319,13 +319,14 @@ void main() {
tester.renderObject<RenderBox>(logo).size, tester.renderObject<RenderBox>(logo).size,
const Size(100.0, 100.0), 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 // Also check that the button alignment is true to expectations
final Finder button = find.byType(ElevatedButton); final Finder button = find.byType(ElevatedButton);
expect( expect(
tester.renderObject<RenderBox>(button).size, tester.renderObject<RenderBox>(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.getBottomLeft(button).dy, equals(600.0));
expect(tester.getCenter(button).dx, equals(400.0)); expect(tester.getCenter(button).dx, equals(400.0));
...@@ -344,7 +345,7 @@ void main() { ...@@ -344,7 +345,7 @@ void main() {
expect(tester.getCenter(logo).dy, lessThan(351.0)); expect(tester.getCenter(logo).dy, lessThan(351.0));
expect( expect(
tester.renderObject<RenderBox>(button).size, tester.renderObject<RenderBox>(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.getBottomLeft(button).dy, lessThan(600.0));
expect(tester.getCenter(button).dx, equals(400.0)); expect(tester.getCenter(button).dx, equals(400.0));
...@@ -463,7 +464,7 @@ void main() { ...@@ -463,7 +464,7 @@ void main() {
await tester.pump(); await tester.pump();
expect( expect(
tester.renderObject<RenderBox>(find.byKey(key)).size.height, tester.renderObject<RenderBox>(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 // Check that the button alignment is true to expectations
final Finder button = find.byType(ElevatedButton); final Finder button = find.byType(ElevatedButton);
...@@ -486,7 +487,7 @@ void main() { ...@@ -486,7 +487,7 @@ void main() {
await tester.pumpAndSettle(); await tester.pumpAndSettle();
expect( expect(
tester.renderObject<RenderBox>(find.byKey(key)).size.height, tester.renderObject<RenderBox>(find.byKey(key)).size.height,
equals(148.0), equals(148.0 + VisualDensity.adaptivePlatformDensity.vertical * 4.0),
); );
}, variant: const TargetPlatformVariant(<TargetPlatform>{ TargetPlatform.iOS, TargetPlatform.macOS })); }, variant: const TargetPlatformVariant(<TargetPlatform>{ TargetPlatform.iOS, TargetPlatform.macOS }));
...@@ -588,13 +589,14 @@ void main() { ...@@ -588,13 +589,14 @@ void main() {
tester.renderObject<RenderBox>(logo).size, tester.renderObject<RenderBox>(logo).size,
const Size(100.0, 100.0), 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. // Also check that the button alignment is true to expectations.
final Finder button = find.byType(ElevatedButton); final Finder button = find.byType(ElevatedButton);
expect( expect(
tester.renderObject<RenderBox>(button).size, tester.renderObject<RenderBox>(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.getBottomLeft(button).dy, equals(600.0));
expect(tester.getCenter(button).dx, equals(400.0)); expect(tester.getCenter(button).dx, equals(400.0));
...@@ -615,7 +617,7 @@ void main() { ...@@ -615,7 +617,7 @@ void main() {
expect(tester.getCenter(logo).dy, lessThan(351.0)); expect(tester.getCenter(logo).dy, lessThan(351.0));
expect( expect(
tester.renderObject<RenderBox>(button).size, tester.renderObject<RenderBox>(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.getBottomLeft(button).dy, equals(600.0));
expect(tester.getCenter(button).dx, equals(400.0)); expect(tester.getCenter(button).dx, equals(400.0));
...@@ -631,10 +633,10 @@ void main() { ...@@ -631,10 +633,10 @@ void main() {
tester.renderObject<RenderBox>(logo).size, tester.renderObject<RenderBox>(logo).size,
const Size(100.0, 100.0), 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( expect(
tester.renderObject<RenderBox>(button).size, tester.renderObject<RenderBox>(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.getBottomLeft(button).dy, equals(600.0));
expect(tester.getCenter(button).dx, equals(400.0)); expect(tester.getCenter(button).dx, equals(400.0));
......
...@@ -36,10 +36,6 @@ class MyApp extends StatelessWidget { ...@@ -36,10 +36,6 @@ class MyApp extends StatelessWidget {
// Notice that the counter didn't reset back to zero; the application // Notice that the counter didn't reset back to zero; the application
// is not restarted. // is not restarted.
primarySwatch: Colors.blue, 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'), home: MyHomePage(title: 'Flutter Demo Home Page'),
); );
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment