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

السؤال

نشر

السلام عليكم ورحمة الله وبركاته

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

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

 

import 'dart:io';

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

void main() => runApp(new SingleImageUpload());

class SingleImageUpload extends StatefulWidget {
  @override
  _SingleImageUploadState createState() {
    return _SingleImageUploadState();
  }
}

class _SingleImageUploadState extends State<SingleImageUpload> {
  List<Object> images = List<Object>();
  Future<File> _imageFile;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    setState(() {
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
      images.add("Add Image");
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(
          centerTitle: true,
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: <Widget>[
            Expanded(
              child: buildGridView(),
            ),
          ],
        ),
      ),
    );
  }

  Widget buildGridView() {
    return GridView.count(
      shrinkWrap: true,
      crossAxisCount: 3,
      childAspectRatio: 1,
      children: List.generate(images.length, (index) {
        if (images[index] is ImageUploadModel) {
          ImageUploadModel uploadModel = images[index];
  
          return Card(
            clipBehavior: Clip.antiAlias,
            child: Stack(
              children: <Widget>[
                Image.file(
                  uploadModel.imageFile,
                  width: 300,
                  height: 300,
                ),
                Positioned(
                  right: 5,
                  top: 5,
                  child: InkWell(
                    child: Icon(
                      Icons.remove_circle,
                      size: 20,
                      color: Colors.red,
                    ),
                    onTap: () {
                      setState(() {
                        images.replaceRange(index, index + 1, ['Add Image']);
                      });
                    },
                  ),
                ),
              ],
            ),
          );
        } else {
          return Card(
            child: IconButton(
              icon: Icon(Icons.add),
              onPressed: () {
                _onAddImageClick(index);
              },
            ),
          );
        }
      }),
    );
  }

  Future _onAddImageClick(int index) async {
    setState(() {
      _imageFile = ImagePicker.pickImage(source: ImageSource.gallery);
      getFileImage(index);
    });
  }

  void getFileImage(int index) async {
//    var dir = await path_provider.getTemporaryDirectory();

    _imageFile.then((file) async {
      setState(() {
        ImageUploadModel imageUpload = new ImageUploadModel();
        imageUpload.isUploaded = false;
        imageUpload.uploading = false;
        imageUpload.imageFile = file;
        imageUpload.imageUrl = '';

        images.replaceRange(index, index + 1, [imageUpload]);
      });
    });
  }
}

class ImageUploadModel {
  bool isUploaded;
  bool uploading;
  File imageFile;
  String imageUrl;

  ImageUploadModel({
    this.isUploaded,
    this.uploading,
    this.imageFile,
    this.imageUrl,
  });
}

 

Recommended Posts

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

بعد إرجاع الصور من الباك أند تقوم بإضافتهن إلى  List images مثل ما هو موجود في الكود الخاص بك. هل ممكن ترفق جزء الإستعلام عن البيانات من الباك اند في flutter ؟

اهلا بك اخي 

هذا الكود ليس مرتبط ب قاعدة بيانات الان

انا احصل على الصور من الهاتف وعرضها الان وارغب بتحميلها او عمل upload لها 

 

بتاريخ 6 ساعات قال بلال زيادة:

بعد إرجاع الصور من الباك أند تقوم بإضافتهن إلى  List images مثل ما هو موجود في الكود الخاص بك. هل ممكن ترفق جزء الإستعلام عن البيانات من الباك اند في flutter ؟

ما احتاجه هو عكس ما فهمت انت اخي الكريم اما ارغب بطريقة عمل upload. لمجموعة الصور المختاره

  • 0
نشر (معدل)

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

https://pub.dev/packages/multi_image_picker/example

و يمكنك فهم الكود بطريقة بسيطة كالتالي 

 Future<void> loadAssets() async {
   // هنا نقوم بعمل ليست من الصور و هي اسسيت
    List<Asset> resultList = <Asset>[];
    String error = 'No Error Detected';

    try {
   // نقوم باخذ  جميع الصور و خفظ الملومات باوبجكت و من ثم وضعها داخل مصفوفة 
      resultList = await MultiImagePicker.pickImages(
        maxImages: 300,
        enableCamera: true,
        selectedAssets: images,
        cupertinoOptions: CupertinoOptions(takePhotoIcon: "chat"),
        materialOptions: MaterialOptions(
          actionBarColor: "#abcdef",
          actionBarTitle: "Example App",
          allViewTitle: "All Photos",
          useDetailsView: false,
          selectCircleStrokeColor: "#000000",
        ),
      );
    } on Exception catch (e) {
      error = e.toString();
    }

    // If the widget was removed from the tree while the asynchronous platform
    // message was in flight, we want to discard the reply rather than calling
    // setState to update our non-existent appearance.
    if (!mounted) return;
	// هنا نقوم بحفظ المصفوفة بالستيت 
    setState(() {
      images = resultList;
      _error = error;
    });
  }

 

 Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Plugin example app'),
        ),
        body: Column(
          children: <Widget>[
            Center(child: Text('Error: $_error')),
            ElevatedButton(
            // هنا تقوم بعمل كبسة واحد تستدعي الدالة التي تقوم بحقظ البيانات 
              child: Text("Pick images"),
              onPressed: loadAssets,
            ),
            Expanded(
              child: buildGridView(),
            )
          ],
        ),
      ),
    );
  }
}

 

تم التعديل في بواسطة Nuhla Almasri
  • 0
نشر
بتاريخ 6 دقائق مضت قال Nuhla Almasri:

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

https://pub.dev/packages/multi_image_picker/example

 

 

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...