Thủ thuật 1: Sử dụng Container với Gradient

Container là widget đa năng trong Flutter. Để tạo nền gradient, thêm BoxDecoration như sau:

Container(
  decoration: BoxDecoration(
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.purple],
      begin: Alignment.topLeft,
      end: Alignment.bottomRight,
    ),
  ),
  child: Center(child: Text("Hello Flutter!", style: TextStyle(color: Colors.white))),
)
      

Mẹo: Dùng const trước Container để tối ưu hiệu suất.

Thủ thuật 2: Tạo Card với Shadow

Sử dụng Card để làm nổi bật nội dung:

Card(
  elevation: 5,
  shadowColor: Colors.grey.withOpacity(0.5),
  child: ListTile(
    title: Text("Devrun Course"),
    subtitle: Text("Learn Flutter with us!"),
  ),
)
      

Mẹo: Điều chỉnh elevation để thay đổi độ đậm của bóng.

Thủ thuật 3: Responsive với MediaQuery

Đảm bảo UI tương thích mọi màn hình:

Container(
  width: MediaQuery.of(context).size.width * 0.8,
  height: MediaQuery.of(context).size.height * 0.2,
  color: Colors.blue,
)
      

Mẹo: Kết hợp AspectRatio để giữ tỷ lệ UI.

Thủ thuật 4: Thêm Animation Nhẹ Nhàng

Dùng AnimatedOpacity để tạo hiệu ứng fade:

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(seconds: 1),
  child: Text("Welcome to Flutter!"),
)
      

Mẹo: Sử dụng setState để kích hoạt animation.

Thủ thuật 5: Tùy Chỉnh Font với Google Fonts

Cài package google_fonts:

Text(
  "Learn Flutter",
  style: GoogleFonts.poppins(fontSize: 24, fontWeight: FontWeight.bold),
)
      

Mẹo: Tải trước font để tránh giật lag khi khởi động.

Kết luận

Với 5 thủ thuật này, bạn có thể tạo giao diện Flutter đẹp mắt mà không cần tốn nhiều công sức. Muốn thành thạo thiết kế UI chuyên nghiệp? Hãy tham gia khóa học Flutter cơ bản tại Devrun để học từ A-Z với các dự án thực tế!