By using this site, you agree to the Privacy Policy and Terms of Use.
موافق
عرب فلاترعرب فلاتر
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
قراءة: شرح استخدام Image Picker في Flutter
شارك
تسجيل الدخول
إشعار أظهر المزيد
Aa
عرب فلاترعرب فلاتر
Aa
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
Search

أقسام الموقع

استكشف جميع أقسام الموقع
قسم Dart في موقع عرب فلاتر

Dart

59 مقالات
قسم Widgets في موقع عرب فلاتر

Widgets

104 مقالات
قسم Packages في موقع عرب فلاتر

Packages

19 مقالات
قسم Tutorials في موقع عرب فلاتر

Tutorials

22 مقالات

أخر المواضيع

استكشف أخر المواضيع المنشورة
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا

5
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials

حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر

10
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials

أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات

17
لديك حساب موجود؟ تسجيل الدخول
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
عرب فلاتر > Packages > شرح استخدام Image Picker في Flutter
Packages

شرح استخدام Image Picker في Flutter

عبدالله يوسف
أخر تحديث 2024/11/15
بواسطة عبدالله يوسف اضف تعليق 4 دقيقة للقراءة 5244 مشاهدات 9
شارك
شرح استخدام Image Picker في Flutter
شرح استخدام Image Picker في Flutter
شارك

خدماتنا البرمجية – عرب فلاتر🚀

خدماتنا البرمجية – عرب فلاتر

تعد حزمة Image Picker أحد الحزم الأساسية في تطبيقات Flutter التي تهدف إلى تمكين المطورين من اختيار الصور وتصويرها من مصادر مختلفة مثل معرض الصور والكاميرا. توفر هذه الحزمة واجهة برمجة تطبيقات (API) سهلة الاستخدام وقوية لإدارة صور المستخدم في التطبيقات.

المحتويات
أهمية حزمة Image Picker:خصائص حزمة Image Picker:1. استيراد الحزمة2. اختيار صورة من المعرض3. التقاط صورة باستخدام الكاميرا4. استخدام الصورة المحددةمثال لاستخدام حزمة Image Picker:

أهمية حزمة Image Picker:

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

“اقرأ أيضاً: شرح استخدام path_provider في Flutter“


خصائص حزمة Image Picker:

دعونا نلقي نظرة على بعض الخصائص الرئيسية لحزمة Image Picker وكيفية استخدامها في تطبيقات Flutter.

1. استيراد الحزمة

يجب استيراد حزمة Image Picker في ملف البرنامج الرئيسي لتطبيق Flutter الخاص بك. يمكنك القيام بذلك عن طريق إضافة الاستيراد التالي:

import 'package:image_picker/image_picker.dart';

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

يمكن استخدام Image Picker لاختيار صورة من معرض الصور في الجهاز. يمكنك استخدام دالة pickImage لذلك. فيما يلي مثال لاختيار صورة من المعرض:

final imagePicker = ImagePicker();
final pickedImage = await imagePicker.pickImage(source: ImageSource.gallery);

3. التقاط صورة باستخدام الكاميرا

يمكن استخدام Image Picker لالتقاط صورة باستخدام الكاميرا في الجهاز. يمكنك استخدام دالة pickImage وتحديد ImageSource.camera كمصدر للصورة. فيما يلي مثال لالتقاط صورة باستخدام الكاميرا:

final imagePicker = ImagePicker();
final pickedImage = await imagePicker.pickImage(source: ImageSource.camera);

4. استخدام الصورة المحددة

بعد اختيار الصورة باستخدام Image Picker، يمكن الوصول إلى الصورة المحددة واستخدامها في التطبيق. يمكنك الوصول إلى مسار الصورة باستخدام pickedImage.path. فيما يلي مثال لاستخدام الصورة المحددة:

final pickedImage = await imagePicker.pickImage(source: ImageSource.gallery);
if (pickedImage != null) {
  final imagePath = pickedImage!.path;
  // استخدم imagePath كمسار الصورة المحددة في التطبيق
}

“اقرأ أيضاً: شرح استخدام FlutterToast في Flutter“


مثال لاستخدام حزمة Image Picker:

فيما يلي مثال كامل يوضح كيفية استخدام حزمة Image Picker في تطبيق Flutter:

import 'dart:io';

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

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

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final ImagePicker _imagePicker = ImagePicker();
  XFile? _pickedImage;

  Future<void> _pickImageFromGallery() async {
    final image = await _imagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      _pickedImage = image != null ? XFile(image.path) : null;
    });
  }

  Future<void> _captureImageFromCamera() async {
    final image = await _imagePicker.pickImage(source: ImageSource.camera);
    setState(() {
      _pickedImage = image != null ? XFile(image.path) : null;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Picker Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            if (_pickedImage != null)
              Image.file(
                File(_pickedImage!.path),
                height: 200,
              ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: _pickImageFromGallery,
              child: const Text('اختيار صورة من المعرض'),
            ),
            ElevatedButton(
              onPressed: _captureImageFromCamera,
              child: const Text('التقاط صورة باستخدام الكاميرا'),
            ),
          ],
        ),
      ),
    );
  }
}

“اقرأ أيضاً: شرح استخدام url_launcher في Flutter“


حزمة Image Picker توفر واجهة سهلة الاستخدام لاختيار الصور والتقاطها في تطبيقات Flutter. يمكن استخدامها لمجموعة متنوعة من السيناريوهات المتعلقة بصور المستخدم. في هذه المقالة، قمنا بتوضيح كيفية استخدام حزمة Image Picker في تطبيقات Flutter وشرحنا جميع الخصائص الرئيسية للحزمة مع مثال عملي. يمكنك الآن استخدام هذه الحزمة لتنفيذ متطلبات صور التطبيق الخاص بك بسهولة وفعالية.

Arab Flutter Community 🚀

انضم إلى مجتمع Arab Flutter
شارك هذا المقال
فيسبوك تويتر Whatsapp Whatsapp لينكد ان تلغرام نسخ الرابط
Avatar of عبدالله يوسف
بواسطة عبدالله يوسف Founder and CEO at ArabFlutter
تابع:
أنا عبدالله يوسف، مهندس مصري ومؤسس موقع عرب فلاتر، ملهم بشغف التكنولوجيا والإبداع. كمصمم مواقع ومبرمج تطبيقات موبايل باستخدام Flutter، أستمتع بخلق عوالم رقمية فريدة ومبتكرة. تتجلى مواهبي في تصميم وتطوير واجهات مستخدم تفاعلية، حيث يمزج الجانب الجمالي بالدقة الهندسية. ما يميزني هو إلمامي الواسع بتقنيات البرمجة والتصميم، ومقدرتي على تطوير تطبيقات متنوعة عبر منصات مختلفة. أعتبر نفسي مبدعًا وملتزمًا، حيث أسعى دائمًا لتحقيق تحسين مستمر في مهاراتي وتقنياتي. أستمتع بتحديات العمل الجماعي وأؤمن بأهمية الابتكار والتطور. بفضل إبداعي والتزامي، أسعى لتقديم حلول فعّالة تلبي توقعات العملاء وتفوق عن المألوف.
اترك تعليقا اترك تعليقا

اترك تعليقاً إلغاء الرد

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *

شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
شرح الـ Event Loop في Flutter وجعل التطبيق لا يتوقف أبدًا
Tutorials
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
حل مشكلة التوافق بين Java و Kotlin و Gradle في فلاتر
Tutorials
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
أفضل الـ Packages في Flutter لتسريع تطوير التطبيقات
Tutorials
طريقة انشاء المجلدات باستخدام Dart
طريقة انشاء المجلدات باستخدام كود Dart تلقائيًا
Tutorials

مقالات ذات الصلة

اطلع على المزيد من المقالات المتعلقة بهذا الموضوع!
شرح استخدام حزمة GDPR Admob في Flutter
Packages

شرح استخدام حزمة GDPR Admob في فلاتر 2024

10 1
شرح استخدام حزمة Permission Handler في Flutter
Packages

شرح استخدام حزمة Permission Handler في Flutter

9 1
شرح استخدام حزمة QuickAlert في Flutter
Packages

شرح استخدام حزمة QuickAlert في Flutter

6
شرح استخدام Cached Network Image في Flutter
Packages

شرح استخدام Cached Network Image في Flutter

3
شرح استخدام حزمة Device Preview في Flutter
Packages

شرح استخدام حزمة Device Preview في Flutter

4
شرح استخدام flutter_launcher_icons في Flutter
Packages

شرح استخدام flutter_launcher_icons في Flutter

4
أظهر المزيد
شعار موقع عرب فلاتر شعار موقع عرب فلاتر

About US

Quick Links

  • خدماتنا
  • من نحن
  • اتصل بنا
  • اتفاقية استخدام
  • سياسة الخصوصية
© جميع الحقوق محفوظة موقع عرب فلاتر 2023
  • Dart
  • Widgets
  • Packages
  • Tutorials
  • Flutter Roadmap
  • تثبيت Dart
  • تثبيت Flutter
adbanner
تم اكتشاف مانع إعلانات
مرحبًا، يرجى إيقاف مانع الإعلانات. الإعلانات تُساهم في دعم موقعنا وتغطية جزء من تكاليف الاستضافة وتطوير المحتوى. شكرًا لتفهمك ودعمك.
Okay, I'll Whitelist
Welcome Back!

Sign in to your account

هل نسيت كلمة المرور؟