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),
),
),
),
),
);
}
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.