Skip to content

Widget Divider not selecting proper color per docs. #190534

Closed
flutter/packages
#12967

Description

@jpeiffer

Steps to reproduce

The Divider widget has the following documentation on the color field.

  /// The color to use when painting the line.
  ///
  /// If this is null, then the [DividerThemeData.color] is used. If that is
  /// also null, then [ThemeData.dividerColor] is used.

However, when looking at the code that performs the build, it is as follows:

  static BorderSide createBorderSide(BuildContext? context, {Color? color, double? width}) {
    final DividerThemeData? dividerTheme = context != null ? DividerTheme.of(context) : null;
    final DividerThemeData? defaults = context != null
        ? Theme.of(context).useMaterial3
              ? _DividerDefaultsM3(context)
              : _DividerDefaultsM2(context)
        : null;
    final Color? effectiveColor = color ?? dividerTheme?.color ?? defaults?.color;
    final double effectiveWidth = width ?? dividerTheme?.thickness ?? defaults?.thickness ?? 0.0;

    // Prevent assertion since it is possible that context is null and no color
    // is specified.
    if (effectiveColor == null) {
      return BorderSide(width: effectiveWidth);
    }
    return BorderSide(color: effectiveColor, width: effectiveWidth);
  }

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final DividerThemeData dividerTheme = DividerTheme.of(context);
    final DividerThemeData defaults = theme.useMaterial3
        ? _DividerDefaultsM3(context)
        : _DividerDefaultsM2(context);
    final double height = this.height ?? dividerTheme.space ?? defaults.space!;
    final double thickness = this.thickness ?? dividerTheme.thickness ?? defaults.thickness!;
    final double indent = this.indent ?? dividerTheme.indent ?? defaults.indent!;
    final double endIndent = this.endIndent ?? dividerTheme.endIndent ?? defaults.endIndent!;

    return SizedBox(
      height: height,
      child: Center(
        child: Container(
          height: thickness,
          margin: EdgeInsetsDirectional.only(start: indent, end: endIndent),
          decoration: BoxDecoration(
            borderRadius: radius ?? dividerTheme.radius ?? defaults.radius,
            border: Border(
              bottom: createBorderSide(context, color: color, width: thickness),
            ),
          ),
        ),
      ),
    );
  }

The defaults get set to either _DividerDefaultsM3 or _DividerDefaultsM2 which depends if Material3 is used or not (M3 is now the default).

The code for those classes is:

class _DividerDefaultsM2 extends DividerThemeData {
  const _DividerDefaultsM2(this.context) : super(space: 16, thickness: 0, indent: 0, endIndent: 0);

  final BuildContext context;

  @override
  Color? get color => Theme.of(context).dividerColor;
}

// 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.

// dart format off
class _DividerDefaultsM3 extends DividerThemeData {
  const _DividerDefaultsM3(this.context) : super(
    space: 16,
    thickness: 1.0,
    indent: 0,
    endIndent: 0,
  );

  final BuildContext context;

  @override Color? get color => Theme.of(context).colorScheme.outlineVariant;
}

So the actual ThemeData.dividerColor is only used when Material3 is false. When Material3 is true, the actual value used is ThemeData.colorScheme.outlineVariant.

Expected results

Either the docs are correct, or the ThemeData.dividerColor is utilized as the docs state it should be.

Actual results

When using the default theme mode (Material3), the ThemeData.dividerColor is not used and instead the undocumented value of ThemeData.colorScheme.outlineVariant is used.

Code sample

Code sample
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData.dark().copyWith(dividerColor: Colors.redAccent),
      home: Scaffold(
        body: Column(
          children: [
            SizedBox(height: 16.0),
            Text('No Color'),
            Divider(),
            SizedBox(height: 16.0),
            Text('Color'),
            Divider(color: Colors.redAccent),
          ],
        ),
      ),
    ),
  );
}

Screenshots or Video

Screenshots / Video demonstration Image

Logs

Logs
[Paste your logs here]

Flutter Doctor output

Doctor output
[✓] Flutter (Channel stable, 3.44.8, on macOS 26.6 25G72 darwin-arm64, locale en-US) [207ms]
    • Flutter version 3.44.8 on channel stable at [...]
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 058e0af2c2 (12 days ago), 2026-07-23 10:56:21 -0700
    • Engine revision 0cd610717b
    • Dart version 3.12.2
    • DevTools version 2.57.0
    • Feature flags: enable-web, enable-linux-desktop, enable-macos-desktop, enable-windows-desktop, enable-android, enable-ios, cli-animations, enable-native-assets, enable-swift-package-manager, omit-legacy-version-file, enable-lldb-debugging, enable-uiscene-migration

[!] Android toolchain - develop for Android devices (Android SDK version 37.0.0) [1,416ms]
    • Android SDK at [...]
    • Emulator version 36.6.11.0 (build_id 15507667) (CL:N/A)
    • Platform android-37.1, build-tools 37.0.0
    • ANDROID_HOME = [...]
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
      This is the JDK bundled with the latest Android Studio installation on this machine.
      To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
    • Java version OpenJDK Runtime Environment (build 21.0.10+-117844308-b1163.108)
    ! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses

[✓] Xcode - develop for iOS and macOS (Xcode 26.6) [1,199ms]
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 17F113
    • CocoaPods version 1.17.0

[✓] Chrome - develop for the web [4ms]
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Connected device (2 available) [5.7s]
    • macOS (desktop) • macos  • darwin-arm64   • macOS 26.6 25G72 darwin-arm64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 151.0.7922.72

[✓] Network resources [165ms]
    • All expected network resources are available.

Activity

  1. added
    frameworkflutter/packages/flutter repository. See also f: labels.
    p: material_uimaterial_ui package in flutter/packages
    in triagePresently being triaged by the triage team
    d: api docsIssues with https://api.flutter.dev/
    team-designOwned by Design Languages team
    on Aug 5, 2026
  2. mbcorona commented on Aug 5, 2026

    @mbcorona
    Member

    Confirmed from source on 3.44.8: the Divider.color doc lists the fallback as DividerThemeData.color then ThemeData.dividerColor, but _DividerDefaultsM3 resolves color to colorScheme.outlineVariant, so ThemeData.dividerColor only applies under Material 2.

    Pr Noted #190535 .

    Routing to the Design team.

  3. added
    P2Important issues not at the top of the work list
    triaged-designTriaged by Design Languages team
    on Aug 5, 2026
  4. added
    packageflutter/packages repository. See also p: labels.
    and removed
    frameworkflutter/packages/flutter repository. See also f: labels.
    on Aug 17, 2026
  5. github-actions commented on Nov 5, 2026

    @github-actions

    This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

  6. locked as resolved and limited conversation to collaborators on Nov 5, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work listd: api docsIssues with https://api.flutter.dev/found in release: 3.44Found to occur in 3.44p: material_uimaterial_ui package in flutter/packagespackageflutter/packages repository. See also p: labels.team-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