Use OverflowBar instead of ButtonBar in TimePicker (#62601)

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

@@ -11,8 +11,6 @@ import 'package:flutter/rendering.dart';
 import 'package:flutter/services.dart';
 import 'package:flutter/widgets.dart';
 
-import 'button_bar.dart';
-import 'button_theme.dart';
 import 'color_scheme.dart';
 import 'colors.dart';
 import 'constants.dart';
@@ -1827,9 +1825,13 @@ class _TimePickerDialogState extends State<_TimePickerDialog> {
               : MaterialLocalizations.of(context).dialModeButtonLabel,
         ),
         Expanded(
-          // TODO(rami-a): Move away from ButtonBar to avoid https://github.com/flutter/flutter/issues/53378.
+          child: Container(
-          child: ButtonBar(
+            alignment: AlignmentDirectional.centerEnd,
-            layoutBehavior: ButtonBarLayoutBehavior.constrained,
+            constraints: const BoxConstraints(minHeight: 52.0),
+            padding: const EdgeInsets.symmetric(horizontal: 8),
+            child: OverflowBar(
+              spacing: 8,
+              overflowAlignment: OverflowBarAlignment.end,
               children: <Widget>[
                 TextButton(
                   onPressed: _handleCancel,
@@ -1842,6 +1844,7 @@ class _TimePickerDialogState extends State<_TimePickerDialog> {
               ],
             ),
           ),
+        ),
       ],
     );
 

packages/flutter/test/material/time_picker_test.dart

@@ -643,9 +643,55 @@ void _tests() {
     expect(find.text(helperText), findsOneWidget);
   });
 
-  // TODO(rami-a): Re-enable and fix test.
+  testWidgets('OK Cancel button layout', (WidgetTester tester) async {
-  testWidgets('text scale affects certain elements and not others',
+    Widget buildFrame(TextDirection textDirection) {
-          (WidgetTester tester) async {
+      return MaterialApp(
+        home: Material(
+          child: Center(
+            child: Builder(
+              builder: (BuildContext context) {
+                return ElevatedButton(
+                  child: const Text('X'),
+                  onPressed: () {
+                    showTimePicker(
+                      context: context,
+                      initialTime: const TimeOfDay(hour: 7, minute: 0),
+                      builder: (BuildContext context, Widget child) {
+                        return Directionality(
+                          textDirection: textDirection,
+                          child: child,
+                        );
+                      },
+                    );
+                  },
+                );
+              },
+            ),
+          ),
+        ),
+      );
+    }
+
+    await tester.pumpWidget(buildFrame(TextDirection.ltr));
+    await tester.tap(find.text('X'));
+    await tester.pumpAndSettle();
+    expect(tester.getBottomRight(find.text('OK')).dx, 638);
+    expect(tester.getBottomLeft(find.text('OK')).dx, 610);
+    expect(tester.getBottomRight(find.text('CANCEL')).dx, 576);
+    await tester.tap(find.text('OK'));
+    await tester.pumpAndSettle();
+
+    await tester.pumpWidget(buildFrame(TextDirection.rtl));
+    await tester.tap(find.text('X'));
+    await tester.pumpAndSettle();
+    expect(tester.getBottomLeft(find.text('OK')).dx, 162);
+    expect(tester.getBottomRight(find.text('OK')).dx, 190);
+    expect(tester.getBottomLeft(find.text('CANCEL')).dx, 224);
+    await tester.tap(find.text('OK'));
+    await tester.pumpAndSettle();
+  });
+
+  testWidgets('text scale affects certain elements and not others', (WidgetTester tester) async {
     await mediaQueryBoilerplate(
       tester,
       false,