اذهب إلى المحتوى
  • 0

إضافة صور إلى ListView في flutter

Flutter Dev

السؤال

لدي ListView اجلب اليها مجموعة صور من قاعدة البيانات تم تخزينها مسابقا واعرضهم من خلال ListView . 

العرض شغال ويمكن مشاهدة الصور التي تاتي من قاعدة البيانات ولكني احاول في نفس الوقت اضافة صور جديده من الهاتف الى ListView  + بجانب الصور التي تاتي من قاعدة البيانات مسبقا واستعمل المكتبه التاليه لختيار الصور:

https://pub.dev/packages/wechat_assets_picker

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

The following RangeError was thrown building:
RangeError (index): Invalid value: Only valid value is 0: 1

When the exception was thrown, this was the stack: 
#0      List.[] (dart:core-patch/growable_array.dart:254:60)
#1      List.elementAt (dart:core-patch/growable_array.dart:476:16)
#2      _update_profiletttState.build.<anonymous closure> (package:flutter_application_1/testpage.dart:178:76)
#3      SliverChildBuilderDelegate.build (package:flutter/src/widgets/sliver.dart:456:22)
#4      SliverMultiBoxAdaptorElement._build (package:flutter/src/widgets/sliver.dart:1214:28)
#5      SliverMultiBoxAdaptorElement.performRebuild.processElement (package:flutter/src/widgets/sliver.dart:1147:67)
#6      Iterable.forEach (dart:core/iterable.dart:279:35)
#7      SliverMultiBoxAdaptorElement.performRebuild (package:flutter/src/widgets/sliver.dart:1191:24)

وهذا صوره توضح المشكله :

ولكن لو قمت باختيار عدد 2 من الصور او اكثر المشكله هذا لا تحدث .

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

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

ياليت اذا احد لديه فكره عن حل للمشكله او سبق ان مر بمثلها يساعدنا في حلها ولكم جزيل الشكر.

مرفق الصفحة كامل :

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';



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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UpdateItem(),
    );
  }
}

class UpdateItem extends StatefulWidget {

  @override
  _update_profiletttState createState() => new _update_profiletttState();
}

class _update_profiletttState extends State<UpdateItem> {

  @override
  void initState() {
    super.initState();
    init();
  }

  void init() {

    GetImage().then((value) {
      setState(() {
        users.addAll(value);
        filteredUsers = users;

      });
    });
  }

  List<DataImage> users = [];
  List<DataImage> filteredUsers = [];



  final _formKeys = GlobalKey<FormState>();




  String api;
  Future<List<DataImage>> GetImage() async {
    api = 'https://***************.php' ;
    var response = await http.post(Uri.parse(api));
    if (response.statusCode == 200) {
      final items = json.decode(response.body).cast<Map<String, dynamic>>();
      List<DataImage> listOfFruits = items.map<DataImage>((json) {
        return DataImage.fromJson(json);
      }).toList();
      return listOfFruits;
    }

  }
  
  List<AssetEntity> assets = <AssetEntity>[];
  
  @override
  Widget build(BuildContext context) {


    return  MaterialApp(
      home: Scaffold(

        body: Form(
            key: _formKeys,
            child:  Center(
              child:   ListView(
                children: <Widget>[

                  Card(
                    child: new Column(
                      children: <Widget>[
                        Container(
                          child: Center(
                            child: Column(
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.all(0),
                                  child: SingleChildScrollView(
                                    child: SizedBox(
                                      child: Column(
                                        //  mainAxisAlignment: MainAxisAlignment.start,
                                        //   crossAxisAlignment: CrossAxisAlignment.start,
                                        children: <Widget>[

                                          Column(
                                            children: <Widget>[
                                              AnimatedContainer(
                                                duration: kThemeAnimationDuration,
                                                curve: Curves.easeInOut,
                                                width: MediaQuery.of(context).size.width,
                                                height: filteredUsers.isNotEmpty ? 100.0 : 0.0,
                                                child: ListView.builder(
                                                    physics:  BouncingScrollPhysics(),

                                                    scrollDirection: Axis.horizontal,
                                                    itemCount: filteredUsers.length + 1  ,
                                                    itemBuilder: (BuildContext context, int index) {

                                                      if (index < filteredUsers.length) {
                                                        return Container(
                                                          margin: const EdgeInsets.symmetric(
                                                              horizontal: 0.5, vertical: 6.0),
                                                          child: AspectRatio(
                                                            aspectRatio: 1.0,
                                                            child: Stack(
                                                              children: <Widget>[

                                                                filteredUsers[index].isLocal ?
                                                                    

                                                                Image(
                                                                  image: AssetEntityImageProvider(

                                                                    assets.elementAt(index) ,
                                                                    isOriginal: false,
                                                                  ),
                                                                  fit: BoxFit.cover,
                                                                )


                                                                    : Image.network(
                                                                  filteredUsers[index].ImageURL.toString(),
                                                                  width: double.infinity,
                                                                  height: 400,
                                                                  fit: BoxFit.cover,
                                                                ),




                                                              ],

                                                            ),
                                                          ),
                                                        );
                                                      }
                                                      else {

                                                        return
                                                          IconButton(
                                                            icon: Icon(Icons.add,size: 50,),
                                                            onPressed: ()  async {

                                                              final List<AssetEntity> result = await AssetPicker.pickAssets(context,
                                                                  maxAssets: 4,
                                                                  pathThumbSize: 84,
                                                                  gridCount: 4,
                                                                  selectedAssets: assets,

                                                                  //we use this for languge
                                                                  textDelegate: EnglishTextDelegate());

                                                              if (result != null) {
                                                                setState(() {

                                                                  assets = List<AssetEntity>.from(result);

                                                                  filteredUsers.add(DataImage(  isLocal: true));


                                                                });
                                                              }



                                                            },
                                                          );

                                                      }

                                                    }

                                                  //itemBuilder: assetItemBuilder,
                                                ),
                                              )

                                            ],
                                          ),

                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        /*     Card(
                                child: showImage(),
                              ),*/

                      ],
                    ),
                  ),


                ],
              ),
            )),
      ),
    );
  }



}
class DataImage {

  bool isLocal;
  String ImageURL;


  DataImage(
      { this.ImageURL, this.isLocal = false});

  factory DataImage.fromJson(Map<String, dynamic> json) {
    return DataImage(

      ImageURL: json['image'].toString(),

    );
  }

  Map<String, dynamic> toJson() => {

    'ImageURL': ImageURL,
    'isLocal': isLocal,

  };


}

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 1

كيف نتحكم بعدد الصور؟

قم بتعريف متغير عام،

يحوي قيمة ابتدائية 0.

يتم تحديثه أولا بعدد الصور التي تأتي من قاعدة البيانات..

imagesCounter = 0

if (response.statusCode == 200) {
      final items = json.decode(response.body).cast<Map<String, dynamic>>();
      List<DataImage> listOfFruits = items.map<DataImage>((json) {
        return DataImage.fromJson(json);
      }).toList();
      
        imagesCounter = listOfFruits.length; // هنا
        
      return listOfFruits;
}

ثم نمرر للدالة التي تسمح للمستخدم بجلب الصور من الاستديو عدد الصور التي من الممكن إضافتها، وهي 4 ناقص التي تم تحميلها فعليا

maxAssets: 4 - imagesCounter,

هكذا يكون لنا متغير عام يضبط عدد الصور.

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 1
اقتباس

RangeError (index): Invalid value: Only valid value is 0: 1

لاحظ أنك تضيف صورة جديدة أيضا تأكد من تحديد طول قائمة البيانات. على سبيل المثال ، إذا كنت تستخدم ListView.builder ، فقم بإعطاء قيمة مناسبة للسمة itemCount.

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 12 دقائق مضت قال بلال زيادة:

لاحظ أنك تضيف صورة جديدة أيضا تأكد من تحديد طول قائمة البيانات. على سبيل المثال ، إذا كنت تستخدم ListView.builder ، فقم بإعطاء قيمة مناسبة للسمة itemCount.

اهلا بك اخوي 

نعم انا ارغب باضافة صوره جديده من الهاتف الى list بجانب الصور التي تاتي من قاعدة البيانات هنا تحدث المشكله

رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

اهلا بك اخوي 

نعم انا ارغب باضافة صوره جديده من الهاتف الى list بجانب الصور التي تاتي من قاعدة البيانات هنا تحدث المشكله

يجب عليك تحديث خاصية itemCount بعد إضافة الصورة حتى يتم تحديث عدد الصور الذي تريد إضهارها. 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 4 ساعات قال بلال زيادة:

يجب عليك تحديث خاصية itemCount بعد إضافة الصورة حتى يتم تحديث عدد الصور الذي تريد إضهارها. 

ياليت مشاركة بعض الاكواد كمثال اخوي

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
بتاريخ 14 ساعات قال Wael Aljamal:

كيف نتحكم بعدد الصور؟

قم بتعريف متغير عام،

يحوي قيمة ابتدائية 0.

يتم تحديثه أولا بعدد الصور التي تأتي من قاعدة البيانات..


imagesCounter = 0

if (response.statusCode == 200) {
      final items = json.decode(response.body).cast<Map<String, dynamic>>();
      List<DataImage> listOfFruits = items.map<DataImage>((json) {
        return DataImage.fromJson(json);
      }).toList();
      
        imagesCounter = listOfFruits.length; // هنا
        
      return listOfFruits;
}

ثم نمرر للدالة التي تسمح للمستخدم بجلب الصور من الاستديو عدد الصور التي من الممكن إضافتها، وهي 4 ناقص التي تم تحميلها فعليا


maxAssets: 4 - imagesCounter,

هكذا يكون لنا متغير عام يضبط عدد الصور.

 

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

شاكر لك ردك كقير

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

رابط هذا التعليق
شارك على الشبكات الإجتماعية

  • 0
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';
import 'dart:convert';
import 'dart:io';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';



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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: UpdateItem(),
    );
  }
}

class UpdateItem extends StatefulWidget {

  @override
  _update_profiletttState createState() => new _update_profiletttState();
}

class _update_profiletttState extends State<UpdateItem> {

  @override
  void initState() {
    super.initState();
    init();
  }

  void init() {

    GetImage().then((value) {
      setState(() {
        users.addAll(value);
        filteredUsers = users;

      });
    });
  }

  List<DataImage> users = [];
  List<DataImage> filteredUsers = [];



  final _formKeys = GlobalKey<FormState>();


 var  imagesCounter = 0;

  String api;
  Future<List<DataImage>> GetImage() async {
    api = '*************************' ;
    var response = await http.post(Uri.parse(api));
    if (response.statusCode == 200) {
      final items = json.decode(response.body).cast<Map<String, dynamic>>();
      List<DataImage> listOfFruits = items.map<DataImage>((json) {
        return DataImage.fromJson(json);
      }).toList();
      imagesCounter = listOfFruits.length; // هنا
      return listOfFruits;
    }

  }

  List<AssetEntity> assets = <AssetEntity>[];

  @override
  Widget build(BuildContext context) {


    return  MaterialApp(
      home: Scaffold(

        body: Form(
            key: _formKeys,
            child:  Center(
              child:   ListView(
                children: <Widget>[

                  Card(
                    child: new Column(
                      children: <Widget>[
                        Container(
                          child: Center(
                            child: Column(
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.all(0),
                                  child: SingleChildScrollView(
                                    child: SizedBox(
                                      child: Column(
                                        //  mainAxisAlignment: MainAxisAlignment.start,
                                        //   crossAxisAlignment: CrossAxisAlignment.start,
                                        children: <Widget>[

                                          Column(
                                            children: <Widget>[
                                              AnimatedContainer(
                                                duration: kThemeAnimationDuration,
                                                curve: Curves.easeInOut,
                                                width: MediaQuery.of(context).size.width,
                                                height: filteredUsers.isNotEmpty ? 100.0 : 0.0,
                                                child: ListView.builder(
                                                    physics:  BouncingScrollPhysics(),

                                                    scrollDirection: Axis.horizontal,
                                                    itemCount: filteredUsers.length + 1  ,
                                                    itemBuilder: (BuildContext context, int index) {

                                                      if (index < filteredUsers.length) {
                                                        return Container(
                                                          margin: const EdgeInsets.symmetric(
                                                              horizontal: 0.5, vertical: 6.0),
                                                          child: AspectRatio(
                                                            aspectRatio: 1.0,
                                                            child: Stack(
                                                              children: <Widget>[

                                                                filteredUsers[index].isLocal ?


                                                                Image(
                                                                  image: AssetEntityImageProvider(
                                                                    assets.elementAt(index-imagesCounter) ,// تم تعديل هنا ايضا
                                                                    isOriginal: false,
                                                                  ),
                                                                  fit: BoxFit.cover,
                                                                )


                                                                    : Image.network(
                                                                  filteredUsers[index].ImageURL.toString(),
                                                                  width: double.infinity,
                                                                  height: 400,
                                                                  fit: BoxFit.cover,
                                                                ),




                                                              ],

                                                            ),
                                                          ),
                                                        );
                                                      }
                                                      else {

                                                        return
                                                          IconButton(
                                                            icon: Icon(Icons.add,size: 50,),
                                                            onPressed: ()  async {

                                                              final List<AssetEntity> result = await AssetPicker.pickAssets(context,
                                                                 // maxAssets: 4,
                                                                  pathThumbSize: 84,
                                                                  gridCount: 4,
                                                                  selectedAssets: assets,
                                                                  maxAssets: 4 - imagesCounter,
                                                                  //we use this for languge
                                                                  textDelegate: EnglishTextDelegate());

                                                              if (result != null) {
                                                                setState(() {

                                                                  assets = List<AssetEntity>.from(result);

                                                                  filteredUsers.add(DataImage(  isLocal: true));


                                                                });
                                                              }



                                                            },
                                                          );

                                                      }

                                                    }

                                                  //itemBuilder: assetItemBuilder,
                                                ),
                                              )

                                            ],
                                          ),

                                        ],
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                        /*     Card(
                                child: showImage(),
                              ),*/

                      ],
                    ),
                  ),


                ],
              ),
            )),
      ),
    );
  }



}
class DataImage {

  bool isLocal;
  String ImageURL;


  DataImage(
      { this.ImageURL, this.isLocal = false});

  factory DataImage.fromJson(Map<String, dynamic> json) {
    return DataImage(

      ImageURL: json['image'].toString(),

    );
  }

  Map<String, dynamic> toJson() => {

    'ImageURL': ImageURL,
    'isLocal': isLocal,

  };


}

 

 

كل الشكر لك اخي الكريم 

تم التعديل في بواسطة مروان مروان3
رابط هذا التعليق
شارك على الشبكات الإجتماعية

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

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...