إنشاء واجهة تطبيق لرفع الملفات من هاتفك مع تحديد صيغة الصورة في Flutter

إنشاء واجهة تطبيق لرفع الملفات من هاتفك مع تحديد صيغة الصورة في Flutter

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

تستخدم غالبية المؤسسات التطوير عبر الأنظمة الأساسية ، وهو أحد أكثر الأطر استخدامًا في الوقت الحاضر. هناك العديد من أنواع الإطارات المختلفة في السوق والتي لها نفس الوظيفة! Xamarin و PhoneGap و Ionic و Titanium و Monaca و Sencha و jQuery Mobile و React native و Flutter والعديد من الأمثلة الأخرى هي بعض الأمثلة الأكثر شهرة. ولكن ليست كل أدوات Cross Platform متساوية في الكفاءة.

لا يزال React native و Flutter يحتفظان بالمواقع المهيمنة ، لكن العديد من العناصر المذكورة أعلاه قد تلاشت. يدعمها Facebook و Google ، وهما من أكثر الأسماء شهرة في مجال التكنولوجيا. سنتحدث عن إطار عمل Google Flutter الذي يتم ذكره بشكل متكرر في هذه المقالة. هل لديك فضول بشأن تطوير تطبيق flutter؟ أو هل Flutter فعال في إنشاء التطبيقات؟

Add packages

  file_picker: ^5.2.0+1

  iconsax: ^0.0.8

  dotted_border: ^2.0.0+2

Design upload files in Flutter

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

ui.dart

class SecPage extends StatefulWidget {
  SecPage({Key? key}) : super(key: key);

  @override
  State<SecPage> createState() => _SecPageState();
}

class _SecPageState extends State<SecPage> with SingleTickerProviderStateMixin{
  String _image = 'https://ouch-cdn2.icons8.com/84zU-uvFboh65geJMR5XIHCaNkx-BZ2TahEpE9TpVJM/rs:fit:784:784/czM6Ly9pY29uczgu/b3VjaC1wcm9kLmFz/c2V0cy9wbmcvODU5/L2E1MDk1MmUyLTg1/ZTMtNGU3OC1hYzlh/LWU2NDVmMWRiMjY0/OS5wbmc.png';
  late AnimationController loadingController;

  File? _file;
  PlatformFile? _platformFile;
  bool isUploaded = false;

  selectFile() async {
    final file = await FilePicker.platform.pickFiles(
        type: FileType.custom,
        allowedExtensions: ['png', 'jpg', 'jpeg']
    );

    if (file != null) {
      setState(() {
        _file = File(file.files.single.path!);
        _platformFile = file.files.first;
      });
    }

    loadingController.forward();
  }

  @override
  void initState() {
    loadingController = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 6),
    )..addListener(() { setState(() {
      if (loadingController.isCompleted) {
        setState(() {
          isUploaded = true;
        });
      } else {
        isUploaded = false;
      }
    }); });


    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        elevation: 0,
        backgroundColor: Colors.white,
        title: const Text("Odometer Package Example", style: TextStyle(color: Colors.black),),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: <Widget>[
            const SizedBox(height: 30,),
            Image.network(_image, width: 250,),
            const SizedBox(height: 50,),
            Text('Upload your file', style: TextStyle(fontSize: 25, color: Colors.grey.shade800, fontWeight: FontWeight.bold),),
            const SizedBox(height: 10,),
            Text('File should be jpg, png', style: TextStyle(fontSize: 15, color: Colors.grey.shade500),),
            const SizedBox(height: 20,),
            GestureDetector(
              onTap: selectFile,
              child: Padding(
                  padding: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 20.0),
                  child: DottedBorder(
                    borderType: BorderType.RRect,
                    radius: const Radius.circular(10),
                    dashPattern: [10, 4],
                    strokeCap: StrokeCap.round,
                    color: Colors.blue.shade400,
                    child: Container(
                      width: double.infinity,
                      height: 150,
                      decoration: BoxDecoration(
                          color: Colors.blue.shade50.withOpacity(.3),
                          borderRadius: BorderRadius.circular(10)
                      ),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          const Icon(Iconsax.folder_open, color: Colors.blue, size: 40,),
                          const SizedBox(height: 15,),
                          Text('Select your file', style: TextStyle(fontSize: 15, color: Colors.grey.shade400),),
                        ],
                      ),
                    ),
                  )
              ),
            ),
            _platformFile != null
                ? Container(
                padding: const EdgeInsets.all(20),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text('Selected File',
                      style: TextStyle(color: Colors.grey.shade400, fontSize: 15, ),),
                    const SizedBox(height: 10,),
                    Container(
                        padding: const EdgeInsets.all(8),
                        decoration: BoxDecoration(
                            borderRadius: BorderRadius.circular(10),
                            color: Colors.white,
                            boxShadow: [
                              BoxShadow(
                                color: Colors.grey.shade200,
                                offset: const Offset(0, 1),
                                blurRadius: 3,
                                spreadRadius: 2,
                              )
                            ]
                        ),
                        child: Row(
                          children: [
                            ClipRRect(
                                borderRadius: BorderRadius.circular(8),
                                child: Image.file(_file!, width: 70,)
                            ),
                            const SizedBox(width: 10,),
                            Expanded(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: [
                                  Text(_platformFile!.name,
                                    style: const TextStyle(fontSize: 13, color: Colors.black),),
                                  const SizedBox(height: 5,),
                                  Text('${(_platformFile!.size / 1024).ceil()} KB',
                                    style: TextStyle(fontSize: 13, color: Colors.grey.shade500),
                                  ),
                                  const SizedBox(height: 5,),
                                  buildUploadFile(),
                                ],
                              ),
                            ),
                            const SizedBox(width: 10,),
                          ],
                        )
                    ),
                    const SizedBox(height: 20,),
                  ],
                ))
                : Container(),
          ],
        ),
      ),
    );
  }
  Widget buildUploadFile() {
    return isUploaded ? Column(
      children: [
        const SizedBox(height: 5,),
        Container(
            clipBehavior: Clip.hardEdge,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(8),
                color: Colors.green.shade50
            ),
            child: const Padding(
              padding: EdgeInsets.all(5.0),
              child: Text('uploaded', style: TextStyle(fontSize: 14),),
            ))
      ],
    ) : Container(
      // height: 5,
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(5),
        color: Colors.blue.shade50,
      ),
      child: LinearProgressIndicator(
        value: loadingController.value,
      ),
    );
  }
}

android sdk manager تحميل flutter developers applications create app android android studio mac

فيديو الشرح