firka/flutter
firka/flutter
5
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Revert "Add support for Material 3 Divider and VerticalDivider" (#112471)

Browse Source
This commit is contained in:
Casey Hillers 2022-09-27 08:15:59 -07:00 committed by GitHub
parent f57c2fe8ff
commit bd5c347193
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 24 additions and 364 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dev/tools/gen_defaults/bin/gen_defaults.dart
View File

@ -24,7 +24,6 @@ import 'package:gen_defaults/button_template.dart';
import 'package:gen_defaults/card_template.dart'; import 'package:gen_defaults/card_template.dart';
import 'package:gen_defaults/checkbox_template.dart'; import 'package:gen_defaults/checkbox_template.dart';
import 'package:gen_defaults/dialog_template.dart'; import 'package:gen_defaults/dialog_template.dart';
import 'package:gen_defaults/divider_template.dart';
import 'package:gen_defaults/fab_template.dart'; import 'package:gen_defaults/fab_template.dart';
import 'package:gen_defaults/filter_chip_template.dart'; import 'package:gen_defaults/filter_chip_template.dart';
import 'package:gen_defaults/icon_button_template.dart'; import 'package:gen_defaults/icon_button_template.dart';
@ -66,7 +65,6 @@ Future<void> main(List<String> args) async {
'date_picker_docked.json', 'date_picker_docked.json',
'date_picker_modal.json', 'date_picker_modal.json',
'dialog.json', 'dialog.json',
'divider.json',
'dialog_fullscreen.json', 'dialog_fullscreen.json',
'elevation.json', 'elevation.json',
'fab_extended_primary.json', 'fab_extended_primary.json',
@ -123,7 +121,6 @@ Future<void> main(List<String> args) async {
CardTemplate('Card', '$materialLib/card.dart', tokens).updateFile(); CardTemplate('Card', '$materialLib/card.dart', tokens).updateFile();
CheckboxTemplate('Checkbox', '$materialLib/checkbox.dart', tokens).updateFile(); CheckboxTemplate('Checkbox', '$materialLib/checkbox.dart', tokens).updateFile();
DialogTemplate('Dialog', '$materialLib/dialog.dart', tokens).updateFile(); DialogTemplate('Dialog', '$materialLib/dialog.dart', tokens).updateFile();
DividerTemplate('Divider', '$materialLib/divider.dart', tokens).updateFile();
FABTemplate('FAB', '$materialLib/floating_action_button.dart', tokens).updateFile(); FABTemplate('FAB', '$materialLib/floating_action_button.dart', tokens).updateFile();
FilterChipTemplate('ChoiceChip', '$materialLib/choice_chip.dart', tokens).updateFile(); FilterChipTemplate('ChoiceChip', '$materialLib/choice_chip.dart', tokens).updateFile();
FilterChipTemplate('FilterChip', '$materialLib/filter_chip.dart', tokens).updateFile(); FilterChipTemplate('FilterChip', '$materialLib/filter_chip.dart', tokens).updateFile();

24
dev/tools/gen_defaults/lib/divider_template.dart
View File

@ -1,24 +0,0 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
import 'template.dart';
class DividerTemplate extends TokenTemplate {
const DividerTemplate(super.blockName, super.fileName, super.tokens, {
super.colorSchemePrefix = '_colors.',
super.textThemePrefix = '_textTheme.'
});
@override
String generate() => '''
class _${blockName}DefaultsM3 extends DividerThemeData {
_${blockName}DefaultsM3(this.context) : super(thickness: ${tokens["md.comp.divider.thickness"]});
final BuildContext context;
late final ColorScheme _colors = Theme.of(context).colorScheme;
@override Color? get color => ${componentColor("md.comp.divider")};
}
''';
}

11
examples/api/lib/material/divider/divider.0.dart
View File

@ -11,19 +11,22 @@ void main() => runApp(const MyApp());
class MyApp extends StatelessWidget { class MyApp extends StatelessWidget {
const MyApp({super.key}); const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: _title,
home: Scaffold( home: Scaffold(
appBar: AppBar(title: const Text('Divider Sample')), appBar: AppBar(title: const Text(_title)),
body: const DividerExample(), body: const MyStatelessWidget(),
), ),
); );
} }
} }
class DividerExample extends StatelessWidget { class MyStatelessWidget extends StatelessWidget {
const DividerExample({super.key}); const MyStatelessWidget({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {

52
examples/api/lib/material/divider/divider.1.dart
View File

@ -1,52 +0,0 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/// Flutter code sample for [Divider].
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
home: Scaffold(
appBar: AppBar(title: const Text('Divider Sample')),
body: const DividerExample(),
),
);
}
}
class DividerExample extends StatelessWidget {
const DividerExample({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: const <Widget>[
Expanded(
child: Card(
child: SizedBox.expand(),
),
),
Divider(),
Expanded(
child: Card(
child: SizedBox.expand(),
),
),
],
),
),
);
}
}

11
examples/api/lib/material/divider/vertical_divider.0.dart
View File

@ -11,19 +11,22 @@ void main() => runApp(const MyApp());
class MyApp extends StatelessWidget { class MyApp extends StatelessWidget {
const MyApp({super.key}); const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialApp( return MaterialApp(
title: _title,
home: Scaffold( home: Scaffold(
appBar: AppBar(title: const Text('VerticalDivider Sample')), appBar: AppBar(title: const Text(_title)),
body: const DividerExample(), body: const MyStatelessWidget(),
), ),
); );
} }
} }
class DividerExample extends StatelessWidget { class MyStatelessWidget extends StatelessWidget {
const DividerExample({super.key}); const MyStatelessWidget({super.key});
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {

52
examples/api/lib/material/divider/vertical_divider.1.dart
View File

@ -1,52 +0,0 @@
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/// Flutter code sample for [Divider].
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(colorSchemeSeed: const Color(0xff6750a4), useMaterial3: true),
home: Scaffold(
appBar: AppBar(title: const Text('Divider Sample')),
body: const DividerExample(),
),
);
}
}
class DividerExample extends StatelessWidget {
const DividerExample({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: const <Widget>[
Expanded(
child: Card(
child: SizedBox.expand(),
),
),
VerticalDivider(),
Expanded(
child: Card(
child: SizedBox.expand(),
),
),
],
),
),
);
}
}

28
examples/api/test/material/divider/divider.0_test.dart
View File

@ -1,28 +0,0 @@
// Copyright 2014 The Flutter Authors. 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/material.dart';
import 'package:flutter_api_samples/material/divider/divider.0.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Horizontal Divider', (WidgetTester tester) async {
await tester.pumpWidget(
const MaterialApp(
home: Scaffold(
body: example.MyApp(),
),
),
);
expect(find.byType(Divider), findsOneWidget);
// Divider is positioned horizintally.
final Offset container = tester.getBottomLeft(find.byType(Container).first);
expect(container.dy, tester.getTopLeft(find.byType(Divider)).dy);
final Offset subheader = tester.getTopLeft(find.text('Subheader'));
expect(subheader.dy, tester.getBottomLeft(find.byType(Divider)).dy);
});
}

28
examples/api/test/material/divider/divider.1_test.dart
View File

@ -1,28 +0,0 @@
// Copyright 2014 The Flutter Authors. 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/material.dart';
import 'package:flutter_api_samples/material/divider/divider.1.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Horizontal Divider', (WidgetTester tester) async {
await tester.pumpWidget(
const MaterialApp(
home: Scaffold(
body: example.MyApp(),
),
),
);
expect(find.byType(Divider), findsOneWidget);
// Divider is positioned horizontally.
Offset card = tester.getBottomLeft(find.byType(Card).first);
expect(card.dy, tester.getTopLeft(find.byType(Divider)).dy);
card = tester.getTopLeft(find.byType(Card).last);
expect(card.dy, tester.getBottomLeft(find.byType(Divider)).dy);
});
}

28
examples/api/test/material/divider/vertical_divider.0_test.dart
View File

@ -1,28 +0,0 @@
// Copyright 2014 The Flutter Authors. 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/material.dart';
import 'package:flutter_api_samples/material/divider/vertical_divider.0.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Vertical Divider', (WidgetTester tester) async {
await tester.pumpWidget(
const MaterialApp(
home: Scaffold(
body: example.MyApp(),
),
),
);
expect(find.byType(VerticalDivider), findsOneWidget);
// Divider is positioned horizintally.
Offset expanded = tester.getTopRight(find.byType(Expanded).first);
expect(expanded.dx, tester.getTopLeft(find.byType(VerticalDivider)).dx);
expanded = tester.getTopLeft(find.byType(Expanded).last);
expect(expanded.dx, tester.getTopRight(find.byType(VerticalDivider)).dx);
});
}

28
examples/api/test/material/divider/vertical_divider.1_test.dart
View File

@ -1,28 +0,0 @@
// Copyright 2014 The Flutter Authors. 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/material.dart';
import 'package:flutter_api_samples/material/divider/vertical_divider.1.dart' as example;
import 'package:flutter_test/flutter_test.dart';
void main() {
testWidgets('Vertical Divider', (WidgetTester tester) async {
await tester.pumpWidget(
const MaterialApp(
home: Scaffold(
body: example.MyApp(),
),
),
);
expect(find.byType(VerticalDivider), findsOneWidget);
// Divider is positioned vertically.
Offset card = tester.getTopRight(find.byType(Card).first);
expect(card.dx, tester.getTopLeft(find.byType(VerticalDivider)).dx);
card = tester.getTopLeft(find.byType(Card).last);
expect(card.dx, tester.getTopRight(find.byType(VerticalDivider)).dx);
});
}

49
packages/flutter/lib/src/material/divider.dart
View File

@ -4,7 +4,6 @@
import 'package:flutter/widgets.dart'; import 'package:flutter/widgets.dart';
import 'color_scheme.dart';
import 'divider_theme.dart'; import 'divider_theme.dart';
import 'theme.dart'; import 'theme.dart';
@ -35,13 +34,6 @@ import 'theme.dart';
/// ** See code in examples/api/lib/material/divider/divider.0.dart ** /// ** See code in examples/api/lib/material/divider/divider.0.dart **
/// {@end-tool} /// {@end-tool}
/// ///
/// {@tool dartpad}
/// This sample shows the creation of [Divider] widget, as described in:
/// https://m3.material.io/components/divider/overview
///
/// ** See code in examples/api/lib/material/divider/divider.1.dart **
/// {@end-tool}
///
/// See also: /// See also:
/// ///
/// * [PopupMenuDivider], which is the equivalent but for popup menus. /// * [PopupMenuDivider], which is the equivalent but for popup menus.
@ -162,14 +154,11 @@ class Divider extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final DividerThemeData dividerTheme = DividerTheme.of(context); final DividerThemeData dividerTheme = DividerTheme.of(context);
final DividerThemeData defaults = theme.useMaterial3 ? _DividerDefaultsM3(context) : const _DividerDefaultsM2();
final double height = this.height ?? dividerTheme.space ?? 16.0; final double height = this.height ?? dividerTheme.space ?? 16.0;
final double thickness = this.thickness ?? dividerTheme.thickness ?? defaults.thickness!; final double thickness = this.thickness ?? dividerTheme.thickness ?? 0.0;
final double indent = this.indent ?? dividerTheme.indent ?? 0.0; final double indent = this.indent ?? dividerTheme.indent ?? 0.0;
final double endIndent = this.endIndent ?? dividerTheme.endIndent ?? 0.0; final double endIndent = this.endIndent ?? dividerTheme.endIndent ?? 0.0;
final Color? color = this.color ?? defaults.color;
return SizedBox( return SizedBox(
height: height, height: height,
@ -206,13 +195,6 @@ class Divider extends StatelessWidget {
/// ** See code in examples/api/lib/material/divider/vertical_divider.0.dart ** /// ** See code in examples/api/lib/material/divider/vertical_divider.0.dart **
/// {@end-tool} /// {@end-tool}
/// ///
/// {@tool dartpad}
/// This sample shows the creation of [VerticalDivider] widget, as described in:
/// https://m3.material.io/components/divider/overview
///
/// ** See code in examples/api/lib/material/divider/vertical_divider.1.dart **
/// {@end-tool}
///
/// See also: /// See also:
/// ///
/// * [ListView.separated], which can be used to generate vertical dividers. /// * [ListView.separated], which can be used to generate vertical dividers.
@ -282,14 +264,11 @@ class VerticalDivider extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final ThemeData theme = Theme.of(context);
final DividerThemeData dividerTheme = DividerTheme.of(context); final DividerThemeData dividerTheme = DividerTheme.of(context);
final DividerThemeData defaults = theme.useMaterial3 ? _DividerDefaultsM3(context) : const _DividerDefaultsM2();
final double width = this.width ?? dividerTheme.space ?? 16.0; final double width = this.width ?? dividerTheme.space ?? 16.0;
final double thickness = this.thickness ?? dividerTheme.thickness ?? defaults.thickness!; final double thickness = this.thickness ?? dividerTheme.thickness ?? 0.0;
final double indent = this.indent ?? dividerTheme.indent ?? 0.0; final double indent = this.indent ?? dividerTheme.indent ?? 0.0;
final double endIndent = this.endIndent ?? dividerTheme.endIndent ?? 0.0; final double endIndent = this.endIndent ?? dividerTheme.endIndent ?? 0.0;
final Color? color = this.color ?? defaults.color;
return SizedBox( return SizedBox(
width: width, width: width,
@ -307,27 +286,3 @@ class VerticalDivider extends StatelessWidget {
); );
} }
} }
class _DividerDefaultsM2 extends DividerThemeData {
const _DividerDefaultsM2() : super(thickness: 0.0);
}
// BEGIN GENERATED TOKEN PROPERTIES - Divider
// Do not edit by hand. The code between the "BEGIN GENERATED" and
// "END GENERATED" comments are generated from data in the Material
// Design token database by the script:
// dev/tools/gen_defaults/bin/gen_defaults.dart.
// Token database version: v0_132
class _DividerDefaultsM3 extends DividerThemeData {
_DividerDefaultsM3(this.context) : super(thickness: 1.0);
final BuildContext context;
late final ColorScheme _colors = Theme.of(context).colorScheme;
@override Color? get color => _colors.outlineVariant;
}
// END GENERATED TOKEN PROPERTIES - Divider

74
packages/flutter/test/material/divider_theme_test.dart
View File

@ -59,9 +59,8 @@ void main() {
group('Horizontal Divider', () { group('Horizontal Divider', () {
testWidgets('Passing no DividerThemeData returns defaults', (WidgetTester tester) async { testWidgets('Passing no DividerThemeData returns defaults', (WidgetTester tester) async {
await tester.pumpWidget( MaterialApp( await tester.pumpWidget(const MaterialApp(
theme: ThemeData(useMaterial3: true), home: Scaffold(
home: const Scaffold(
body: Divider(), body: Divider(),
), ),
)); ));
@ -71,10 +70,10 @@ void main() {
final Container container = tester.widget(find.byType(Container)); final Container container = tester.widget(find.byType(Container));
final BoxDecoration decoration = container.decoration! as BoxDecoration; final BoxDecoration decoration = container.decoration! as BoxDecoration;
expect(decoration.border!.bottom.width, 1.0); expect(decoration.border!.bottom.width, 0.0);
final ThemeData theme = ThemeData(); final ThemeData theme = ThemeData();
expect(decoration.border!.bottom.color, theme.colorScheme.outlineVariant); expect(decoration.border!.bottom.color, theme.dividerColor);
final Rect dividerRect = tester.getRect(find.byType(Divider)); final Rect dividerRect = tester.getRect(find.byType(Divider));
final Rect lineRect = tester.getRect(find.byType(DecoratedBox)); final Rect lineRect = tester.getRect(find.byType(DecoratedBox));
@ -143,9 +142,8 @@ void main() {
group('Vertical Divider', () { group('Vertical Divider', () {
testWidgets('Passing no DividerThemeData returns defaults', (WidgetTester tester) async { testWidgets('Passing no DividerThemeData returns defaults', (WidgetTester tester) async {
await tester.pumpWidget(MaterialApp( await tester.pumpWidget(const MaterialApp(
theme: ThemeData(useMaterial3: true), home: Scaffold(
home: const Scaffold(
body: VerticalDivider(), body: VerticalDivider(),
), ),
)); ));
@ -156,10 +154,10 @@ void main() {
final Container container = tester.widget(find.byType(Container)); final Container container = tester.widget(find.byType(Container));
final BoxDecoration decoration = container.decoration! as BoxDecoration; final BoxDecoration decoration = container.decoration! as BoxDecoration;
final Border border = decoration.border! as Border; final Border border = decoration.border! as Border;
expect(border.left.width, 1.0); expect(border.left.width, 0.0);
final ThemeData theme = ThemeData(); final ThemeData theme = ThemeData();
expect(border.left.color, theme.colorScheme.outlineVariant); expect(border.left.color, theme.dividerColor);
final Rect dividerRect = tester.getRect(find.byType(VerticalDivider)); final Rect dividerRect = tester.getRect(find.byType(VerticalDivider));
final Rect lineRect = tester.getRect(find.byType(DecoratedBox)); final Rect lineRect = tester.getRect(find.byType(DecoratedBox));
@ -227,62 +225,6 @@ void main() {
expect(lineRect.bottom, dividerRect.bottom - endIndent); expect(lineRect.bottom, dividerRect.bottom - endIndent);
}); });
}); });
group('Material 2', () {
// Tests that are only relevant for Material 2. Once ThemeData.useMaterial3
// is turned on by default, these tests can be removed.
group('Horizontal Divider', () {
testWidgets('Passing no DividerThemeData returns defaults', (WidgetTester tester) async {
await tester.pumpWidget(const MaterialApp(
home: Scaffold(
body: Divider(),
),
));
final RenderBox box = tester.firstRenderObject(find.byType(Divider));
expect(box.size.height, 16.0);
final Container container = tester.widget(find.byType(Container));
final BoxDecoration decoration = container.decoration! as BoxDecoration;
expect(decoration.border!.bottom.width, 0.0);
final ThemeData theme = ThemeData();
expect(decoration.border!.bottom.color, theme.dividerColor);
final Rect dividerRect = tester.getRect(find.byType(Divider));
final Rect lineRect = tester.getRect(find.byType(DecoratedBox));
expect(lineRect.left, dividerRect.left);
expect(lineRect.right, dividerRect.right);
});
});
group('Vertical Divider', () {
testWidgets('Passing no DividerThemeData returns defaults', (WidgetTester tester) async {
await tester.pumpWidget(const MaterialApp(
home: Scaffold(
body: VerticalDivider(),
),
));
final RenderBox box = tester.firstRenderObject(find.byType(VerticalDivider));
expect(box.size.width, 16.0);
final Container container = tester.widget(find.byType(Container));
final BoxDecoration decoration = container.decoration! as BoxDecoration;
final Border border = decoration.border! as Border;
expect(border.left.width, 0.0);
final ThemeData theme = ThemeData();
expect(border.left.color, theme.dividerColor);
final Rect dividerRect = tester.getRect(find.byType(VerticalDivider));
final Rect lineRect = tester.getRect(find.byType(DecoratedBox));
expect(lineRect.top, dividerRect.top);
expect(lineRect.bottom, dividerRect.bottom);
});
});
});
} }
DividerThemeData _dividerTheme() { DividerThemeData _dividerTheme() {