marianocordoba/fab-circular-menu

🎯 FAB Circular Menu — Menu tròn xoay từ FAB cho Flutter

Package nhẹ gọn biến Floating Action Button thành menu tròn trải ra với hiệu ứng animation đẹp mắt, lấy cảm hứng từ thiết kế FAB Microinteraction của Mayur Kshirsagar.

fab-circular-menu là một Flutter package do Mariano Córdoba phát triển, giải quyết bài toán phổ biến: cần nhiều action nhanh từ một FAB đơn lẻ mà không làm rối giao diện. Thay vì dùng bottom sheet hay dialog, package này cho menu các icon/action trải ra theo cung tròn xung quanh FAB khi nhấn — animation mượt, bán kính và độ rộng vòng tròn tự tính theo màn hình, hỗ trợ null safety và tùy biến gần như mọi khía cạnh giao diện.

✨ Điểm nổi bật

• Menu tròn từ FAB: Chuyển đổi FAB đơn thành menu radial với danh sách widget con tùy ý (IconButton, FloatingActionButton, v.v.)
• Animation cấu hình được: Thời lượng (animationDuration), đường cong (animationCurve — mặc định Curves.easeInOutCirc)
• Tùy biến hình thức đầy đủ: ringColor, ringDiameter, ringWidth, fabSize, fabElevation, fabColor, fabOpenColor, fabCloseColor, fabMargin, alignment
• Icon trạng thái mở/đóng: fabOpenIcon (mặc định Icons.menu), fabCloseIcon (mặc định Icons.close), hoặc thay bằng fabChild tùy chỉnh hoàn toàn
• Callback trạng thái: onDisplayChange trả về trạng thái mở/đóng mỗi lần thay đổi
• Điều khiển lập trình: Dùng GlobalKey<FabCircularMenuState> để open(), close(), kiểm tra isOpen từ bất kỳ đâu trong widget tree
• Hỗ trợ null safety: Sẵn sàng cho Flutter hiện đại

💡 Vì sao đáng chú ý

Khác với các giải pháp custom overlay hay stack phức tạp, fab-circular-menu gói gọn toàn bộ logic layout vòng tròn, animation và hit-testing vào một widget đơn giản — chỉ cần drop vào floatingActionButton của Scaffold. Tham số ringDiameter mặc định tính theo screenWidth * 1.25 (portrait) / screenHeight * 1.25 (landscape) giúp menu tự co giãn hợp lý trên mọi kích thước màn hình mà không cần tính toán thủ công. Việc expose state qua GlobalKey cho phép tích hợp với logic nghiệp vụ (ví dụ: đóng menu khi user navigate, hoặc mở từ nút bấm khác) mà không cần wrapper thêm. Package nhẹ (~1 file Dart chính), API tối giản, phù hợp cho app cần quick-actions gọn gàng, nhất quán Material Design.

---

#Flutter #FAB #CircularMenu #OpenSource #TiniX