Một ứng dụng tốt chỉ cần chạy đúng logic. Nhưng một ứng dụng đẳng cấp thì phải khiến người dùng cảm thấy “sướng” khi chạm vào.

Bí mật nằm ở Animation. Từ một hiệu ứng trượt nhẹ, một cú nảy đàn hồi, đến một biểu tượng loading quay tít – tất cả tạo nên trải nghiệm người dùng (UX) mượt mà. Trong Flutter, làm animation dễ hơn bạn nghĩ.

1. Implicit Animation: Mì ăn liền

Nếu bạn chỉ muốn:“Khi user bấm nút, cái hộp đổi màu từ đỏ sang xanh”, hãy dùng Implicit Animation.
Bạn không cần quan tâm đến Controller hay Ticks, chỉ cần đổi giá trị, Flutter sẽ tự vẽ phần chuyển động ở giữa.

Ví dụ với AnimatedContainer:

AnimatedContainer(
  duration: Duration(seconds: 1), // Thời gian chuyển đổi
  curve: Curves.fastOutSlowIn,    // Hiệu ứng gia tốc
  width: _selected ? 200.0 : 100.0,
  color: _selected ? Colors.blue : Colors.red,
  child: FlutterLogo(size: 75),
)

2. Explicit Animation: Kiểm soát tuyệt đối

Khi bạn cần: “Cái hộp xoay 3 vòng, dừng lại 1 giây, rồi phình to ra, sau đó lặp lại mãi mãi”. Implicit bó tay. Lúc này cần Explicit Animation.

Bạn sẽ làm việc với AnimationController. Nó giống như một cái đồng hồ đếm giờ chạy từ 0.0 đến 1.0.

class MySpinner extends StatefulWidget { ... }

class _MySpinnerState extends State<MySpinner> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

  @override
  void initState() {
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(); // Chạy lặp lại
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: _controller,
      child: const Icon(Icons.refresh, size: 50),
    );
  }
}

3. Lottie: Đỉnh cao Animation không cần Code

Bạn không giỏi toán để vẽ các đường cong Bezier? Đừng lo. Hãy nhờ Designer vẽ trên After Effects, xuất ra file JSON (Lottie), và ném vào Flutter.

Cài gói lottie:

dependencies:
  lottie: ^2.7.0

Sử dụng:

Lottie.asset('assets/delivery_truck.json')

4. Mẹo tăng hiệu năng (Performance)

Animation đẹp mà giật lag thì vứt.
– Dùng const Widget bất cứ khi nào có thể.
– Tránh dùng setState ở widget cha quá cao trong cây Widget.
– Với Explicit Animation, hãy dùng AnimatedBuilder để chỉ vẽ lại phần cần thiết.

Chúng ta đã đi qua 9 bài học cốt lõi của Flutter. Từ cài đặt, Widget, State Management, API, Database đến Animation. Hành trang của bạn đã khá đầy đủ rồi.

Bài cuối cùng: Học xong rồi thì làm gì? Lộ trình sự nghiệp và Khóa học chuyên sâu.

👉 Tổng kết Series: Điểm đến tiếp theo cho sự nghiệp Flutter Dev

💡 Bạn muốn học cách tạo hiệu ứng Hero Animation, Custom Painter vẽ biểu đồ phức tạp?
Tất cả kỹ thuật UI nâng cao đều có trong: Khóa học Lập trình Flutter Thực chiến

Thành ĐT

Founder & Chief Technology Officer, HNDL

1.322 Bài viết

15.4k Người theo dõi

120k+ Lượt đọc

Chuyên gia với hơn 10 năm kinh nghiệm trong phát triển hệ thống giao dịch tự động (Trading Bot), Fintech, Mobile App và phân tích dữ liệu tài chính (Quantitative Analysis). Người sáng lập và trực tiếp dẫn dắt các khóa học thực chiến tại Hướng Nghiệp Dữ Liệu.

Theo dõi Liên hệ Zalo