🔘 Button Widgets

1. ElevatedButton

Button nổi có shadow, thường dùng cho primary action:

ElevatedButton(
  onPressed: () {
    print('Pressed!');
  },
  child: Text('Elevated Button'),
)

Styling

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    foregroundColor: Colors.white,
    padding: EdgeInsets.symmetric(horizontal: 24, vertical: 12),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Styled Button'),
)

---

2. TextButton

Button phẳng không có background, thường dùng cho secondary action:

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

Styling

TextButton(
  onPressed: () {},
  style: TextButton.styleFrom(
    foregroundColor: Colors.blue,
    padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
  ),
  child: Text('Styled Text Button'),
)

---

3. OutlinedButton

Button có viền, không có background:

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

Styling

OutlinedButton(
  onPressed: () {},
  style: OutlinedButton.styleFrom(
    foregroundColor: Colors.blue,
    side: BorderSide(color: Colors.blue, width: 2),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8),
    ),
  ),
  child: Text('Styled Outlined'),
)

---

4. IconButton

Button chỉ có icon:

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

Styling

IconButton(
  onPressed: () {},
  icon: Icon(Icons.favorite),
  color: Colors.red,
  iconSize: 30,
  splashRadius: 25,
)

---

5. FloatingActionButton

Button nổi hình tròn:

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

Extended FAB

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('Add Item'),
)

---

6. Button với Icon

ElevatedButton.icon

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

TextButton.icon

TextButton.icon(
  onPressed: () {},
  icon: Icon(Icons.download),
  label: Text('Download'),
)

OutlinedButton.icon

OutlinedButton.icon(
  onPressed: () {},
  icon: Icon(Icons.share),
  label: Text('Share'),
)

---

7. Disabled State

Đặt onPressed: null để disable:

ElevatedButton(
  onPressed: null,  // Disabled
  child: Text('Disabled Button'),
)

// Hoặc với điều kiện
ElevatedButton(
  onPressed: isValid ? () => submit() : null,
  child: Text('Submit'),
)

---

8. Loading Button

class LoadingButton extends StatefulWidget {
  @override
  State<LoadingButton> createState() => _LoadingButtonState();
}

class _LoadingButtonState extends State<LoadingButton> {
  bool _isLoading = false;

  Future<void> _handlePress() async {
    setState(() => _isLoading = true);
    await Future.delayed(Duration(seconds: 2));
    setState(() => _isLoading = false);
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      onPressed: _isLoading ? null : _handlePress,
      child: _isLoading
          ? SizedBox(
              width: 20,
              height: 20,
              child: CircularProgressIndicator(strokeWidth: 2),
            )
          : Text('Submit'),
    );
  }
}

---

9. So sánh các loại Button

Button	Use case	Style
ElevatedButton	Primary action	Nổi, có shadow
TextButton	Secondary, trong dialogs	Phẳng
OutlinedButton	Alternative action	Có viền
IconButton	Toolbar, actions	Chỉ icon
FloatingActionButton	Main action của screen	Nổi, góc màn hình

---

10. Ví dụ thực tế

Login Form Buttons

Column(
  crossAxisAlignment: CrossAxisAlignment.stretch,
  children: [
    ElevatedButton(
      onPressed: () {},
      style: ElevatedButton.styleFrom(
        padding: EdgeInsets.symmetric(vertical: 16),
      ),
      child: Text('Login'),
    ),
    SizedBox(height: 12),
    OutlinedButton(
      onPressed: () {},
      style: OutlinedButton.styleFrom(
        padding: EdgeInsets.symmetric(vertical: 16),
      ),
      child: Text('Create Account'),
    ),
    SizedBox(height: 8),
    TextButton(
      onPressed: () {},
      child: Text('Forgot Password?'),
    ),
  ],
)

Action Bar

Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    IconButton(icon: Icon(Icons.favorite_border), onPressed: () {}),
    IconButton(icon: Icon(Icons.comment), onPressed: () {}),
    IconButton(icon: Icon(Icons.share), onPressed: () {}),
    IconButton(icon: Icon(Icons.bookmark_border), onPressed: () {}),
  ],
)

Dialog Actions

AlertDialog(
  title: Text('Confirm'),
  content: Text('Are you sure?'),
  actions: [
    TextButton(
      onPressed: () => Navigator.pop(context),
      child: Text('Cancel'),
    ),
    ElevatedButton(
      onPressed: () {
        // Handle confirm
        Navigator.pop(context);
      },
      child: Text('Confirm'),
    ),
  ],
)

---

📝 Tóm tắt

Button	Constructor	Use case
ElevatedButton	.new, .icon	Primary action
TextButton	.new, .icon	Secondary action
OutlinedButton	.new, .icon	Alternative action
IconButton	.new	Icon-only action
FloatingActionButton	.new, .extended	Screen main action

Styling với styleFrom():

• backgroundColor - Màu nền
• foregroundColor - Màu text/icon
• padding - Padding
• shape - Shape (RoundedRectangleBorder, etc.)