Add support for Material 3 `Divider` and `VerticalDivider` (#112378)

dev/tools/gen_defaults/bin/gen_defaults.dart

@@ -24,6 +24,7 @@ import 'package:gen_defaults/button_template.dart';
 import 'package:gen_defaults/card_template.dart';
 import 'package:gen_defaults/checkbox_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/filter_chip_template.dart';
 import 'package:gen_defaults/icon_button_template.dart';
@@ -65,6 +66,7 @@ Future<void> main(List<String> args) async {
     'date_picker_docked.json',
     'date_picker_modal.json',
     'dialog.json',
+    'divider.json',
     'dialog_fullscreen.json',
     'elevation.json',
     'fab_extended_primary.json',
@@ -121,6 +123,7 @@ Future<void> main(List<String> args) async {
   CardTemplate('Card', '$materialLib/card.dart', tokens).updateFile();
   CheckboxTemplate('Checkbox', '$materialLib/checkbox.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();
   FilterChipTemplate('ChoiceChip', '$materialLib/choice_chip.dart', tokens).updateFile();
   FilterChipTemplate('FilterChip', '$materialLib/filter_chip.dart', tokens).updateFile();

dev/tools/gen_defaults/lib/divider_template.dart

+// 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")};
+}
+''';
+}

examples/api/lib/material/divider/divider.0.dart

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

examples/api/lib/material/divider/divider.1.dart

+// 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(),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

examples/api/lib/material/divider/vertical_divider.0.dart

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

examples/api/lib/material/divider/vertical_divider.1.dart

+// 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(),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

examples/api/test/material/divider/divider.0_test.dart

+// 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);
+  });
+}

examples/api/test/material/divider/divider.1_test.dart

+// 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);
+  });
+}

examples/api/test/material/divider/vertical_divider.0_test.dart

+// 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);
+  });
+}

examples/api/test/material/divider/vertical_divider.1_test.dart

+// 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);
+  });
+}

packages/flutter/lib/src/material/divider.dart

@@ -4,6 +4,7 @@
 
 import 'package:flutter/widgets.dart';
 
+import 'color_scheme.dart';
 import 'divider_theme.dart';
 import 'theme.dart';
 
@@ -34,6 +35,13 @@ import 'theme.dart';
 /// ** See code in examples/api/lib/material/divider/divider.0.dart **
 /// {@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:
 ///
 ///  * [PopupMenuDivider], which is the equivalent but for popup menus.
@@ -154,11 +162,14 @@ class Divider extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final ThemeData theme = Theme.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 thickness = this.thickness ?? dividerTheme.thickness ?? 0.0;
+    final double thickness = this.thickness ?? dividerTheme.thickness ?? defaults.thickness!;
     final double indent = this.indent ?? dividerTheme.indent ?? 0.0;
     final double endIndent = this.endIndent ?? dividerTheme.endIndent ?? 0.0;
+    final Color? color = this.color ?? defaults.color;
 
     return SizedBox(
       height: height,
@@ -195,6 +206,13 @@ class Divider extends StatelessWidget {
 /// ** See code in examples/api/lib/material/divider/vertical_divider.0.dart **
 /// {@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:
 ///
 ///  * [ListView.separated], which can be used to generate vertical dividers.
@@ -264,11 +282,14 @@ class VerticalDivider extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final ThemeData theme = Theme.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 thickness = this.thickness ?? dividerTheme.thickness ?? 0.0;
+    final double thickness = this.thickness ?? dividerTheme.thickness ?? defaults.thickness!;
     final double indent = this.indent ?? dividerTheme.indent ?? 0.0;
     final double endIndent = this.endIndent ?? dividerTheme.endIndent ?? 0.0;
+    final Color? color = this.color ?? defaults.color;
 
     return SizedBox(
       width: width,
@@ -286,3 +307,27 @@ 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

packages/flutter/test/material/divider_theme_test.dart

@@ -59,8 +59,9 @@ void main() {
 
   group('Horizontal Divider', () {
     testWidgets('Passing no DividerThemeData returns defaults', (WidgetTester tester) async {
-      await tester.pumpWidget(const MaterialApp(
-        home: Scaffold(
+      await tester.pumpWidget( MaterialApp(
+        theme: ThemeData(useMaterial3: true),
+        home: const Scaffold(
           body: Divider(),
         ),
       ));
@@ -70,10 +71,10 @@ void main() {
 
       final Container container = tester.widget(find.byType(Container));
       final BoxDecoration decoration = container.decoration! as BoxDecoration;
-      expect(decoration.border!.bottom.width, 0.0);
+      expect(decoration.border!.bottom.width, 1.0);
 
       final ThemeData theme = ThemeData();
-      expect(decoration.border!.bottom.color, theme.dividerColor);
+      expect(decoration.border!.bottom.color, theme.colorScheme.outlineVariant);
 
       final Rect dividerRect = tester.getRect(find.byType(Divider));
       final Rect lineRect = tester.getRect(find.byType(DecoratedBox));
@@ -142,8 +143,9 @@ void main() {
 
   group('Vertical Divider', () {
     testWidgets('Passing no DividerThemeData returns defaults', (WidgetTester tester) async {
-      await tester.pumpWidget(const MaterialApp(
-        home: Scaffold(
+      await tester.pumpWidget(MaterialApp(
+        theme: ThemeData(useMaterial3: true),
+        home: const Scaffold(
           body: VerticalDivider(),
         ),
       ));
@@ -154,10 +156,10 @@ void main() {
       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);
+      expect(border.left.width, 1.0);
 
       final ThemeData theme = ThemeData();
-      expect(border.left.color, theme.dividerColor);
+      expect(border.left.color, theme.colorScheme.outlineVariant);
 
       final Rect dividerRect = tester.getRect(find.byType(VerticalDivider));
       final Rect lineRect = tester.getRect(find.byType(DecoratedBox));
@@ -225,6 +227,62 @@ void main() {
       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() {