الوصول إلى الكاميرا ومُختار الصور

الوصول إلى الكاميرا ومُختار الصور

تحتاج معظم تطبيقات الهاتف إلى القدرة على التقاط الصور أو السماح للمستخدمين باختيار الصور من معرض الجهاز. يجعل Flutter ذلك أمرًا مباشرًا من خلال حزمة image_picker الرسمية التي يشرف عليها فريق Flutter. في هذا الدرس ستتعلم كيفية دمج image_picker، وطلب أذونات المنصة اللازمة، والتقاط الصور أو اختيارها من المعرض، ثم عرض الملف الناتج داخل شجرة الودجات.

إضافة حزمة image_picker

أضف الاعتمادية إلى pubspec.yaml ثم نفّذ flutter pub get:

dependencies:
  flutter:
    sdk: flutter
  image_picker: ^1.1.2

إعداد أذونات المنصة

تتطلب كل منصة تصريحات أذونات صريحة قبل أن يتمكن تطبيقك من الوصول إلى موارد الأجهزة. إغفال هذه الخطوة هو أحد أكثر الأسباب شيوعًا لعودة image_picker بقيمة null بصمت أثناء التشغيل.

• iOS — أضف المدخلات التالية إلى ios/Runner/Info.plist:
  • NSCameraUsageDescription — يُعرض عند طلب الوصول إلى الكاميرا
  • NSPhotoLibraryUsageDescription — يُعرض عند طلب الوصول إلى المعرض
  • NSPhotoLibraryAddUsageDescription — مطلوب إذا كنت ستحفظ الصور في المعرض
• Android — لنظام Android 13 فما فوق (API 33+) صرّح بـ READ_MEDIA_IMAGES في AndroidManifest.xml. للإصدارات الأقدم تستخدم الإضافة READ_EXTERNAL_STORAGE تلقائيًا.

اختيار صورة من المعرض

تُوفّر فئة ImagePicker طريقة pickImage التي تُعيد XFile? (مُعالج ملف مستقل عن المنصة). الطريقة غير متزامنة وتُعيد null إذا ألغى المستخدم الاختيار.

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

class GalleryPickerDemo extends StatefulWidget {
  const GalleryPickerDemo({super.key});

  @override
  State<GalleryPickerDemo> createState() => _GalleryPickerDemoState();
}

class _GalleryPickerDemoState extends State<GalleryPickerDemo> {
  File? _selectedImage;
  final ImagePicker _picker = ImagePicker();

  Future<void> _pickFromGallery() async {
    final XFile? file = await _picker.pickImage(
      source: ImageSource.gallery,
      imageQuality: 85,   // ضغط الصورة إلى 85% من الجودة
      maxWidth: 1024,     // تحديد العرض الأقصى لتقليل حجم الملف
    );

    if (file != null) {
      setState(() {
        _selectedImage = File(file.path);
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('مُختار الصور')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            if (_selectedImage != null)
              Image.file(_selectedImage!, height: 250, fit: BoxFit.cover)
            else
              const Text('لم يتم اختيار صورة.'),
            const SizedBox(height: 24),
            ElevatedButton.icon(
              onPressed: _pickFromGallery,
              icon: const Icon(Icons.photo_library),
              label: const Text('اختر من المعرض'),
            ),
          ],
        ),
      ),
    );
  }
}

التقاط صورة بالكاميرا

للتبديل من المعرض إلى الكاميرا المباشرة، كل ما تحتاجه هو تغيير واحد: مرّر ImageSource.camera. تبقى جميع المعاملات الأخرى — الجودة والأبعاد القصوى والكاميرا المفضّلة (الأمامية أو الخلفية) — كما هي.

Future<void> _captureFromCamera() async {
  final XFile? photo = await _picker.pickImage(
    source: ImageSource.camera,
    preferredCameraDevice: CameraDevice.rear,
    imageQuality: 90,
  );

  if (photo != null) {
    setState(() {
      _selectedImage = File(photo.path);
    });
  }
}

// في طريقة build أضف زرًا ثانيًا:
ElevatedButton.icon(
  onPressed: _captureFromCamera,
  icon: const Icon(Icons.camera_alt),
  label: const Text('افتح الكاميرا'),
),

التعامل مع الأذونات بشكل سلس

على نظام Android 13 فما فوق وعلى iOS، قد يرفض النظام الإذن بشكل دائم أو للجلسة الحالية. تتولى إضافة image_picker طلب الإذن الأولي تلقائيًا، لكن ينبغي لك معالجة إعادة القيمة null بعناية والنظر في توجيه المستخدم لفتح إعدادات التطبيق عند رفض الإذن نهائيًا.

• إذا أعادت pickImage قيمة null، فقد ألغى المستخدم العملية — لا تفعل شيئًا.
• إذا رُفض الإذن، قد يُطلق بعض إصدارات الإضافة PlatformException — أحِط الاستدعاء بـ try-catch.
• استخدم حزمة permission_handler بجانب image_picker عندما تحتاج إلى فحص حالة الأذون بدقة.

اختيار مقاطع الفيديو

يُتيح الكائن نفسه من ImagePicker طريقتي pickVideo وpickMultiImage لاختيار عدة صور في آنٍ واحد. أنواع الإعادة مطابقة لتلك الخاصة بـ pickImage:

• pickVideo(source: ImageSource.gallery) — تُعيد XFile?
• pickMultiImage() — تُعيد List<XFile> (لا تُعيد null أبدًا، قد تكون فارغة)

ملخص

توفّر حزمة image_picker واجهة برمجية عالية المستوى وواعية بالأذونات تغطّي أكثر سيناريوهات الوصول إلى الوسائط شيوعًا على الهاتف: الاختيار من المعرض والتقاط الصور بالكاميرا. سير العمل ثابت: أنشئ كائن ImagePicker، انتظر pickImage(source: ...)، تحقق من null، حوّل إلى File عند الحاجة، ثم استدعِ setState لتحديث واجهة المستخدم. التطبيقات القوية تضع دائمًا حدودًا لأبعاد الصور، وتتعامل مع الإلغاء، وتُرشد المستخدمين إلى إعدادات التطبيق عند رفض الإذن نهائيًا.