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.
This commit is contained in:
Greg Spencer 2020-09-23 11:14:58 -07:00 committed by GitHub
parent 9cee75ba61
commit bbd7b97664
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 16 deletions

View File

@ -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'))
);

View File

@ -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);

View File

@ -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(

View File

@ -319,13 +319,14 @@ void main() {
tester.renderObject<RenderBox>(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<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.getCenter(button).dx, equals(400.0));
@ -344,7 +345,7 @@ void main() {
expect(tester.getCenter(logo).dy, lessThan(351.0));
expect(
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.getCenter(button).dx, equals(400.0));
@ -463,7 +464,7 @@ void main() {
await tester.pump();
expect(
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
final Finder button = find.byType(ElevatedButton);
@ -486,7 +487,7 @@ void main() {
await tester.pumpAndSettle();
expect(
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 }));
@ -588,13 +589,14 @@ void main() {
tester.renderObject<RenderBox>(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<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.getCenter(button).dx, equals(400.0));
@ -615,7 +617,7 @@ void main() {
expect(tester.getCenter(logo).dy, lessThan(351.0));
expect(
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.getCenter(button).dx, equals(400.0));
@ -631,10 +633,10 @@ void main() {
tester.renderObject<RenderBox>(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<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.getCenter(button).dx, equals(400.0));

View File

@ -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'),
);