Bài viết gần đây

| Xử lý ảnh & media trong Flutter: Camera, Image Picker & Permission

Được viết bởi thanhdt vào ngày 28/01/2026 lúc 07:35 | 27 lượt xem

Xử lý ảnh & media trong Flutter: Camera, Image Picker & Permission

Trong thời đại “sống ảo” lên ngôi, tính năng đổi Avatar, chụp ảnh check-in gần như là bắt buộc với mọi ứng dụng Mobile.

Nhưng làm sao để truy cập Camera và Thư viện ảnh của điện thoại một cách an toàn? Làm sao để xin quyền (Permission) mà không bị Apple từ chối duyệt App? Bài viết này là chìa khóa cho bạn.

1. Quy trình chọn ảnh chuẩn (Workflow)

Để lấy được một tấm ảnh từ người dùng, chúng ta cần đi qua các bước sau:

  1. User Trigger: Người dùng bấm nút “Đổi Avatar”.
  2. Permission Check: App kiểm tra xem đã được cấp quyền chưa.
  3. System Picker: Mở giao diện chọn ảnh của hệ điều hành.
  4. Result: Nhận về đường dẫn file (File Path) để hiển thị hoặc Upload.

2. Cài đặt thư viện & Cấu hình

Thư viện quốc dân: image_picker.
Thêm vào pubspec.yaml:

dependencies:
  image_picker: ^1.0.4

Cấu hình quyền (Cực quan trọng)

Nếu quên bước này, App sẽ bị Crash ngay lập tức khi mở Camera!

Hộp thoại xin quyền trên iOS/Android

  • iOS (Info.plist):
<key>NSCameraUsageDescription</key>
<string>Chúng tôi cần Camera để bạn chụp ảnh đại diện</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Chúng tôi cần truy cập thư viện để bạn chọn ảnh</string>
  • Android (AndroidManifest.xml):
    Từ Android 10 trở lên, bạn không cần xin quyền đọc bộ nhớ nếu dùng System Picker, nhưng quyền Camera thì vẫn cần nếu bạn tự build giao diện chụp.

3. Code thực chiến: Chọn ảnh và hiển thị

Dưới đây là đoạn code mẫu để chọn ảnh từ thư viện và hiển thị lên màn hình.

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

class AvatarPicker extends StatefulWidget {
  @override
  _AvatarPickerState createState() => _AvatarPickerState();
}

class _AvatarPickerState extends State<AvatarPicker> {
  File? _image;
  final picker = ImagePicker();

  Future getImage() async {
    // Gọi System Picker
    final pickedFile = await picker.pickImage(source: ImageSource.gallery);

    setState(() {
      if (pickedFile != null) {
        _image = File(pickedFile.path); // Lưu đường dẫn
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _image == null
            ? Text('Chưa chọn ảnh nào')
            : Image.file(_image!), // Hiển thị ảnh từ File
        ElevatedButton(
          onPressed: getImage,
          child: Icon(Icons.add_a_photo),
        ),
      ],
    );
  }
}

4. Nâng cao: Cắt ảnh (Image Cropper)

Ảnh người dùng chụp thường có tỉ lệ lung tung. Để App đẹp, bạn nên buộc họ cắt ảnh về hình vuông hoặc tỉ lệ 16:9.
Thư viện khuyên dùng: image_cropper.

Giao diện cắt ảnh (Crop UI) chuyên nghiệp

File? croppedFile = await ImageCropper().cropImage(
    sourcePath: imagePath,
    aspectRatioPresets: [
      CropAspectRatioPreset.square,
      CropAspectRatioPreset.ratio16x9,
    ],
    uiSettings: [
      AndroidUiSettings(
          toolbarTitle: 'Cắt ảnh',
          toolbarColor: Colors.deepOrange,
          toolbarWidgetColor: Colors.white,
          initAspectRatio: CropAspectRatioPreset.original,
          lockAspectRatio: false),
      IOSUiSettings(
        title: 'Cắt ảnh',
      ),
    ],
);

Đã có ảnh đẹp, giao diện mượt, nhưng App vẫn cảm thấy “cứng đơ”? Đó là do thiếu Animation.

Bài tiếp theo: Animation cơ bản trong Flutter: Thổi hồn vào ứng dụng.

👉 Cách tạo hiệu ứng chuyển động mượt mà 60fps

💡 Bạn muốn học cách Upload ảnh lên Server AWS S3 hoặc Firebase Storage?
Module Upload File nâng cao có trong: Khóa học Lập trình Flutter Thực chiến