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:
parent
9cee75ba61
commit
bbd7b97664
@ -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'))
|
||||
);
|
||||
|
@ -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);
|
||||
|
@ -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(
|
||||
|
@ -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));
|
||||
|
@ -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'),
|
||||
);
|
||||
|
Loading…
x
Reference in New Issue
Block a user