154 lines
2.9 KiB
Markdown
154 lines
2.9 KiB
Markdown
---
|
|
name: widgets-buttons
|
|
description: Flutter button widgets - ElevatedButton, TextButton, OutlinedButton, IconButton, and button styling
|
|
---
|
|
|
|
# Button Widgets
|
|
|
|
Flutter provides several button widgets following Material Design guidelines.
|
|
|
|
## ElevatedButton
|
|
|
|
Raised button with elevation.
|
|
|
|
```dart
|
|
ElevatedButton(
|
|
onPressed: () {
|
|
// Handle press
|
|
},
|
|
onLongPress: () {
|
|
// Handle long press
|
|
},
|
|
style: ElevatedButton.styleFrom(
|
|
backgroundColor: Colors.blue,
|
|
foregroundColor: Colors.white,
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
|
shape: RoundedRectangleBorder(
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
),
|
|
child: const Text('Elevated Button'),
|
|
)
|
|
```
|
|
|
|
## TextButton
|
|
|
|
Flat button with text.
|
|
|
|
```dart
|
|
TextButton(
|
|
onPressed: () {
|
|
// Handle press
|
|
},
|
|
style: TextButton.styleFrom(
|
|
foregroundColor: Colors.blue,
|
|
padding: const EdgeInsets.all(16),
|
|
),
|
|
child: const Text('Text Button'),
|
|
)
|
|
```
|
|
|
|
## OutlinedButton
|
|
|
|
Button with outline border.
|
|
|
|
```dart
|
|
OutlinedButton(
|
|
onPressed: () {
|
|
// Handle press
|
|
},
|
|
style: OutlinedButton.styleFrom(
|
|
foregroundColor: Colors.blue,
|
|
side: const BorderSide(color: Colors.blue, width: 2),
|
|
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 12),
|
|
),
|
|
child: const Text('Outlined Button'),
|
|
)
|
|
```
|
|
|
|
## IconButton
|
|
|
|
Button with an icon.
|
|
|
|
```dart
|
|
IconButton(
|
|
onPressed: () {
|
|
// Handle press
|
|
},
|
|
icon: const Icon(Icons.favorite),
|
|
color: Colors.red,
|
|
iconSize: 24,
|
|
tooltip: 'Like',
|
|
)
|
|
```
|
|
|
|
## FilledButton
|
|
|
|
Filled button (Material 3).
|
|
|
|
```dart
|
|
FilledButton(
|
|
onPressed: () {
|
|
// Handle press
|
|
},
|
|
style: FilledButton.styleFrom(
|
|
backgroundColor: Colors.blue,
|
|
foregroundColor: Colors.white,
|
|
),
|
|
child: const Text('Filled Button'),
|
|
)
|
|
```
|
|
|
|
## ButtonBar
|
|
|
|
Group buttons horizontally.
|
|
|
|
```dart
|
|
ButtonBar(
|
|
alignment: MainAxisAlignment.center,
|
|
children: [
|
|
TextButton(onPressed: () {}, child: const Text('Cancel')),
|
|
ElevatedButton(onPressed: () {}, child: const Text('OK')),
|
|
],
|
|
)
|
|
```
|
|
|
|
## FloatingActionButton
|
|
|
|
Circular button that floats above content.
|
|
|
|
```dart
|
|
FloatingActionButton(
|
|
onPressed: () {
|
|
// Handle press
|
|
},
|
|
backgroundColor: Colors.blue,
|
|
foregroundColor: Colors.white,
|
|
child: const Icon(Icons.add),
|
|
)
|
|
|
|
// Extended FAB
|
|
FloatingActionButton.extended(
|
|
onPressed: () {},
|
|
icon: const Icon(Icons.add),
|
|
label: const Text('Add'),
|
|
)
|
|
```
|
|
|
|
## Key Points
|
|
|
|
- Use `ElevatedButton` for primary actions
|
|
- Use `TextButton` for secondary actions
|
|
- Use `OutlinedButton` for outlined style
|
|
- Use `IconButton` for icon-only actions
|
|
- Use `FilledButton` for Material 3 filled style
|
|
- Use `FloatingActionButton` for prominent floating actions
|
|
- Customize buttons with `styleFrom()` method
|
|
- Set `onPressed: null` to disable button
|
|
|
|
<!--
|
|
Source references:
|
|
- https://github.com/flutter/flutter/tree/main/packages/flutter/lib/src/material/button.dart
|
|
- https://docs.flutter.dev/development/ui/widgets/material#Buttons
|
|
-->
|