Skip to content

Separator not vertically centered in Row with times #173713

@houssemeddinefadhli81

Description

@houssemeddinefadhli81

Steps to reproduce

This causes the separator to appear misaligned with the times. Removing crossAxisAlignment fixes the alignment.

  showTimePicker(
                                context: context,
                                initialTime: const TimeOfDay(hour: 12, minute: 0),
                                initialEntryMode: TimePickerEntryMode.input,
                                builder: (context, child) => Theme(
                                  data: Theme.of(context).copyWith(
                                    colorScheme: const ColorScheme.light(
                                      primary: Colors.deepPurple,
                                      onPrimary: Colors.white,
                                      onSurface: Colors.black,
                                    ),
                                    textButtonTheme: TextButtonThemeData(
                                      style: TextButton.styleFrom(
                                        foregroundColor: Colors.deepPurple,
                                      ),
                                    ),
                                  ),
                                  child: child ?? const SizedBox(),
                                ),
                              );
Image

Expected results

The separator should be vertically centered by default with the times.

Image

Actual results

The separator is misaligned and appears above the center of the times in the Row. Using crossAxisAlignment: CrossAxisAlignment.start causes the separator to be positioned at the top rather than vertically centered.

Code sample

Code sample
  showTimePicker(
                                context: context,
                                initialTime: const TimeOfDay(hour: 12, minute: 0),
                                initialEntryMode: TimePickerEntryMode.input,
                                builder: (context, child) => Theme(
                                  data: Theme.of(context).copyWith(
                                    colorScheme: const ColorScheme.light(
                                      primary: Colors.deepPurple,
                                      onPrimary: Colors.white,
                                      onSurface: Colors.black,
                                    ),
                                    textButtonTheme: TextButtonThemeData(
                                      style: TextButton.styleFrom(
                                        foregroundColor: Colors.deepPurple,
                                      ),
                                    ),
                                  ),
                                  child: child ?? const SizedBox(),
                                ),
                              );

Screenshots or Video

Screenshots / Video demonstration

[Upload media here]

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
% flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.32.8, on macOS 15.6 24G84 darwin-arm64, locale en-TN)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 16.4)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2025.1)
[✓] VS Code (version 1.103.0)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work lista: qualityA truly polished experiencec: regressionIt was better in the past than it is nowf: date/time pickerDate or time picker widgetsf: material designflutter/packages/flutter/material repository.found in release: 3.33Found to occur in 3.33frameworkflutter/packages/flutter repository. See also f: labels.has reproducible stepsThe issue has been confirmed reproducible and is ready to work onteam-designOwned by Design Languages teamtriaged-designTriaged by Design Languages team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions