The ElevatedButton is a Material Design button that is commonly used to trigger actions when pressed. It elevates above the surface when interacted with, which gives users feedback that the button has been pressed. It's suitable for most types of user interactions in Flutter apps, such as submitting forms, navigating between screens, and triggering events.
¶ Component
import 'package:flutter/material.dart';
class ElevatedButtonComponent extends StatelessWidget {
final VoidCallback? onPressed;
final VoidCallback? onLongPress;
final Widget child;
final ButtonStyle? style;
final FocusNode? focusNode;
final bool autofocus;
final String? tooltip;
final Clip clipBehavior;
const ElevatedButtonComponent({
Key? key,
required this.onPressed,
required this.child,
this.onLongPress,
this.style,
this.focusNode,
this.autofocus = false,
this.tooltip,
this.clipBehavior = Clip.none,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return ElevatedButton(
onPressed: onPressed,
onLongPress: onLongPress,
child: child,
style: style,
focusNode: focusNode,
autofocus: autofocus,
clipBehavior: clipBehavior,
);
}
}
¶ How to Use
import 'package:flutter/material.dart';
import 'elevated_button_component.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('ElevatedButtonComponent Example')),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
// Standard button
ElevatedButtonComponent(
onPressed: () {
print('Button Pressed');
},
child: Text('Click Me'),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 5,
),
),
SizedBox(height: 20),
// Button with long press and tooltip
ElevatedButtonComponent(
onPressed: () {
print('Button Pressed');
},
onLongPress: () {
print('Long Press Detected');
},
tooltip: 'Hold to activate special action',
child: Text('Long Press Me'),
),
],
),
),
),
);
}
}
¶ Properties
¶ 1. onPressed
A callback function that defines the action to be performed when the button is pressed. If this is null, the button will be disabled (grayed out).
ElevatedButtonComponent(
onPressed: () {
print('Button Pressed');
},
child: Text('Click Me'),
)
¶ 2. onLongPress
A callback that is triggered when the button is long-pressed. If null, the button will not respond to long presses.
ElevatedButtonComponent(
onPressed: () {},
onLongPress: () {
print('Long Press Detected');
},
child: Text('Hold Me'),
)
¶ 3. child
The content displayed inside the button, typically a Text widget or an Icon. The child defines the button label or visual content.
ElevatedButtonComponent(
onPressed: () {},
child: Text('Submit'),
)
¶ 4. style
Customizes the button’s appearance, such as background color, text color, padding, shape, and elevation. You can use ElevatedButton.styleFrom or define custom ButtonStyle.
ElevatedButtonComponent(
onPressed: () {},
child: Text('Styled Button'),
style: ElevatedButton.styleFrom(
primary: Colors.blue, // Background color
onPrimary: Colors.white, // Text color
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
elevation: 5,
),
)
¶ 5. focusNode
A FocusNode that manages the focus state of the button. Useful for keyboard navigation or when the button needs to be programmatically focused.
FocusNode _focusNode = FocusNode();
ElevatedButtonComponent(
onPressed: () {},
focusNode: _focusNode,
child: Text('Button with Focus'),
)
¶ 6. autofocus
If set to true, the button will automatically receive focus when it's rendered.
ElevatedButtonComponent(
onPressed: () {},
autofocus: true,
child: Text('Autofocused Button'),
)
¶ 7. tooltip
Displays a tooltip when the user hovers or long-presses the button. This is useful for providing additional information about the button’s action.
ElevatedButtonComponent(
onPressed: () {},
tooltip: 'Click to perform action',
child: Text('Info'),
)
¶ 8. clipBehavior
Defines how the button content is clipped if it overflows its bounds. You can change the clipping behavior to Clip.antiAlias, Clip.hardEdge, or Clip.antiAliasWithSaveLayer.
ElevatedButtonComponent(
onPressed: () {},
clipBehavior: Clip.antiAlias,
child: Text('Clipped Button'),
)