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

Author: TahaTesser

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

@@ -0,0 +1,24 @@
+// 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

@@ -0,0 +1,52 @@
+// 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

@@ -0,0 +1,52 @@
+// 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

@@ -0,0 +1,28 @@
+// 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

@@ -0,0 +1,28 @@
+// 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

@@ -0,0 +1,28 @@
+// 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

@@ -0,0 +1,28 @@
+// 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);
+  });
+}