Cannot theme Shape and IconSize differently for different sized `FloatingActionButton`s

[rydmike]

Steps to Reproduce

If you create a FloatingActionButtonThemeData where you define properties for its shape and iconSize with the intent to replicate something similar that the M3 built in default behavior offers, which is having different border radius and icon size for different sized FABs, you cannot do that with a FAB theme.

If you e.g. have the design intent to use 2 dp smaller radius per FAB size class for it, than default design in M3, you cannot do so, because you cannot replicate the un-themed built in shape and iconSize behavior of the FAB.

The FAB does things like this, as part of its built in behavior when shape and iconSize is not defined:

  @override
  ShapeBorder? get shape {
    switch (type) {
      case _FloatingActionButtonType.regular:
       return const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0), bottomLeft: Radius.circular(16.0), bottomRight: Radius.circular(16.0)));
      case _FloatingActionButtonType.small:
       return const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(12.0), topRight: Radius.circular(12.0), bottomLeft: Radius.circular(12.0), bottomRight: Radius.circular(12.0)));
      case _FloatingActionButtonType.large:
       return const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(28.0), topRight: Radius.circular(28.0), bottomLeft: Radius.circular(28.0), bottomRight: Radius.circular(28.0)));
      case _FloatingActionButtonType.extended:
       return const RoundedRectangleBorder(borderRadius: BorderRadius.only(topLeft: Radius.circular(16.0), topRight: Radius.circular(16.0), bottomLeft: Radius.circular(16.0), bottomRight: Radius.circular(16.0)));
     }
  }

  @override
  double? get iconSize {
    switch (type) {
      case _FloatingActionButtonType.regular: return 24.0;
      case _FloatingActionButtonType.small: return  24.0;
      case _FloatingActionButtonType.large: return 36.0;
      case _FloatingActionButtonType.extended: return 24.0;
    }
  }

If we define FloatingActionButtonThemeData for the FAB, where we assign values to shape and/or iconSize, we can only define a single shape or iconSize that applies to all FAB constructors,

for example:

const myFabTheme = FloatingActionButtonThemeData(
  iconSize: 24,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(14.0),
      topRight: Radius.circular(14.0),
      bottomLeft: Radius.circular(14.0),
      bottomRight: Radius.circular(14.0),
    ),
  ),
);

we cannot set separate shape or iconSize theme properties that would apply only to a specific FAB size constructor to replicate similar behavior via theming.

Expected results

Expected to be able to replicate similar behavior on FAB like default un-themed behavior offers for different sized FABs, but with slightly different values than the default ones. However, there seems to be no way to do so:

Un-themed FAB styles	Themed FAB styles cannot replicate behavior

Proposal

When designing widgets and their themes, please consider not building in un-themed widget default styles and behavior that cannot be replicated when using a theme.

For convenience this sample can also be tested on DartPad here:
https://dartpad.dev/?id=463e5f993d5b8214d8c4f4cc471aebba

Code sample

// MIT License
//
// Copyright (c) 2022 Mike Rydstrom
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.

import 'package:flutter/material.dart';

// Light M3 ColorScheme.
const ColorScheme mySchemeLight = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xff386a20),
  onPrimary: Color(0xffffffff),
  primaryContainer: Color(0xffc0f0a4),
  onPrimaryContainer: Color(0xff042100),
  secondary: Color(0xff55624c),
  onSecondary: Color(0xffffffff),
  secondaryContainer: Color(0xffd9e7cb),
  onSecondaryContainer: Color(0xff131f0d),
  tertiary: Color(0xff386667),
  onTertiary: Color(0xffffffff),
  tertiaryContainer: Color(0xffbbebeb),
  onTertiaryContainer: Color(0xff002021),
  error: Color(0xffba1b1b),
  onError: Color(0xffffffff),
  errorContainer: Color(0xffffdad4),
  onErrorContainer: Color(0xff410001),
  outline: Color(0xff74796e),
  background: Color(0xfffdfdf6),
  onBackground: Color(0xff1a1c18),
  surface: Color(0xfffdfdf6),
  onSurface: Color(0xff1a1c18),
  surfaceVariant: Color(0xffdfe4d6),
  onSurfaceVariant: Color(0xff43493e),
  inverseSurface: Color(0xff2f312c),
  onInverseSurface: Color(0xfff1f1ea),
  inversePrimary: Color(0xff9cd67d),
  shadow: Color(0xff000000),
  surfaceTint: Color(0xff386a20),
);

// Dark M3 ColorScheme.
const ColorScheme mySchemeDark = ColorScheme(
  brightness: Brightness.dark,
  primary: Color(0xff9cd67d),
  onPrimary: Color(0xff0c3900),
  primaryContainer: Color(0xff205107),
  onPrimaryContainer: Color(0xffc0f0a4),
  secondary: Color(0xffbdcbb0),
  onSecondary: Color(0xff273420),
  secondaryContainer: Color(0xff3e4a36),
  onSecondaryContainer: Color(0xffd9e7cb),
  tertiary: Color(0xffa0cfcf),
  onTertiary: Color(0xff003738),
  tertiaryContainer: Color(0xff1e4e4e),
  onTertiaryContainer: Color(0xffbbebeb),
  error: Color(0xffffb4a9),
  onError: Color(0xff680003),
  errorContainer: Color(0xff930006),
  onErrorContainer: Color(0xffffb4a9),
  outline: Color(0xff8d9286),
  background: Color(0xff1a1c18),
  onBackground: Color(0xffe3e3dc),
  surface: Color(0xff1a1c18),
  onSurface: Color(0xffe3e3dc),
  surfaceVariant: Color(0xff43493e),
  onSurfaceVariant: Color(0xffc4c8bb),
  inverseSurface: Color(0xffe3e3dc),
  onInverseSurface: Color(0xff2f312c),
  inversePrimary: Color(0xff386a20),
  shadow: Color(0xff000000),
  surfaceTint: Color(0xff9cd67d),
);

const myFabTheme = FloatingActionButtonThemeData(
  iconSize: 24,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.only(
      topLeft: Radius.circular(14.0),
      topRight: Radius.circular(14.0),
      bottomLeft: Radius.circular(14.0),
      bottomRight: Radius.circular(14.0),
    ),
  ),
);

// Example theme -
ThemeData demoTheme(Brightness mode, bool useMaterial3, bool useFabTheme) =>
    mode == Brightness.light
        ? ThemeData(
            colorScheme: mySchemeLight,
            toggleableActiveColor:
                useMaterial3 ? mySchemeLight.primary : mySchemeLight.secondary,
            primaryColor: mySchemeLight.primary,
            primaryColorLight: Color.alphaBlend(
                Colors.white.withAlpha(0x66), mySchemeLight.primary),
            primaryColorDark: Color.alphaBlend(
                Colors.black.withAlpha(0x66), mySchemeLight.primary),
            secondaryHeaderColor: Color.alphaBlend(
                Colors.white.withAlpha(0xCC), mySchemeLight.primary),
            scaffoldBackgroundColor: mySchemeLight.background,
            canvasColor: mySchemeLight.background,
            backgroundColor: mySchemeLight.background,
            cardColor: mySchemeLight.surface,
            bottomAppBarColor: mySchemeLight.surface,
            dialogBackgroundColor: mySchemeLight.surface,
            indicatorColor: mySchemeLight.onPrimary,
            dividerColor: mySchemeLight.onSurface.withOpacity(0.12),
            errorColor: mySchemeLight.error,
            applyElevationOverlayColor: false,
            useMaterial3: useMaterial3,
            visualDensity: VisualDensity.standard,
            // Assign the FAB demo theme
            floatingActionButtonTheme: useFabTheme ? myFabTheme : null,
          )
        : ThemeData(
            colorScheme: mySchemeDark,
            toggleableActiveColor:
                useMaterial3 ? mySchemeDark.primary : mySchemeDark.secondary,
            primaryColor: mySchemeDark.primary,
            primaryColorLight: Color.alphaBlend(
                Colors.white.withAlpha(0x59), mySchemeDark.primary),
            primaryColorDark: Color.alphaBlend(
                Colors.black.withAlpha(0x72), mySchemeDark.primary),
            secondaryHeaderColor: Color.alphaBlend(
                Colors.black.withAlpha(0x99), mySchemeDark.primary),
            scaffoldBackgroundColor: mySchemeDark.background,
            canvasColor: mySchemeDark.background,
            backgroundColor: mySchemeDark.background,
            cardColor: mySchemeDark.surface,
            bottomAppBarColor: mySchemeDark.surface,
            dialogBackgroundColor: mySchemeDark.surface,
            indicatorColor: mySchemeDark.onBackground,
            dividerColor: mySchemeDark.onSurface.withOpacity(0.12),
            errorColor: mySchemeDark.error,
            applyElevationOverlayColor: true,
            useMaterial3: useMaterial3,
            visualDensity: VisualDensity.standard,
            // Assign the FAB demo theme
            floatingActionButtonTheme: useFabTheme ? myFabTheme : null,
          );

void main() {
  runApp(const IssueDemoApp());
}

class IssueDemoApp extends StatefulWidget {
  const IssueDemoApp({super.key});

  @override
  State<IssueDemoApp> createState() => _IssueDemoAppState();
}

class _IssueDemoAppState extends State<IssueDemoApp> {
  bool useMaterial3 = true;
  bool useFabTheme = true;
  ThemeMode themeMode = ThemeMode.light;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      themeMode: themeMode,
      theme: demoTheme(Brightness.light, useMaterial3, useFabTheme),
      darkTheme: demoTheme(Brightness.dark, useMaterial3, useFabTheme),
      home: Scaffold(
        appBar: AppBar(
          title: const Text(('FAB Theme Issue')),
          actions: [
            IconButton(
              icon: useFabTheme
                  ? const Icon(Icons.circle)
                  : const Icon(Icons.circle_outlined),
              onPressed: () {
                setState(() {
                  useFabTheme = !useFabTheme;
                });
              },
              tooltip: "Toggle FAB theme ${useFabTheme ? 'OFF' : 'ON'}",
            ),
            IconButton(
              icon: useMaterial3
                  ? const Icon(Icons.filter_3)
                  : const Icon(Icons.filter_2),
              onPressed: () {
                setState(() {
                  useMaterial3 = !useMaterial3;
                });
              },
              tooltip: "Switch to Material ${useMaterial3 ? 2 : 3}",
            ),
            IconButton(
              icon: themeMode == ThemeMode.dark
                  ? const Icon(Icons.wb_sunny_outlined)
                  : const Icon(Icons.wb_sunny),
              onPressed: () {
                setState(() {
                  if (themeMode == ThemeMode.light) {
                    themeMode = ThemeMode.dark;
                  } else {
                    themeMode = ThemeMode.light;
                  }
                });
              },
              tooltip: "Toggle brightness",
            ),
          ],
        ),
        body: HomePage(useFabTheme: useFabTheme),
        drawer: const Drawer(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({super.key, required this.useFabTheme});
  final bool useFabTheme;

  @override
  Widget build(BuildContext context) {
    final String materialType =
        Theme.of(context).useMaterial3 ? "Material 3" : "Material 2";
    return ListView(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      children: [
        const SizedBox(height: 8),
        Text(
          'Theme Demo - $materialType',
          style: Theme.of(context).textTheme.headlineSmall,
        ),
        const Divider(),
        const ShowColorSchemeColors(),
        const Divider(),
        const ShowThemeDataColors(),
        const Divider(),
        if (useFabTheme)
          const Text(
              'Cannot theme Shape and IconSize differently for different sized FABs'),
        if (!useFabTheme)
          const Text(
              'No theme has different Shape (in M3) and IconSize for different sized FABs'),
        const SizedBox(height: 8),
        const FabShowcase(),
        const Divider(),
      ],
    );
  }
}

/// Show look of different FABs
class FabShowcase extends StatelessWidget {
  const FabShowcase({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      crossAxisAlignment: WrapCrossAlignment.center,
      spacing: 8,
      runSpacing: 4,
      children: <Widget>[
        FloatingActionButton.small(
          heroTag: null,
          onPressed: () {},
          child: const Icon(Icons.accessibility),
        ),
        FloatingActionButton.extended(
          heroTag: null,
          isExtended: false,
          onPressed: () {},
          icon: const Icon(Icons.accessibility),
          label: const Text('Extended'),
        ),
        FloatingActionButton.extended(
          heroTag: null,
          isExtended: true,
          onPressed: () {},
          icon: const Icon(Icons.accessibility),
          label: const Text('Extended'),
        ),
        FloatingActionButton(
          heroTag: null,
          onPressed: () {},
          child: const Icon(Icons.accessibility),
        ),
        FloatingActionButton.large(
          heroTag: null,
          onPressed: () {},
          child: const Icon(Icons.accessibility),
        ),
      ],
    );
  }
}

/// Draw a number of boxes showing the colors of key theme color properties
/// in the ColorScheme of the inherited ThemeData and its color properties.
class ShowColorSchemeColors extends StatelessWidget {
  const ShowColorSchemeColors({super.key, this.onBackgroundColor});

  /// The color of the background the color widget are being drawn on.
  ///
  /// Some of the theme colors may have semi transparent fill color. To compute
  /// a legible text color for the sum when it shown on a background color, we
  /// need to alpha merge it with background and we need the exact background
  /// color it is drawn on for that. If not passed in from parent, it is
  /// assumed to be drawn on card color, which usually is close enough.
  final Color? onBackgroundColor;

  // Return true if the color is light, meaning it needs dark text for contrast.
  static bool _isLight(final Color color) =>
      ThemeData.estimateBrightnessForColor(color) == Brightness.light;

  // Return true if the color is dark, meaning it needs light text for contrast.
  static bool _isDark(final Color color) =>
      ThemeData.estimateBrightnessForColor(color) == Brightness.dark;

  // On color used when a theme color property does not have a theme onColor.
  static Color _onColor(final Color color, final Color bg) =>
      _isLight(Color.alphaBlend(color, bg)) ? Colors.black : Colors.white;

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final ColorScheme colorScheme = theme.colorScheme;
    final bool isDark = colorScheme.brightness == Brightness.dark;
    final bool useMaterial3 = theme.useMaterial3;

    // Grab the card border from the theme card shape
    ShapeBorder? border = theme.cardTheme.shape;
    // If we had one, copy in a border side to it.
    if (border is RoundedRectangleBorder) {
      border = border.copyWith(
        side: BorderSide(
          color: theme.dividerColor,
          width: 1,
        ),
      );
      // If
    } else {
      // If border was null, make one matching Card default, but with border
      // side, if it was not null, we leave it as it was.
      border ??= RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(useMaterial3 ? 12 : 4)),
        side: BorderSide(
          color: theme.dividerColor,
          width: 1,
        ),
      );
    }

    // Get effective background color.
    final Color background =
        onBackgroundColor ?? theme.cardTheme.color ?? theme.cardColor;

    // Warning label for scaffold background when it uses to much blend.
    final String surfaceTooHigh = isDark
        ? _isLight(theme.colorScheme.surface)
            ? '\nTOO HIGH'
            : ''
        : _isDark(theme.colorScheme.surface)
            ? '\nTOO HIGH'
            : '';

    // Warning label for scaffold background when it uses to much blend.
    final String backTooHigh = isDark
        ? _isLight(theme.colorScheme.background)
            ? '\nTOO HIGH'
            : ''
        : _isDark(theme.colorScheme.background)
            ? '\nTOO HIGH'
            : '';

    // Wrap this widget branch in a custom theme where card has a border outline
    // if it did not have one, but retains in ambient themed border radius.
    return Theme(
      data: Theme.of(context).copyWith(
        cardTheme: CardTheme.of(context).copyWith(
          elevation: 0,
          shape: border,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 8),
            child: Text(
              'ColorScheme Colors',
              style: theme.textTheme.titleMedium,
            ),
          ),
          Wrap(
            alignment: WrapAlignment.start,
            crossAxisAlignment: WrapCrossAlignment.center,
            spacing: 6,
            runSpacing: 6,
            children: <Widget>[
              ColorCard(
                label: 'Primary',
                color: colorScheme.primary,
                textColor: colorScheme.onPrimary,
              ),
              ColorCard(
                label: 'on\nPrimary',
                color: colorScheme.onPrimary,
                textColor: colorScheme.primary,
              ),
              ColorCard(
                label: 'Primary\nContainer',
                color: colorScheme.primaryContainer,
                textColor: colorScheme.onPrimaryContainer,
              ),
              ColorCard(
                label: 'onPrimary\nContainer',
                color: colorScheme.onPrimaryContainer,
                textColor: colorScheme.primaryContainer,
              ),
              ColorCard(
                label: 'Secondary',
                color: colorScheme.secondary,
                textColor: colorScheme.onSecondary,
              ),
              ColorCard(
                label: 'on\nSecondary',
                color: colorScheme.onSecondary,
                textColor: colorScheme.secondary,
              ),
              ColorCard(
                label: 'Secondary\nContainer',
                color: colorScheme.secondaryContainer,
                textColor: colorScheme.onSecondaryContainer,
              ),
              ColorCard(
                label: 'on\nSecondary\nContainer',
                color: colorScheme.onSecondaryContainer,
                textColor: colorScheme.secondaryContainer,
              ),
              ColorCard(
                label: 'Tertiary',
                color: colorScheme.tertiary,
                textColor: colorScheme.onTertiary,
              ),
              ColorCard(
                label: 'on\nTertiary',
                color: colorScheme.onTertiary,
                textColor: colorScheme.tertiary,
              ),
              ColorCard(
                label: 'Tertiary\nContainer',
                color: colorScheme.tertiaryContainer,
                textColor: colorScheme.onTertiaryContainer,
              ),
              ColorCard(
                label: 'on\nTertiary\nContainer',
                color: colorScheme.onTertiaryContainer,
                textColor: colorScheme.tertiaryContainer,
              ),
              ColorCard(
                label: 'Error',
                color: colorScheme.error,
                textColor: colorScheme.onError,
              ),
              ColorCard(
                label: 'on\nError',
                color: colorScheme.onError,
                textColor: colorScheme.error,
              ),
              ColorCard(
                label: 'Error\nContainer',
                color: colorScheme.errorContainer,
                textColor: colorScheme.onErrorContainer,
              ),
              ColorCard(
                label: 'onError\nContainer',
                color: colorScheme.onErrorContainer,
                textColor: colorScheme.errorContainer,
              ),
              ColorCard(
                label: 'Background$backTooHigh',
                color: colorScheme.background,
                textColor: colorScheme.onBackground,
              ),
              ColorCard(
                label: 'on\nBackground',
                color: colorScheme.onBackground,
                textColor: colorScheme.background,
              ),
              ColorCard(
                label: 'Surface$surfaceTooHigh',
                color: colorScheme.surface,
                textColor: colorScheme.onSurface,
              ),
              ColorCard(
                label: 'on\nSurface',
                color: colorScheme.onSurface,
                textColor: colorScheme.surface,
              ),
              ColorCard(
                label: 'Surface\nVariant',
                color: colorScheme.surfaceVariant,
                textColor: colorScheme.onSurfaceVariant,
              ),
              ColorCard(
                label: 'onSurface\nVariant',
                color: colorScheme.onSurfaceVariant,
                textColor: colorScheme.surfaceVariant,
              ),
              ColorCard(
                label: 'Outline',
                color: colorScheme.outline,
                textColor: colorScheme.background,
              ),
              ColorCard(
                label: 'Shadow',
                color: colorScheme.shadow,
                textColor: _onColor(colorScheme.shadow, background),
              ),
              ColorCard(
                label: 'Inverse\nSurface',
                color: colorScheme.inverseSurface,
                textColor: colorScheme.onInverseSurface,
              ),
              ColorCard(
                label: 'onInverse\nSurface',
                color: colorScheme.onInverseSurface,
                textColor: colorScheme.inverseSurface,
              ),
              ColorCard(
                label: 'Inverse\nPrimary',
                color: colorScheme.inversePrimary,
                textColor: colorScheme.primary,
              ),
              ColorCard(
                label: 'Surface\nTint',
                color: colorScheme.surfaceTint,
                textColor: colorScheme.onPrimary,
              ),
            ],
          ),
        ],
      ),
    );
  }
}

/// Draw a number of boxes showing the colors of key theme color properties
/// in the ColorScheme of the inherited ThemeData and some of its key color
/// properties.
class ShowThemeDataColors extends StatelessWidget {
  const ShowThemeDataColors({
    super.key,
    this.onBackgroundColor,
  });

  /// The color of the background the color widget are being drawn on.
  ///
  /// Some of the theme colors may have semi-transparent fill color. To compute
  /// a legible text color for the sum when it shown on a background color, we
  /// need to alpha merge it with background and we need the exact background
  /// color it is drawn on for that. If not passed in from parent, it is
  /// assumed to be drawn on card color, which usually is close enough.
  final Color? onBackgroundColor;

  // Return true if the color is light, meaning it needs dark text for contrast.
  static bool _isLight(final Color color) =>
      ThemeData.estimateBrightnessForColor(color) == Brightness.light;

  // Return true if the color is dark, meaning it needs light text for contrast.
  static bool _isDark(final Color color) =>
      ThemeData.estimateBrightnessForColor(color) == Brightness.dark;

  // On color used when a theme color property does not have a theme onColor.
  static Color _onColor(final Color color, final Color background) =>
      _isLight(Color.alphaBlend(color, background))
          ? Colors.black
          : Colors.white;

  @override
  Widget build(BuildContext context) {
    final ThemeData theme = Theme.of(context);
    final ColorScheme colorScheme = theme.colorScheme;
    final bool isDark = colorScheme.brightness == Brightness.dark;
    final bool useMaterial3 = theme.useMaterial3;

    // Grab the card border from the theme card shape
    ShapeBorder? border = theme.cardTheme.shape;
    // If we had one, copy in a border side to it.
    if (border is RoundedRectangleBorder) {
      border = border.copyWith(
        side: BorderSide(
          color: theme.dividerColor,
          width: 1,
        ),
      );
    } else {
      // If border was null, make one matching Card default, but with border
      // side, if it was not null, we leave it as it was.
      border ??= RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(useMaterial3 ? 12 : 4)),
        side: BorderSide(
          color: theme.dividerColor,
          width: 1,
        ),
      );
    }

    // Get effective background color.
    final Color background =
        onBackgroundColor ?? theme.cardTheme.color ?? theme.cardColor;

    // Warning label for scaffold background when it uses to much blend.
    final String scaffoldTooHigh = isDark
        ? _isLight(theme.scaffoldBackgroundColor)
            ? '\nTOO HIGH'
            : ''
        : _isDark(theme.scaffoldBackgroundColor)
            ? '\nTOO HIGH'
            : '';
    // Warning label for scaffold background when it uses to much blend.
    final String surfaceTooHigh = isDark
        ? _isLight(theme.colorScheme.surface)
            ? '\nTOO HIGH'
            : ''
        : _isDark(theme.colorScheme.surface)
            ? '\nTOO HIGH'
            : '';

    // Warning label for scaffold background when it uses to much blend.
    final String backTooHigh = isDark
        ? _isLight(theme.colorScheme.background)
            ? '\nTOO HIGH'
            : ''
        : _isDark(theme.colorScheme.background)
            ? '\nTOO HIGH'
            : '';

    // Wrap this widget branch in a custom theme where card has a border outline
    // if it did not have one, but retains in ambient themed border radius.
    return Theme(
      data: Theme.of(context).copyWith(
        cardTheme: CardTheme.of(context).copyWith(
          elevation: 0,
          shape: border,
        ),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            padding: const EdgeInsets.only(top: 8),
            child: Text(
              'ThemeData Colors',
              style: theme.textTheme.titleMedium,
            ),
          ),
          const SizedBox(height: 8),
          Wrap(
            spacing: 6,
            runSpacing: 6,
            crossAxisAlignment: WrapCrossAlignment.center,
            children: <Widget>[
              ColorCard(
                label: 'Primary\nColor',
                color: theme.primaryColor,
                textColor: _onColor(theme.primaryColor, background),
              ),
              ColorCard(
                label: 'Primary\nDark',
                color: theme.primaryColorDark,
                textColor: _onColor(theme.primaryColorDark, background),
              ),
              ColorCard(
                label: 'Primary\nLight',
                color: theme.primaryColorLight,
                textColor: _onColor(theme.primaryColorLight, background),
              ),
              ColorCard(
                label: 'Secondary\nHeader',
                color: theme.secondaryHeaderColor,
                textColor: _onColor(theme.secondaryHeaderColor, background),
              ),
              ColorCard(
                label: 'Toggleable\nActive',
                color: theme.toggleableActiveColor,
                textColor: _onColor(theme.toggleableActiveColor, background),
              ),
              ColorCard(
                label: 'Bottom\nAppBar',
                color: theme.bottomAppBarColor,
                textColor: _onColor(theme.bottomAppBarColor, background),
              ),
              ColorCard(
                label: 'Error\nColor',
                color: theme.errorColor,
                textColor: colorScheme.onError,
              ),
              ColorCard(
                label: 'Canvas$backTooHigh',
                color: theme.canvasColor,
                textColor: _onColor(theme.canvasColor, background),
              ),
              ColorCard(
                label: 'Card$surfaceTooHigh',
                color: theme.cardColor,
                textColor: _onColor(theme.cardColor, background),
              ),
              ColorCard(
                label: 'Scaffold\nBackground$scaffoldTooHigh',
                color: theme.scaffoldBackgroundColor,
                textColor: _onColor(theme.scaffoldBackgroundColor, background),
              ),
              ColorCard(
                label: 'Dialog',
                color: theme.dialogBackgroundColor,
                textColor: _onColor(theme.dialogBackgroundColor, background),
              ),
              ColorCard(
                label: 'Indicator\nColor',
                color: theme.indicatorColor,
                textColor: _onColor(theme.indicatorColor, background),
              ),
              ColorCard(
                label: 'Divider\nColor',
                color: theme.dividerColor,
                textColor: _onColor(theme.dividerColor, background),
              ),
              ColorCard(
                label: 'Disabled\nColor',
                color: theme.disabledColor,
                textColor: _onColor(theme.disabledColor, background),
              ),
              ColorCard(
                label: 'Hover\nColor',
                color: theme.hoverColor,
                textColor: _onColor(theme.hoverColor, background),
              ),
              ColorCard(
                label: 'Focus\nColor',
                color: theme.focusColor,
                textColor: _onColor(theme.focusColor, background),
              ),
              ColorCard(
                label: 'Highlight\nColor',
                color: theme.highlightColor,
                textColor: _onColor(theme.highlightColor, background),
              ),
              ColorCard(
                label: 'Splash\nColor',
                color: theme.splashColor,
                textColor: _onColor(theme.splashColor, background),
              ),
              ColorCard(
                label: 'Shadow\nColor',
                color: theme.shadowColor,
                textColor: _onColor(theme.shadowColor, background),
              ),
              ColorCard(
                label: 'Hint\nColor',
                color: theme.hintColor,
                textColor: _onColor(theme.hintColor, background),
              ),
              ColorCard(
                label: 'Selected\nRow',
                color: theme.selectedRowColor,
                textColor: _onColor(theme.selectedRowColor, background),
              ),
              ColorCard(
                label: 'Unselected\nWidget',
                color: theme.unselectedWidgetColor,
                textColor: _onColor(theme.unselectedWidgetColor, background),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

class ColorCard extends StatelessWidget {
  const ColorCard({
    super.key,
    required this.label,
    required this.color,
    required this.textColor,
    this.size,
  });

  final String label;
  final Color color;
  final Color textColor;
  final Size? size;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 86,
      height: 58,
      child: Card(
        margin: EdgeInsets.zero,
        clipBehavior: Clip.antiAlias,
        color: color,
        child: Center(
          child: Text(
            label,
            style: TextStyle(color: textColor, fontSize: 11),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

Flutter Doctor

flutter doctor -v
[✓] Flutter (Channel master, 3.1.0-0.0.pre.1731, on macOS 12.4 21F79 darwin-arm, locale
    en-US)
    • Flutter version 3.1.0-0.0.pre.1731 on channel master at
      /Users/rydmike/fvm/versions/master
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 2dc8bb18e8 (66 minutes ago), 2022-07-20 00:27:04 +0800
    • Engine revision a05ce5b352
    • Dart version 2.19.0 (build 2.19.0-10.0.dev)
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 32.1.0-rc1)
    • Android SDK at /Users/rydmike/Library/Android/sdk
    • Platform android-32, build-tools 32.1.0-rc1
    • Java binary at: /Applications/Android
      Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 13F17a
    • CocoaPods version 1.11.3

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

[✓] Android Studio (version 2021.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.12+0-b1504.28-7817840)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 67.1.4
    • Dart plugin version 221.5591.58

[✓] VS Code (version 1.69.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.44.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-arm64   • macOS 12.4 21F79 darwin-arm
    • Chrome (web)    • chrome • web-javascript • Google Chrome 103.0.5060.114

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[darrenaustin]

Thanks @rydmike for your usual detailed issue report!

This is a limitation of the current theme system. It is hard to support variants of widgets when there is only one theme data for all of them. There are a couple of possible solutions that come to mind, but neither are all that appealing:

Add separate theme data fields for each variation for a given property. This has already been done with the FAB's sizeConstraints:

• smallSizeConstraints
• largeSizeConstraints
• extendedSizeConstraints

While this works, it obviously doesn't scale very well as we need to do this for every theme property across all variants.

---

Another option we could pursue is to add a separate theme data for each variant:

• Expose an enum for the variants in a given widget:

  enum FloatingActionButtonVariant {
    regular,
    small,
    large,
    extended,
  }

• Add a variants map to the widget's theme data:

    final Map<FloatingActionButtonType, FloatingActionButtonThemeData>? variants;

  Which could be used as follows:

  FloatingActionBarThemeData fabTheme = FloatingActionBarThemeData(
    foregroundColor: Colors.blue,
    iconSize: 18,
    ...
    variants: {
      FloatingActionButtonVariant.large: FloatingActionButtonThemeData(
        iconSize: 22,
      ),
      FloatingActionButtonVariant.small: FloatingActionButtonThemeData(
        iconSize: 16,
      ),
  );

• When generating the value for a given property we would check for the value in the variant theme instead of the main theme if it exists:

   final ThemeData theme = Theme.of(context);
   final FloatingActionButtonThemeData floatingActionButtonTheme = theme.floatingActionButtonTheme;
  
   final FloatingActionButtonThemeData? effectiveTheme = floatingActionButtonTheme.variants?[variantType] ??floatingActionButtonTheme;
  
   ...
  
   final ShapeBorder shape = this.shape
     ?? effectiveTheme.shape
     ?? defaults.shape!;

This adds more complexity to every widget that has variants.

In addition, an issue with this is that most of the time apps would probably only want to override specific values in the variant themes, and in this case if you don't specify any other properties in the variant theme the property will be picked up from the defaults and not the main theme data. For example, perhaps you have configured all of the FAB colors to custom values in the main FloatingActionButtonThemeData. If you supply variant themes for each variant that just specify the shape and iconSize parameters, then it will will only check the variant theme data for everything including the colors which it doesn't have. You would need to replicate any values you configure in the main theme into each of the variant themes.

Of course this could be fixed by added even more complexity to the property construction with something like:

final ThemeData theme = Theme.of(context);
final FloatingActionButtonThemeData floatingActionButtonTheme = theme.floatingActionButtonTheme;
final FloatingActionButtonThemeData? variantTheme = floatingActionButtonTheme.variants?[variantType];

 ...

final ShapeBorder shape = this.shape
  ?? variantTheme?.shape
  ?? floatingActionButtonTheme.shape
  ?? defaults.shape!;

My main concern overall with this option is that it adds a fair amount of complexity and API that we will need to test, document and maintain across all widgets that have variants. That said, it does appear that the Material Design team have been leaning on the variant model for a lot of the widget designs, so it would be nice to have a way to support this for apps that need it. We just need to balance it against the costs.

Also if there is another option I am missing here, as always we are open to suggestions.

[guidezpl]

I'm curious if the resolution for variants could be done in the theme, so Theme.of(context).floatingActionButton.X would figure it out and we wouldn't have to touch anything in build methods.

[HansMuller]

The variant isn't apparent to a getter like Theme.of(context).floatingActionButtonTheme.shape and adding a variant parameter, like floatingActionButtonTheme(variant).shape wouldn't help in case where the value is a MaterialStateProperty. In that case, the correct effective value of a property would be:

final ThemeData theme = Theme.of(context);
final FloatingActionButtonThemeData floatingActionButtonTheme = theme.floatingActionButtonTheme;
final FloatingActionButtonThemeData? variantTheme = floatingActionButtonTheme.variants?[variantType];
Set<MaterialState> states; // kept in sync with the widget's state

 ...

final ShapeBorder shape = this.shape?.resolve(states)
  ?? variantTheme?.shape?.resolve(states)
  ?? floatingActionButtonTheme.shape?.resolve(states)
  ?? defaults.shape!.resolve(states)!;

Eagerly computing variantTheme?.shape ?? floatingActionButtonTheme.shape would break cases where the variant theme only returned non-null for some states.

[HansMuller]

Adding one line to expressions that resolve a property's value for widgets that support variants doesn't seem like too much of a burden, since it's borne by the widget, rather by users of the widget. Specifying variant themes seems about as clear as one could make it.

[rydmike]

Thanks @darrenaustin for your exquisite reply. Yes I agree, these cases do add more complexity to the widgets to be able to support this, or verbosity of having separate themes for all the variants, like the general material buttons do now.

On the other hand not being able to replicate what the widgets do as built-in default behavior via themes is quite frustrating. You basically have to create simple custom wrappers that use e.g. theme extensions with props with separate shape for them, in case you want themed FAB widgets with slightly different border radius per size than the M3 defaults gives you.

When FABs were circular in M2 this was less of an issue, since few thought of styling them differently, and it is still not a problem if you want to make them all circular now again, but if you want a gradually increasing border radius per FAB size increment, then it is a not possible if you want other values than M3 uses.

As for using a to lookup which variant theme to use, yes I agree, it would need null fall through via widget prop value, to variant theme prop value, then a "shared" props theme, to built-in defaults. Like you say complex, but it works well. I've done that for some custom widgets. FlexColorScheme also does it when you set globally shared border radius for "all" widgets regardless of type, as long as it has a shape and it does not defined it in its own theme, it will use that given radius instead, very practical for creating a custom theme with globally shared border radius and do a few overrides where something else is preferred.

I was at one point toying with the idea that something similar to MaterialStateProperty could be used, like e.g. MaterialVariantProperty to handle different variant styles. The challenge with that is probably that there is not enough commonality between the "variants" to make it very practical, although its types, things like Color, Shape and Size (both as Size and double), would probably be very common, but what the "variants" would be is certainly less common, its not as a homogeneous concept as the "state" in MaterialStateProperty.
Plus many devs ares till very confused about the MaterialStateProperty and not realizing how flexible and powerful it is, it may even feel a bit difficult. The excellent video with Craig probably helped many, I point people to it when they ask about MaterialStateProperty.

At the moment I have not come across too many widgets that have this theming limitation due to variants, at least not where it matters.

The general buttons are already handled with their own themes. Not sure about the new tonal button and its two variants, I will test it when it lands in master.

I don't think it is such a widespread problem yet, maybe it will not even become it, you know that better. At its current scope, perhaps a pragmatic approach with a few more props in the existing theme is the simplest solution.

One other case (so for it is the only additional one I have recorded as being an issuing in theming situations) is SnackBar and its theme. It has two behavior "styles", where the fixed behavior usually should not have a shape and have straight edges, but where the floating one has a border radius, in M2 it is 4 dp, in M3 probably something else, have not sen the spec for it yet. In any case, if you want to theme it to something else, then the shape you can specify in its theme applies to both behavior styles, so you cannot replicate the default null shape built-in different style for the fixed and floating behavior. I will open a separate issue for its theme, tag you and link a ref to this case, and mention that it is related to this theming topic.

---

EDIT: Just for info, last comment I saw when I added this comment was the one from @darrenaustin, I just now saw all the later additions by @HansMuller above too, which sound like a good approach to me. Should be applicable to SnackBarTheme which suffers from this issue as well, but I will open a separate issue for it so it can be tracked separately.