تحديد عدد الصور المدرجه في image_picker بستخدام Flutter

Flutter Dev · 13 أكتوبر 2021

تحيه طيبه للجميع

اقوم بجلب صور متعدده من للاستوديو وعرضها للمستخدم الان يمكن للمستخدم جلب عدد لا محدود من الصور انا احتاج الى ان اعمل قيد او حد لعدد الصور الذي يمكن للمستخدم جلبها وختيارها مثلا اربع صور فقط لا يمكن ادراج صورة اكثر

انا استعمل المكتبه التاليه : image_picker

 // Pick multiple images
    final List<XFile>? images = await _picker.pickMultiImage();

الكود كامل :

import 'dart:async';
import 'dart:io';

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


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Picker Demo',
      home: MyHomePage(title: 'Image Picker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<XFile> _imageFileList;

  set _imageFile(XFile value) {
    _imageFileList = value == null ? null : [value];
  }

  dynamic _pickImageError;
  bool isVideo = false;
  final ImagePicker _picker = ImagePicker();


  void _onImageButtonPressed(ImageSource source,
      {BuildContext context, bool isMultiImage = false}) async {
    if (isMultiImage) {
      try {
        final pickedFileList = await _picker.pickMultiImage(
          maxWidth: 66,
          maxHeight: 66,
          imageQuality: 66,
        );

        if (_imageFileList == null) {
          if (pickedFileList == null)
            return;
          setState(() {
            _imageFileList = pickedFileList;
          });
        }
        else {
          if (pickedFileList != null) {
            setState(() {
              _imageFileList =
                  [..._imageFileList, ...pickedFileList].toSet().toList();
            });
          }
          // لا تغيير
        }
      } catch (e) {
        setState(() {
          _pickImageError = e;
        });
      }
    }
  }



  Widget _previewImages() {


    if (_imageFileList != null) {
      return Semantics(
          child: ListView.builder(
            key: UniqueKey(),
            itemBuilder: (context, index) {
              return Semantics(
                label: 'image_picker_example_picked_image',
                child: kIsWeb
                    ? Image.network(_imageFileList[index].path)
                    : Image.file(File(_imageFileList[index].path)),
              );
            },
            itemCount: _imageFileList.length,
          ),
          label: 'image_picker_example_picked_images');
    } else if (_pickImageError != null) {
      return Text(
        'Pick image error: $_pickImageError',
        textAlign: TextAlign.center,
      );
    } else {
      return const Text(
        'You have not yet picked an image.',
        textAlign: TextAlign.center,
      );
    }
  }


  Future<void> retrieveLostData() async {
    final LostDataResponse response = await _picker.retrieveLostData();
    if (response.isEmpty) {
      return;
    }
    if (response.file != null) {
      if (response.type == RetrieveType.video) {
        isVideo = true;

      } else {
        isVideo = false;
        setState(() {
          _imageFile = response.file;
          _imageFileList = response.files;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: !kIsWeb && defaultTargetPlatform == TargetPlatform.android
            ? FutureBuilder<void>(
          future: retrieveLostData(),
          builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
              case ConnectionState.waiting:
                return const Text(
                  'You have not yet picked an image.',
                  textAlign: TextAlign.center,
                );
              case ConnectionState.done:
                return _previewImages();
              default:
                if (snapshot.hasError) {
                  return Text(
                    'Pick image/video error: ${snapshot.error}}',
                    textAlign: TextAlign.center,
                  );
                } else {
                  return const Text(
                    'You have not yet picked an image.',
                    textAlign: TextAlign.center,
                  );
                }
            }
          },
        )
            : _previewImages(),
      ),
      floatingActionButton: Column(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[

          Padding(
            padding: const EdgeInsets.only(top: 16.0),
            child: FloatingActionButton(
              onPressed: () {
                isVideo = false;
                _onImageButtonPressed(
                  ImageSource.gallery,
                  context: context,
                  isMultiImage: true,
                );
              },
              heroTag: 'image1',
              tooltip: 'Pick Multiple Image from gallery',
              child: const Icon(Icons.photo_library),
            ),
          ),



        ],
      ),
    );
  }




}

ياليت اذا احد سبق وحصلت معه نفس هذا المشكله يفيدنا

Wael Aljamal · 13 أكتوبر 2021

بتاريخ 1 ساعة قال Wael Aljamal:

الحل الاخير فيه القوس الاخير يجب ان يكون في السطر السابق بعد .

_imageFileList = 
		_imageFileList != null ? 
		(_imageFileList.length > 4 ? _imageFileList.take(4)) : _imageFileList,

بلال زيادة · 13 أكتوبر 2021

لقد استعملت هذه الحزمة كثيرا و لم أجد ما تطلبه بها و لكن هناك حل ما و هو عندما يقوم المستخدم باختيار الصور , تقوم أنت فقط بعرض 4 صور من الصور المختارة و لا تعرض أكثر من ذلك حسب ما تريد.

Wael Aljamal · 13 أكتوبر 2021

يمكنك عرض تنبيه للمستخدم مثلا على شكل Toast إشعار تنبيهات، كما يمكن وضع تنويه ضمن الزر اكتب حد اقصى 4 او Max (4) .. Select imgs up to 4...

وبعد انتهاء المستخدم من التحديد، إن كان حجم القائمة أكبر من 4 اعرض له تنبيه جديد بخبره أن اول 4 صور سيتم اختيارها. واقتطع القائمة محتفظاً بأربع عناصر.

Wael Aljamal · 13 أكتوبر 2021

بتاريخ 23 دقائق مضت قال مروان مروان3:

النتيجة

الخطأ:

 Unhandled Exception: NoSuchMethodError: The getter 'length' was called on null.
                                                    ^^^^^^^^^^^^^^^^^^^^   ^^^^

القائمة الابتدائية تكون فارغة null لذلك لايمكن استدعاء دوال عليها ، الكائن لم يتم بناءه

الحل:

if (_imageFileList != null && _imageFileList.length == MAX_PHOTO_UPLOAD) {
    ^^^^^^^^^^^^^^^^^^^^^^

نختبر القائمة إن كانت موجودة.

للتخلص من مشكلة null علينا استخدام الدالة البانية في أول الصفحة

List<XFile> _imageFileList = List<XFile>();

Wael Aljamal · 13 أكتوبر 2021

itemCount: _imageFileList !=null ?
	_imageFileList.length.clamp(0, 4) : _imageFileList.length.clamp(0, _imageFileList.length),

Flutter Dev · 13 أكتوبر 2021

بتاريخ منذ ساعة مضت قال بلال زيادة:

لقد استعملت هذه الحزمة كثيرا و لم أجد ما تطلبه بها و لكن هناك حل ما و هو عندما يقوم المستخدم باختيار الصور , تقوم أنت فقط بعرض 4 صور من الصور المختارة و لا تعرض أكثر من ذلك حسب ما تريد.

اهلا بك اخي الكريم الحل جميل وممكن تطبيقه من خلال طول القائمه ولكن المشكله انني سوف احتاج الى اضافة هذا الصور الى قاعدة البيانات مما يعني ان القائمه كلها سوف يتم ادراجها وهذا الامر لا ينفع انا احتاج فقط الى 4 صور لكل موضوع

تم التعديل في 13 أكتوبر 2021 بواسطة مروان مروان3

بلال زيادة · 13 أكتوبر 2021

بتاريخ 18 دقائق مضت قال مروان مروان3:

اهلا بك اخي الكريم الحل جميل وممكن تطبيقه من خلال طول القائمه ولكن المشكله انني سوف احتاج الى اضافة هذا الصور الى قاعدة البيانات مما يعني ان القائمه كلها سوف يتم ادراجها وهذا الامر لا ينفع انا احتاج فقط الى 4 صور لكل موضوع

حلو جدا ، ايضا يمكنك السماح فقط لأربعة صور بالتخرين و الحفظ داخل قاعدة البيانات .

Flutter Dev · 13 أكتوبر 2021

بتاريخ 1 دقيقة مضت قال بلال زيادة:

حلو جدا ، ايضا يمكنك السماح فقط لأربعة صور بالتخرين و الحفظ داخل قاعدة البيانات .

كيف يمكن فعل ذلك اخي ياليت تشارك الكود اذا متوفر لديك

Flutter Dev · 13 أكتوبر 2021

بتاريخ 4 دقائق مضت قال Wael Aljamal:

يمكنك عرض تنبيه للمستخدم مثلا على شكل Toast إشعار تنبيهات، كما يمكن وضع تنويه ضمن الزر اكتب حد اقصى 4 او Max (4) .. Select imgs up to 4...

وبعد انتهاء المستخدم من التحديد، إن كان حجم القائمة أكبر من 4 اعرض له تنبيه جديد بخبره أن اول 4 صور سيتم اختيارها. واقتطع القائمة محتفظاً بأربع عناصر.

مرحبا اخي الكريم

شاكر لك ردك الغالي

هل ممكن مشاركة بعض الاكود لو تكرمت للفكره اذا مافيه تكليف

Wael Aljamal · 13 أكتوبر 2021

بتاريخ 4 ساعات قال مروان مروان3:

مرحبا اخي الكريم

شاكر لك ردك الغالي

هل ممكن مشاركة بعض الاكود لو تكرمت للفكره اذا مافيه تكليف

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

شاركنا تجربتك.

Flutter Dev · 13 أكتوبر 2021

بتاريخ 4 ساعات قال Wael Aljamal:

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

شاركنا تجربتك.

اهلا بك اخي الكريم

تم اخي سوف اقوم بمشاركة تجربتي باذن الله ليله

Flutter Dev · 13 أكتوبر 2021

بتاريخ 7 ساعات قال Wael Aljamal:

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

شاركنا تجربتك.

مرحبا اخي الكريم @Wael Aljamal

قمت بتجربه كثير بشكل التالي ولكن دائما احصل على نتيجة خطاء كالتالي:

الكود المستعمل بشكل منفصل:

 static const int MAX_PHOTO_UPLOAD = 3;

       Padding(
                        padding:
                        const EdgeInsets.only(
                            left: 3,
                            right: 3),
                        child: Container(
                            height: 50,
width: 100,

                            child: Material(
                              color: Colors.deepOrange,

                              child: InkWell(
                                  borderRadius:
                                  BorderRadius
                                      .circular(
                                      8),
                                  child: Icon(
                                    Icons
                                        .add_a_photo,
                                    color: Theme.of(
                                        context)
                                        .floatingActionButtonTheme
                                        .foregroundColor,
                                  ),
                                  onTap: () async {
                                    if (_imageFileList.length == MAX_PHOTO_UPLOAD) {
                                      showDialog(
                                        context:
                                        context,
                                        builder:
                                            (ctx) =>
                                            AlertDialog(

                                              content: Text(
                                                  "No more can be added"
                                              ),
                                              actions: <
                                                  Widget>[
                                                TextButton(
                                                  onPressed:
                                                      () {
                                                    Navigator.of(ctx).pop();
                                                  },
                                                  child:
                                                  Text("Closes"),
                                                ),

                                              ],
                                            ),
                                      );
                                      return;
                                    }
                                    _onImageButtonPressed(
                                      ImageSource.gallery,
                                      context: context,
                                      isMultiImage: true,
                                    );
                                  }),
                            )),
                      )

النتيجة:

E/flutter (22452): [ERROR:flutter/lib/ui/ui_dart_state.cc(186)] Unhandled Exception: NoSuchMethodError: The getter 'length' was called on null.
E/flutter (22452): Receiver: null
E/flutter (22452): Tried calling: length
E/flutter (22452): #0      Object.noSuchMethod (dart:core-patch/object_patch.dart:54:5)
E/flutter (22452): #1      _MyHomePageState.build.<anonymous closure>.<anonymous closure> (package:flutter_application_1/testtwo.dart:179:56)
E/flutter (22452): #2      _MyHomePageState.build.<anonymous closure>.<anonymous closure> (package:flutter_application_1/testtwo.dart:178:42)
E/flutter (22452): #3      _InkResponseState._handleTap (package:flutter/src/material/ink_well.dart:991:20)
E/flutter (22452): #4      GestureRecognizer.invokeCallback (package:flutter/src/gestures/recognizer.dart:182:24)
E/flutter (22452): #5      TapGestureRecognizer.handleTapUp (package:flutter/src/gestures/tap.dart:607:11)
E/flutter (22452): #6      BaseTapGestureRecognizer._checkUp (package:flutter/src/gestures/tap.dart:296:5)
E/flutter (22452): #7      BaseTapGestureRecognizer.handlePrimaryPointer (package:flutter/src/gestures/tap.dart:230:7)
E/flutter (22452): #8      PrimaryPointerGestureRecognizer.handleEvent (package:flutter/src/gestures/recognizer.dart:475:9)
E/flutter (22452): #9      PointerRouter._dispatch (package:flutter/src/gestures/pointer_router.dart:93:12)
E/flutter (22452): #10     PointerRouter._dispatchEventToRoutes.<anonymous closure> (package:flutter/src/gestures/pointer_router.dart:138:9)
E/flutter (22452): #11     _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:397:8)
E/flutter (22452): #12     PointerRouter._dispatchEventToRoutes (package:flutter/src/gestures/pointer_router.dart:136:18)
E/flutter (22452): #13     PointerRouter.route (package:flutter/src/gestures/pointer_router.dart:122:7)
E/flutter (22452): #14     GestureBinding.handleEvent (package:flutter/src/gestures/binding.dart:381:19)
E/flutter (22452): #15     GestureBinding.dispatchEvent (package:flutter/src/gestures/binding.dart:361:22)
E/flutter (22452): #16     RendererBinding.dispatchEvent (package:flutter/src/rendering/binding.dart:278:11)
E/flutter (22452): #17     GestureBinding._handlePointerEventImmediately (package:flutter/src/gestures/binding.dart:316:7)
E/flutter (22452): #18     GestureBinding.handlePointerEvent (package:flutter/src/gestures/binding.dart:280:5)
E/flutter (22452): #19     GestureBinding._flushPointerEventQueue (package:flutter/src/gestures/binding.dart:238:7)
E/flutter (22452): #20     GestureBinding._handlePointerDataPacket (package:flutter/src/gestures/binding.dart:221:7)
E/flutter (22452): #21     _rootRunUnary (dart:async/zone.dart:1370:13)
E/flutter (22452): #22     _CustomZone.runUnary (dart:async/zone.dart:1265:19)
E/flutter (22452): #23     _CustomZone.runUnaryGuarded (dart:async/zone.dart:1170:7)
E/flutter (22452): #24     _invoke1 (dart:ui/hooks.dart:180:10)
E/flutter (22452): #25     PlatformDispatcher._dispatchPointerDataPacket (dart:ui/platform_dispatcher.dart:276:7)
E/flutter (22452): #26     _dispatchPointerDataPacket (dart:ui/hooks.dart:96:31)
E/flutter (22452):

الصفحة كامله


import 'dart:async';
import 'dart:io';

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


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Picker Demo',
      home: MyHomePage(title: 'Image Picker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<XFile> _imageFileList;

  set _imageFile(XFile value) {
    _imageFileList = value == null ? null : [value];
  }


  bool isVideo = false;
  final ImagePicker _picker = ImagePicker();

  static const int MAX_PHOTO_UPLOAD = 3;
  void _onImageButtonPressed(ImageSource source,
      {BuildContext context, bool isMultiImage = false}) async {
    if (isMultiImage) {
      try {
        final pickedFileList = await _picker.pickMultiImage(
          //   maxWidth: 120,
          // maxHeight: 120,
          imageQuality: 100,
        );

        if (_imageFileList == null) {
          if (pickedFileList == null)
            return;
          setState(() {
            _imageFileList = pickedFileList;
          });
        }
        else {
          if (pickedFileList != null) {

            setState(() {
              _imageFileList =
                  [..._imageFileList, ...pickedFileList].toSet().toList();
            });
          }

        }
      } catch (e) {
        setState(() {

        });
      }
    }
  }






  Future<void> retrieveLostData() async {
    final LostDataResponse response = await _picker.retrieveLostData();
    if (response.isEmpty) {
      return;
    }
    if (response.file != null) {
      if (response.type == RetrieveType.video) {
        isVideo = true;

      } else {
        isVideo = false;
        setState(() {
          _imageFile = response.file;
          _imageFileList = response.files;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Center(
        child: !kIsWeb && defaultTargetPlatform == TargetPlatform.android
            ? FutureBuilder<void>(
          future: retrieveLostData(),
          builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
              case ConnectionState.waiting:
                return const Text(
                  'You have not yet picked an image.',
                  textAlign: TextAlign.center,
                );
              case ConnectionState.done:
                return



                  Column(
                    children: [
                      Expanded(
                        child: ListView.builder(
                          scrollDirection:
                          Axis.horizontal,
                          key: UniqueKey(),
                          itemBuilder: (context, index) {
                            return Semantics(
                                label: 'image_picker_example_picked_image',
                                child: kIsWeb
                                    ?  Image.network(_imageFileList[index].path,fit: BoxFit.cover,)

                                    :
                                   Image.file(File(_imageFileList[index].path),fit: BoxFit.cover,)

                            );
                          },
                          itemCount: _imageFileList !=null ?  _imageFileList.length : 0,
                        ),
                      ),


                      SizedBox(
                        height: 5,
                      ),


                      Padding(
                        padding:
                        const EdgeInsets.only(
                            left: 3,
                            right: 3),
                        child: Container(
                            height: 50,
width: 100,

                            child: Material(
                              color: Colors.deepOrange,

                              child: InkWell(
                                  borderRadius:
                                  BorderRadius
                                      .circular(
                                      8),
                                  child: Icon(
                                    Icons
                                        .add_a_photo,
                                    color: Theme.of(
                                        context)
                                        .floatingActionButtonTheme
                                        .foregroundColor,
                                  ),
                                  onTap: () async {
                                    if (_imageFileList.length == MAX_PHOTO_UPLOAD) {
                                      showDialog(
                                        context:
                                        context,
                                        builder:
                                            (ctx) =>
                                            AlertDialog(

                                              content: Text(
                                                  "No more can be added"
                                              ),
                                              actions: <
                                                  Widget>[
                                                TextButton(
                                                  onPressed:
                                                      () {
                                                    Navigator.of(ctx).pop();
                                                  },
                                                  child:
                                                  Text("Closes"),
                                                ),

                                              ],
                                            ),
                                      );
                                      return;
                                    }
                                    _onImageButtonPressed(
                                      ImageSource.gallery,
                                      context: context,
                                      isMultiImage: true,
                                    );
                                  }),
                            )),
                      )




                    ],
                  );


              default:
                if (snapshot.hasError) {
                  return Text(
                    'Pick image/video error: ${snapshot.error}}',
                    textAlign: TextAlign.center,
                  );
                } else {
                  return const Text(
                    'You have not yet picked an image.',
                    textAlign: TextAlign.center,
                  );
                }
            }
          },
        )
            :    ListView.builder(
          scrollDirection:
          Axis.horizontal,
          key: UniqueKey(),
          itemBuilder: (context, index) {
            return Semantics(
              label: 'image_picker_example_picked_image',
              child: kIsWeb
                  ? Image.network(_imageFileList[index].path,fit: BoxFit.cover,
                width: 100,
                height: 50,)
                  : Image.file(File(_imageFileList[index].path),fit: BoxFit.cover,
                width: 100,
                height: 50,),
            );
          },
          itemCount: _imageFileList.length,
        ),
      ),

    );
  }




}

Flutter Dev · 13 أكتوبر 2021

بتاريخ 17 دقائق مضت قال Wael Aljamal:
الخطأ:
 Unhandled Exception: NoSuchMethodError: The getter 'length' was called on null.
                                                    ^^^^^^^^^^^^^^^^^^^^   ^^^^
القائمة الابتدائية تكون فارغة null لذلك لايمكن استدعاء دوال عليها ، الكائن لم يتم بناءه

الحل:
if (_imageFileList != null && _imageFileList.length == MAX_PHOTO_UPLOAD) {
    ^^^^^^^^^^^^^^^^^^^^^^
نختبر القائمة إن كانت موجودة.

للتخلص من مشكلة null علينا استخدام الدالة البانية في أول الصفحة
List<XFile> _imageFileList = List<XFile>();

اهلا بك اخي انا قمت بتنفيذ ما ذكرته انت وذهب الخطاء فعلا المشكله فقط هيا كالتالي:

لو قمت بذهاب الى الاستوديو واختيار 6 صور على سبيل المثال سوف يتم عرض للمستخدم لدي اربع صور وذلك بسبب السطر هذا :

   itemCount: _imageFileList !=null ?  _imageFileList.length.clamp(0, 4) : 0,

ولكن المشكله ان المستخدم لو قام بضغط من جديد على زر الاضافة يستطيع الذهاب الى الاستوديو بدون ان يعمل الشرط الذي تم وضعه لا اعلم ما هو سبب حدوث ذلك

قمت باختبار ثاني وقمت فقط باختيار العدد المطلوب وهو 4 صور في هذا الحالة الكود يعمل والمستخدم لا يستطيع الضغط من جديد على الزر

المشكله فقط لو قام المستخدم باختيار صور اكثر من اربع في اول دخول له الى الاستوديو لا اعلم اذا كان شرحي للمشكله واضح

الكود كامل اصبح بشكل التالي:


import 'dart:async';
import 'dart:io';

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


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Image Picker Demo',
      home: MyHomePage(title: 'Image Picker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  List<XFile> _imageFileList;

  set _imageFile(XFile value) {
    _imageFileList = value == null ? null : [value];
  }


  bool isVideo = false;
  final ImagePicker _picker = ImagePicker();

  static const int MAX_PHOTO_UPLOAD = 4;


  void _onImageButtonPressed(ImageSource source,
      {BuildContext context, bool isMultiImage = false}) async {
    if (isMultiImage) {
      try {
        final pickedFileList = await _picker.pickMultiImage(
          //   maxWidth: 120,
          // maxHeight: 120,
          imageQuality: 100,
        );

        if (_imageFileList == null ) {
          if (pickedFileList == null)
            return;
          setState(() {
            _imageFileList = pickedFileList;
          });
        } else {
          if (pickedFileList != null) {

            setState(() {
              _imageFileList =
                  [..._imageFileList, ...pickedFileList].toSet().toList();
            });
          }

        }
      } catch (e) {
        setState(() {

        });
      }
    }
  }






  Future<void> retrieveLostData() async {
    final LostDataResponse response = await _picker.retrieveLostData();
    if (response.isEmpty) {
      return;
    }
    if (response.file != null) {
      if (response.type == RetrieveType.video) {
        isVideo = true;

      } else {
        isVideo = false;
        setState(() {
          _imageFile = response.file;
          _imageFileList = response.files;
        });
      }
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(

      body: Center(
        child: !kIsWeb && defaultTargetPlatform == TargetPlatform.android
            ? FutureBuilder<void>(
          future: retrieveLostData(),
          builder: (BuildContext context, AsyncSnapshot<void> snapshot) {
            switch (snapshot.connectionState) {
              case ConnectionState.none:
              case ConnectionState.waiting:
                return const Text(
                  'You have not yet picked an image.',
                  textAlign: TextAlign.center,
                );
              case ConnectionState.done:
                return



                  Column(
                    children: [
                      Expanded(
                        child: ListView.builder(
                          scrollDirection:
                          Axis.horizontal,
                          key: UniqueKey(),
                          itemBuilder: (context, index) {
                            return Semantics(
                                label: 'image_picker_example_picked_image',
                                child: kIsWeb
                                    ?  Image.network(_imageFileList[index].path,fit: BoxFit.cover,)

                                    :
                                   Image.file(File(_imageFileList[index].path),fit: BoxFit.cover,)

                            );
                          },
                          itemCount: _imageFileList !=null ?  _imageFileList.length.clamp(0, 4) : 0,
                        ),
                      ),


                      SizedBox(
                        height: 5,
                      ),


                      Padding(
                        padding:
                        const EdgeInsets.only(
                            left: 3,
                            right: 3),
                        child: Container(
                            height: 50,
width: 100,

                            child: Material(
                              color: Colors.deepOrange,

                              child: InkWell(
                                  borderRadius:
                                  BorderRadius
                                      .circular(
                                      8),
                                  child: Icon(
                                    Icons
                                        .add_a_photo,
                                    color: Theme.of(
                                        context)
                                        .floatingActionButtonTheme
                                        .foregroundColor,
                                  ),
                                  onTap: () async {
                                    if  (_imageFileList != null && _imageFileList.length == MAX_PHOTO_UPLOAD){
                                      showDialog(
                                        context:
                                        context,
                                        builder:
                                            (ctx) =>
                                            AlertDialog(

                                              content: Text(
                                                  "No more can be added"
                                              ),
                                              actions: <
                                                  Widget>[
                                                TextButton(
                                                  onPressed:
                                                      () {
                                                    Navigator.of(ctx).pop();
                                                  },
                                                  child:
                                                  Text("Closes"),
                                                ),

                                              ],
                                            ),
                                      );

                                      return;
                                    } _onImageButtonPressed(
                                      ImageSource.gallery,
                                      context: context,
                                      isMultiImage: true,
                                    );

                                  }),
                            )),
                      )




                    ],
                  );


              default:
                if (snapshot.hasError) {
                  return Text(
                    'Pick image/video error: ${snapshot.error}}',
                    textAlign: TextAlign.center,
                  );
                } else {
                  return const Text(
                    'You have not yet picked an image.',
                    textAlign: TextAlign.center,
                  );
                }
            }
          },
        )
            :    ListView.builder(
          scrollDirection:
          Axis.horizontal,
          key: UniqueKey(),
          itemBuilder: (context, index) {
            return Semantics(
              label: 'image_picker_example_picked_image',
              child: kIsWeb
                  ? Image.network(_imageFileList[index].path,fit: BoxFit.cover,
                width: 100,
                height: 50,)
                  : Image.file(File(_imageFileList[index].path),fit: BoxFit.cover,
                width: 100,
                height: 50,),
            );
          },
          itemCount: _imageFileList.length,
        ),
      ),

    );
  }




}

Wael Aljamal · 13 أكتوبر 2021

بتاريخ 14 دقائق مضت قال مروان مروان3:

المشكله فقط لو قام المستخدم باختيار صور اكثر من اربع في اول دخول له الى الاستوديو لا اعلم اذا كان شرحي للمشكله واضح

أنت تعيد 0، وهذا يعدل المتغير itemCount إلى 0 لذلك يسمح للمستخدم بإعادة التحديد

ماذا تفعل الطريقة clamp؟

جرب: لست متأكداً

itemCount: _imageFileList !=null ?  _imageFileList.length.clamp(0, 4) : _imageFileList.length,

أو استخدم الدالة take لأخذ أول x عنصر من القائمة

_imageFileList = 
		_imageFileList != null ? 
		(_imageFileList.length > 4 ?
		_imageFileList.take(4) : _imageFileList) 
							: _imageFileList, 

itemCount: _imageFileList.length,

Flutter Dev · 13 أكتوبر 2021

بتاريخ 7 دقائق مضت قال Wael Aljamal:
أنت تعيد 0، وهذا يعدل المتغير itemCount إلى 0 لذلك يسمح للمستخدم بإعادة التحديد

ماذا تفعل الطريقة clamp؟

جرب: لست متأكداً
itemCount: _imageFileList !=null ?  _imageFileList.length.clamp(0, 4) : _imageFileList.length,
أو استخدم الدالة take لأخذ أول x عنصر من القائمة
_imageFileList = 
		_imageFileList != null ? 
		(_imageFileList.length > 4 ? _imageFileList.take(4) : _imageFileList),

itemCount: _imageFileList.length,

الـ clamp تحديد حجم القائمة بمعنى لن يظهر شي اكثر من اربع عناصر لدي

بنسبة الى هذا الحل :

itemCount: _imageFileList !=null ?  _imageFileList.length.clamp(0, 4) : _imageFileList.length,

يحصل الخطاء التالي:

======== Exception caught by widgets library =======================================================
The following NoSuchMethodError was thrown building FutureBuilder<void>(dirty, state: _FutureBuilderState<void>#85b48):
The getter 'length' was called on null.
Receiver: null
Tried calling: length

اما هذا السطر اين ممكن استعمله لو تكرمت لنني قمت باكثر بوضعه اكثر من موقع ولكن يكون الموقع خطاء

_imageFileList = 
		_imageFileList != null ? 
		(_imageFileList.length > 4 ? _imageFileList.take(4) : _imageFileList),

Wael Aljamal · 13 أكتوبر 2021

بتاريخ 31 دقائق مضت قال مروان مروان3:

الـ clamp تحديد حجم القائمة بمعنى لن يظهر شي اكثر من اربع عناصر لدي

تمام، استخدمه، لكن الوسيط الثاني مرر به طول القائمة وليس 0.

الحل الذي اقدمه بدون تجريب ..

استخدم clamp و مرر له الوسيط الثاني طول القائمة نفسه.

اخر حل، يحسب القائمة نفسها بتطبيق شروط ternary operator على مرحلتين

الحل الاخير فيه القوس الاخير يجب ان يكون في السطر السابق بعد .

(take(4).

Flutter Dev · 13 أكتوبر 2021

بتاريخ 53 دقائق مضت قال Wael Aljamal:


itemCount: _imageFileList !=null ?
	_imageFileList.length.clamp(0, 4) : _imageFileList.length.clamp(0, _imageFileList.length),

من المفترض ان يقوم مطور الحزمة باضافة هذا الميزة ولا الحزمة ستعاني من مشكله + نقص لخصائص اساسيه بها

كل الشكر لك اخي الكريم واعتذر على الاطاله

تحديد عدد الصور المدرجه في image_picker بستخدام Flutter

السؤال

Flutter Dev

17 أجوبة على هذا السؤال

Recommended Posts

Wael Aljamal

بلال زيادة

Wael Aljamal

Wael Aljamal

Wael Aljamal

Flutter Dev

بلال زيادة

Flutter Dev

Flutter Dev

Wael Aljamal

Flutter Dev

Flutter Dev

Flutter Dev

Wael Aljamal

Flutter Dev

Wael Aljamal

Flutter Dev

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية