Flutter web button margins (Theme managed) (Custom modifications to button themes made by FlexColorScheme)

[Prayer-RecycleSmart]

Hey @rydmike, thank you so much for this fantastic package.

I have a question regarding MaterialTapTargetSize. How can I apply the different margin to unify web and mobile?
I am struggling to extend the elevatedButtonTheme, which is I think the correct way to address the issue from your docs.

For reference this is what I am trying to achieve: https://stackoverflow.com/questions/67580491/why-dont-the-buttons-in-flutter-web-have-a-margin

Thank you so much

[rydmike]

Hi @Prayer-RecycleSmart thank you for your question.

This is good question and complicated a bit by the different structure of the button themes compared to other component themes.

How to modify materialTapTargetSize on global ThemeData?

First off, as you probably figured out, if you want to set MaterialTapTargetSize globally for everything in your ThemeData to e.g. MaterialTapTargetSize.shrinkWrap you can do that with a simple copyWith on the ThemeData produced by FlexColorScheme:

      theme: FlexThemeData.light(
        scheme: FlexScheme.flutterDash,
        blendLevel: 18,
        appBarOpacity: 0.95,
        subThemesData: const FlexSubThemesData(
          blendOnLevel: 20,
          blendOnColors: false,
          unselectedToggleIsColored: true,
          fabUseShape: false,
          popupMenuOpacity: 0.95,
          bottomNavigationBarOpacity: 0.95,
          navigationBarOpacity: 0.95,
          navigationRailOpacity: 0.95,
        ),
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
      ).copyWith(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),
      darkTheme: FlexThemeData.dark(
        scheme: FlexScheme.flutterDash,
        blendLevel: 16,
        appBarStyle: FlexAppBarStyle.background,
        appBarOpacity: 0.95,
        subThemesData: const FlexSubThemesData(
          blendOnLevel: 24,
          unselectedToggleIsColored: true,
          fabUseShape: false,
          popupMenuOpacity: 0.95,
          bottomNavigationBarOpacity: 0.95,
          navigationBarOpacity: 0.95,
          navigationRailOpacity: 0.95,
          navigationRailLabelType: NavigationRailLabelType.none,
        ),
        visualDensity: FlexColorScheme.comfortablePlatformDensity,
      ).copyWith(
        materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      ),

I think I will add materialTapTargetSize as a simple passthrough like visualDensity and few other props it already has, in next version, just to make this even simpler. Although in this case this copyWith is very simple too.

How to modify materialTapTargetSize on a specific button theme?

This does not exists either in current sub component themes as a property on buttons in FCS. As always, it is of course possible to use the themes defined by FCS and add custom modifications to it with copyWith.

The use case is very much like the one described here #85 (reply in thread) and here #41. However, the button themes are a bit more complicated, since the themes have all their properties hidden in one single ButtonStyle property.

Let's explore how we can do it for their case as well.

This is again a case where it becomes easier (cleaner at least) if we first make the ThemeData with FlexColorScheme and use a helper function to manipulate it and return our final ThemeData. Below I used FlexColorScheme.light and later its toTheme, instead of FlexThemeData.light. However, in this case as we do not need access to the ColorScheme produced by FCS, the FlexThemeData.light usage would have worked just as well and actually been one step shorter.

I just based it on same example as the first one above. Plus if you later for additional modifications need its ColorScheme or some of its colors, in some other custom component themes, this setup supports adding that by extracting it with flexScheme.toScheme. If you don't need the ColorScheme for any other customizations you can of course use FlexThemeData.light and get the ThemeData directly without the flexScheme.toTheme step.

class Themes {
  static ThemeData light() {
    // Make the FlexColorScheme object, it is just a data object.
    final FlexColorScheme flexScheme = FlexColorScheme.light(
      scheme: FlexScheme.flutterDash,
      surfaceMode: FlexSurfaceMode.highScaffoldLowSurface,
      blendLevel: 20,
      appBarOpacity: 0.95,
      subThemesData: const FlexSubThemesData(
        blendOnLevel: 20,
        blendOnColors: false,
        elevatedButtonRadius: 12.0,
      ),
      visualDensity: FlexColorScheme.comfortablePlatformDensity,
    );
    // We can make the ThemeData it defines, it is easy to manipulate any
    // component themes it has already defined if we get its ThemeData.
    final ThemeData flexTheme = flexScheme.toTheme;
    // We can extract the elevated button theme it defines.
    final ElevatedButtonThemeData elevatedButtonTheme =
        flexTheme.elevatedButtonTheme;
    // The odd part with the button themes is that they don't have direct
    // theme properties, only a single ButtonStyle class that defines all its
    // styles and settings, this is same with the other buttons.
    // So let's grab that too.
    final ButtonStyle buttonStyle =
        elevatedButtonTheme.style ?? const ButtonStyle();
    // Now we can use copyWith to adjust the ThemeData we have, however
    // there is no "copyWith" on `ElevatedButtonThemeData`, but it only has one
    // property the `style` with a `ButtonStyle`, and it has a `copyWith`, so we can
    // do e.g. this to keep all other made FCS theme definitions and only change the
    // `tapTargetSize` in its `elevatedButtonTheme`.
    return flexTheme.copyWith(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: buttonStyle.copyWith(
            tapTargetSize: MaterialTapTargetSize.shrinkWrap),
      ),
    );
  }
 
  // Same setup with the dark theme.
  static ThemeData dark() {
    final FlexColorScheme flexScheme = FlexColorScheme.dark(
      scheme: FlexScheme.flutterDash,
      surfaceMode: FlexSurfaceMode.highBackgroundLowScaffold,
      blendLevel: 30,
      appBarOpacity: 0.90,
      subThemesData: const FlexSubThemesData(
        blendOnLevel: 20,
        elevatedButtonRadius: 12.0,
      ),
      visualDensity: FlexColorScheme.comfortablePlatformDensity,
    );
    final ThemeData flexTheme = flexScheme.toTheme;
    final ElevatedButtonThemeData elevatedButtonTheme =
        flexTheme.elevatedButtonTheme;
    final ButtonStyle buttonStyle =
        elevatedButtonTheme.style ?? const ButtonStyle();
    return flexTheme.copyWith(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: buttonStyle.copyWith(
            tapTargetSize: MaterialTapTargetSize.shrinkWrap),
      ),
    );
  }
}

You can do all that in another file, import it and in your MaterialApp use the above theme helpers.

class DemoApp extends StatelessWidget {
  const DemoApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Demo App',
      theme: Themes.light(),
      darkTheme: Themes.dark(),
      themeMode: ThemeMode.system,
      home: HomePage(),
    );
  }
}

In the doc tutorials I do a lot of small tricks like the above and using ChangeNotifier to support multiple themes and rebuild the app whenever a prop changes, but that is another story.

Conclusion

Modifying the button themes while keeping already made properties intact with copyWith is a bit tedious, but as shown above doable.

I could add tapTargetSize as supported property in the component themes in the API, for all buttons, but keep it out of Themes Playground, it would not be difficult, but it would grow the already huge property list in the flat FlexSubThemesData. If I keep adding stuff to it (two new button styles coming in M3 in next Flutter stable release, so many props needed for them), it will become quite unwieldily, well it already kind of is. So it is a balance, depends on how common this use case is. I could add it as feature poll and see if it get additional support over time. Meanwhile hopefully this answer properly answers your question and other that might want to do the same things.

Kind regards and happy theming,

/Mike 😄

[Prayer-RecycleSmart]

You are a Legend - the copyWith is tedious but definitely doable. As long as it contextual to the theme, I think that many of us have already used it multiple times in our codebase.

Thank you very much again