Nút biểu tượng

Thuộc phần Tạo tính tương tác trong hành trình Flutter của Coddy. Bài học 4 trên 34.

Một số nút chỉ có biểu tượng: trái tim, thùng rác, mũi tên chia sẻ. Đó là một IconButton:

IconButton(
  icon: Icon(Icons.delete),
  onPressed: () {
    print('Deleted');
  },
)

Nút này không có child:. Thay vào đó, nút dùng icon:, chính là widget Icon bạn đã dùng trong phần đầu tiên. Khi chạm vào, một gợn sóng tròn xuất hiện quanh biểu tượng.

Bạn không thể chạm vào Icon thông thường, vì nó chỉ vẽ một hình ảnh. IconButton biến nó thành thứ bạn có thể nhấn.

Thử thách

Dễ

Sau dòng chữ Like this post, hãy thêm một IconButton với Icons.thumb_up để in ra Liked khi được nhấn.

Tự làm thử

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Like this post'),
            ],
          ),
        ),
      ),
    );
  }
}