Cannot change splash effect of ToggleButtons

[kaboc]

I file this as a bug rather than a feature request as it seems like lack of a feature.

It is possible to change the appearance of the splash effect in various widgets (ElevatedButton, InkWell, etc), but even if I apply a different effect type to most widgets, ToggleButtons remains unchanged and therefore looks inconsistent. InkRipple.splashFactory is always used.

flutter/packages/flutter/lib/src/material/toggle_buttons.dart

Line 767 in e8c0e46

splashFactory: InkRipple.splashFactory,

Steps to Reproduce

1. Execute flutter run on the code sample.
2. Tap on TextButton.
3. Tap on the toggle button to see the difference.

Expected results:

The sparkle effect configured in TextButtonThemeData is used in both TextButton and ToggleButtons.

Actual results:

The effect is only applied to the TextButton although ToggleButton uses TextButton internally.

Code sample

import 'package:flutter/material.dart';

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

class App extends StatefulWidget {
  const App();

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  var _index = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            splashFactory: InkSparkle.splashFactory,
          ),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                child: const Text('TextButton'),
                onPressed: () {},
              ),
              const SizedBox(height: 8.0),
              ToggleButtons(
                isSelected: List.generate(2, (i) => i == _index),
                onPressed: (index) => setState(() => _index = index),
                children: [
                  for (var i = 0; i < 2; i++) Text('$i'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

ToggleButtonsThemeData has the splashColor argument, but does not have style nor splashFactory, and ToggleButton itself does not have relevant arguments either.

[exaby73]

Hello @kaboc. I recommend you use SegmentedButton instead of ToggleButtons. SegmentedButton is meant to replace ToggleButtons and therefore it doesn't make sense to change and add to it's API now. Here is an example of the same code you provided, migrated to SegmentedButton:

import 'package:flutter/material.dart';

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

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

  @override
  State<App> createState() => _AppState();
}

class _AppState extends State<App> {
  var _index = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        segmentedButtonTheme: const SegmentedButtonThemeData(
          style: ButtonStyle(
            splashFactory: InkSparkle.splashFactory,
          ),
        ),
        textButtonTheme: TextButtonThemeData(
          style: TextButton.styleFrom(
            splashFactory: InkSparkle.splashFactory,
          ),
        ),
      ),
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextButton(
                onPressed: () {},
                child: const Text('TextButton'),
              ),
              const SizedBox(height: 8.0),
              SegmentedButton<int>(
                selected: {_index},
                onSelectionChanged: (index) => setState(
                  () => _index = index.first,
                ),
                segments: [
                  for (var i = 0; i < 2; i++)
                    ButtonSegment(
                      value: i,
                      label: Text('$i'),
                    ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Due to the above reasons, I am closing the issue. Thank you

[kaboc]

@exaby73
Thank you for showing the example. I've now finished replacing the widgets, and I found SegmentedButton is not the same as ToggleButtons. It is not possible to apply a different border colour to only the selected button in SegmentedButton, which is possible in ToggleButtons.

SegmentedButton is meant to replace ToggleButtons and therefore it doesn't make sense to change and add to it's API now.

Does it mean widgets for Material 2 will be deprecated and then removed in favour of Material 3? It doesn't seem very nice that we all have to move on to Material 3 and make a compromise with reduced features like no border colour setting for a selected button as I mentioned above. I'm kind of tired of being affected by changes in Material Design every time it happens. Please clarify at least whether we can keep using Meterial 2 widgets.

[exaby73]

I can see that a border is not being applied. You ca raise an issue for it :) Ultimately, M2 will get deprecated in the coming months and years. This is inline with Material Design Specifications and best practices

[kaboc]

Ultimately, M2 will get deprecated in the coming months and years.

Okay..., thanks you for clarification.

https://m3.material.io/components/segmented-buttons/overview#97f408eb-1e19-493f-919f-027b1ae9da00

It appears that selection is represented with a tick icon, not the border colour. I think it is the specification of the segmented button. It is very likely a new issue will be closed quickly even if I raise it, so I'd rather not do it. Thank you anyway.

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