A Button in Flutter is an interactive widget that performs an action when tapped. There are several types (ElevatedButton, TextButton, OutlinedButton, IconButton, etc.), but ElevatedButton is the standard for actions that need prominence.
Source Code
ElevatedButton(
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.teal,
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
elevation: 4,
),
child: Text(
'Submit',
style: TextStyle(fontSize: 16),
),
)
TextButton(
onPressed: () {
print('TextButton Pressed');
},
child: Text(
'Click Me',
style: TextStyle(fontSize: 16),
),
)
OutlinedButton(
onPressed: () {
print('OutlinedButton Pressed');
},
style: OutlinedButton.styleFrom(
side: BorderSide(color: Colors.teal),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 12),
),
child: Text('Outlined Button'),
)
IconButton(
icon: Icon(Icons.favorite, color: Colors.red),
iconSize: 30,
tooltip: 'Like',
onPressed: () {
print('IconButton Pressed');
},
)
Ai Code Analizer
🎨 3. Important Properties Used
| Property | Description |
|---|---|
onPressed | Required callback executed when button is tapped. |
child | The content inside the button (usually Text or Row). |
style | Styles the button using ElevatedButton.styleFrom() or ButtonStyle. |
backgroundColor | Button’s background color. |
foregroundColor | Text/icon color inside the button. |
padding | Internal spacing around the child. |
shape | Defines button shape and border radius. |
elevation | Adds drop shadow for depth. |
🔧 4. Other Common Button Types
| Button Type | Use Case |
|---|---|
TextButton | Minimal button, used for flat UI (e.g., links). |
OutlinedButton | Button with border but no fill — used for secondary actions. |
IconButton | Button that contains only an icon. |
FloatingActionButton | Circular button for primary actions (FAB). |