Flutter Buttons

Interactive button widgets for user actions

🔘 What are Button Widgets?

Buttons are interactive widgets that respond to user taps. Flutter provides various button types like ElevatedButton, TextButton, and OutlinedButton for different design needs and user interactions. 


// Simple button example
ElevatedButton(
  onPressed: () {
    print('Button pressed!');
  },
  child: Text('Click Me'),
)

Output:

Button Types

🔵

ElevatedButton

Raised button with shadow 

ElevatedButton(
  onPressed: () {},
  child: Text('Elevated'),
)
📝

TextButton

Flat button without elevation 

TextButton(
  onPressed: () {},
  child: Text('Text'),
)
⭕

OutlinedButton

Button with border outline 

OutlinedButton(
  onPressed: () {},
  child: Text('Outlined'),
)
🎯

IconButton

Button with icon only 

IconButton(
  icon: Icon(Icons.favorite),
  onPressed: () {},
)

🔹 ElevatedButton

The most common button with elevation and shadow: 

ElevatedButton(
  onPressed: () {
    print('Elevated button pressed');
  },
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 30, vertical: 15),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Submit'),
)

Output:

🔹 TextButton

Simple flat button without background: 

TextButton(
  onPressed: () {
    print('Text button pressed');
  },
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
    padding: EdgeInsets.all(16),
  ),
  child: Text('Cancel'),
)

Output:

🔹 OutlinedButton

Button with border and no fill: 

OutlinedButton(
  onPressed: () {
    print('Outlined button pressed');
  },
  style: OutlinedButton.styleFrom(
    foregroundColor: Colors.green,
    side: BorderSide(color: Colors.green, width: 2),
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
  ),
  child: Text('Learn More'),
)

Output:

🔹 IconButton

Button displaying only an icon: 

IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.red,
  iconSize: 32,
  onPressed: () {
    print('Icon button pressed');
  },
)

Output:

🔹 FloatingActionButton

Circular button that floats above content: 

FloatingActionButton(
  onPressed: () {
    print('FAB pressed');
  },
  backgroundColor: Colors.orange,
  child: Icon(Icons.add),
)

Output:

🔹 Button with Icon

Combine text and icon in a button: 

ElevatedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.send),
  label: Text('Send Message'),
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.purple,
  ),
)

Output:

🧠 Test Your Knowledge

Which button has elevation and shadow by default?