How to apply different style to ElevatedButton with or without icons

Question

In my application I have many ElevatedButtons, which I style in the main theme. I need to style the ones with icon differently than the ones without icon.

Here is the code with only one property, which however applies to all ElevatedButtons, how can I select the ones with the icon and give them a different borderRadius?

@override
Widget build(BuildContext context) {
  return MaterialApp(
    theme: ThemeData(
      elevatedButtonTheme: ElevatedButtonThemeData(
        style: ElevatedButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.0),
          ),
        ),
      ),
    ),
  );
}

Answer 1

To achieve this, I'd suggest creating a custom widget as a wrapper for the elevated button. Example:

class CustomButton extends StatelessWidget {
  final Icon? icon;
  final VoidCallback? onPressed;
  final Widget child;

  const CustomButton({
    super.key,
    required this.child,
    this.icon,
    this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    final style = ButtonStyle(
      shape: MaterialStateProperty.all<RoundedRectangleBorder>(
        RoundedRectangleBorder(
          // Set the different border radius here
          borderRadius: BorderRadius.circular(icon != null ? 50.0 : 10.0),
        ),
      ),
    );

    return icon != null
        ? ElevatedButton.icon(
            onPressed: onPressed,
            icon: icon!,
            label: child,
            style: style,
          )
        : ElevatedButton(
            onPressed: onPressed,
            style: style,
            child: child,
          );
  }
}

The icon parameter is nullable (optional), if it's set, it should build a ElevatedButton.icon with its specified style. Otherwise, it builds a standard one with its style (which should be different from the ElevatedButton.icon's one).

Output:

Without icon:

CustomButton(
    onPressed: () {},
    child: const Text('Elevated Button'),
),

With icon:

CustomButton(
    icon: const Icon(Icons.add),
    onPressed: () {},
    child: const Text('Icon Elevated Button'),
),

---

Note that you could get rid of the style of the standard button (without icon) if you want to keep the style in the ThemeData of the main app widget. However, I'd not recommend it since there will be an explicit widget to handle the appearance of the elevated buttons.