toggleButtonsTheme static method

ToggleButtonsThemeData toggleButtonsTheme({ required ColorScheme colorScheme, double? radius, double borderWidth = kThinBorderWidth, Size minButtonSize = kButtonMinSize, VisualDensity? visualDensity, })

An opinionated ToggleButtonsThemeData theme.

The adjustable button corner radius defaults to 20 this is new default in M3, Flutter SDK M2 defaults to 4.

Button border width can be adjusted and defaults to same width as outline thickness on selected outline button and input decorator.

Unfortunately ToggleButtons cannot be themed to have different border width in disabled mode than enabled mode, like OutlinedButton can. If it is important that the themed border appears similar to the disabled border width, then keep the thin and thick outlined borders same or reasonably close to each other.

Implementation

static ToggleButtonsThemeData toggleButtonsTheme({
  /// Typically the same [ColorScheme] that is also use for your [ThemeData].
  required final ColorScheme colorScheme,

  /// The button corner radius.
  ///
  /// Defaults to 20 [kButtonRadius].
  final double? radius,

  /// The width of the borders around the toggle buttons.
  ///
  /// In this design it uses the same default as outline thickness for
  /// selected outline button and input decorator.
  ///
  /// Defaults to 1.5.
  final double borderWidth = kThinBorderWidth,

  /// Minimum button size.
  ///
  /// Defaults to Size(40, 40).
  final Size minButtonSize = kButtonMinSize,

  /// VisualDensity for ToggleButtons.
  ///
  /// The ToggleButtons do not implement VisualDensity from theme, but we can
  /// pass in what we use in ThemeData and adjust its size accordingly.
  ///
  /// You should pass in the same visual density that you set on your
  /// Theme to the ToggleButtons to make them keep the same size as the
  /// main buttons.
  ///
  /// Defaults to null, that results in VisualDensity.adaptivePlatformDensity
  /// being used, which is same as null default in ThemeData.
  final VisualDensity? visualDensity,
}) {
  final VisualDensity _visualDensity =
      visualDensity ?? VisualDensity.adaptivePlatformDensity;
  return ToggleButtonsThemeData(
    borderWidth: borderWidth,
    selectedColor: colorScheme.onPrimary.withAlpha(kSelectedAlpha),
    color: colorScheme.primary,
    fillColor:
        colorScheme.primary.blendAlpha(Colors.white, kAltPrimaryAlphaBlend),
    borderColor: colorScheme.primary.withAlpha(kEnabledBorderAlpha),
    selectedBorderColor:
        colorScheme.primary.blendAlpha(Colors.white, kAltPrimaryAlphaBlend),
    hoverColor: colorScheme.primary
        .blendAlpha(Colors.white, kHoverAlphaBlend + kAltPrimaryAlphaBlend)
        .withAlpha(kHoverAlpha),
    focusColor: colorScheme.primary
        .blendAlpha(Colors.white, kFocusAlphaBlend + kAltPrimaryAlphaBlend)
        .withAlpha(kFocusAlpha),
    highlightColor: colorScheme.primary
        .blendAlpha(
            Colors.white, kHighlightAlphaBlend + kAltPrimaryAlphaBlend)
        .withAlpha(kHighlightAlpha),
    splashColor: colorScheme.primary
        .blendAlpha(Colors.white, kSplashAlphaBlend + kAltPrimaryAlphaBlend)
        .withAlpha(kSplashAlpha),
    disabledColor: colorScheme.primary
        .blendAlpha(colorScheme.onSurface, kDisabledAlphaBlend)
        .withAlpha(kDisabledForegroundAlpha),
    disabledBorderColor: colorScheme.primary
        .blendAlpha(colorScheme.onSurface, kDisabledAlphaBlend)
        .withAlpha(kDisabledBackgroundAlpha),
    borderRadius: BorderRadius.circular(radius ?? kButtonRadius),
    constraints: BoxConstraints(
      // ToggleButtons draws its border outside its constraints, the
      // ShapeBorder on ElevatedButton, OutlinedButton and TextButton keep
      // their border inside its size constraints, to make ToggleButtons
      // same sized, we must adjust the min size shared constraint with
      // the border width for every side as well as make the VisualDensity
      // adjustment that the other buttons do via Theme automatically
      // based on theme setting, to do so this theme can accept a
      // VisualDensity property. Give it the same value that your theme
      // uses, defaults to same value that ThemeData default.
      minWidth: minButtonSize.width -
          borderWidth * 2 +
          _visualDensity.baseSizeAdjustment.dx,
      minHeight: minButtonSize.height -
          borderWidth * 2 +
          _visualDensity.baseSizeAdjustment.dy,
    ),
  );
}