---

Flutter Button And Action Widgets #

Purpose: Trigger user actions, perform navigation, or handle gestures and interactions.

Flutter Button and Action Widgets #

1. ElevatedButton #

Used for primary actions.
Comes with elevation (shadow effect).

ElevatedButton(
  onPressed: () {
    print("Button Pressed");
  },
  child: Text('Submit'),
)

With Custom Style:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
  ),
  onPressed: () {},
  child: Text('Login'),
)

---

2. TextButton #

Used for secondary or minimal actions (flat design).

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

---

3. OutlinedButton #

Used for outlined or neutral actions.

OutlinedButton(
  onPressed: () {},
  child: Text('Learn More'),
)

Custom Border Example:

OutlinedButton(
  style: OutlinedButton.styleFrom(
    side: BorderSide(color: Colors.blue, width: 2),
  ),
  onPressed: () {},
  child: Text('Outlined'),
)

---

4. IconButton #

Used for icons that perform quick actions (like delete, share, etc.).

IconButton(
  icon: Icon(Icons.favorite),
  color: Colors.red,
  onPressed: () {
    print('Liked!');
  },
)

---

5. FloatingActionButton (FAB) #

Circular button for main app actions (like “Add”).

FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.blue,
  child: Icon(Icons.add),
)

Extended FAB:

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.send),
  label: Text('Send'),
)

---

6. PopupMenuButton #

Shows a dropdown-like menu of options.

PopupMenuButton<String>(
  onSelected: (value) => print('Selected: $value'),
  itemBuilder: (context) => [
    PopupMenuItem(value: 'Edit', child: Text('Edit')),
    PopupMenuItem(value: 'Delete', child: Text('Delete')),
  ],
)

---

7. DropdownButton #

Used to select one option from a list.

String? selectedValue;

DropdownButton<String>(
  value: selectedValue,
  hint: Text('Select Option'),
  items: ['One', 'Two', 'Three']
      .map((e) => DropdownMenuItem(value: e, child: Text(e)))
      .toList(),
  onChanged: (value) {
    selectedValue = value;
  },
)

---

Gesture & Touch Interaction #

8. InkWell #

Adds ripple effect when tapped (Material design).

InkWell(
  onTap: () {
    print('Tapped InkWell');
  },
  child: Container(
    padding: EdgeInsets.all(16),
    child: Text('Tap Me'),
  ),
)

---

9. GestureDetector #

Detects gestures like tap, drag, double-tap, or swipe — no visual feedback.

GestureDetector(
  onTap: () => print('Tapped!'),
  onDoubleTap: () => print('Double Tapped!'),
  onLongPress: () => print('Long Pressed!'),
  onPanUpdate: (details) => print('Dragging: ${details.delta}'),
  child: Container(
    color: Colors.amber,
    padding: EdgeInsets.all(20),
    child: Text('Gesture Area'),
  ),
)

---

📱 Mobile Responsive Tip #

Use LayoutBuilder or MediaQuery to adapt button sizes:

ElevatedButton(
  style: ElevatedButton.styleFrom(
    minimumSize: Size(MediaQuery.of(context).size.width * 0.8, 50),
  ),
  onPressed: () {},
  child: Text('Responsive Button'),
)