تحديد مجموعة صور والتعديل عليهم وعمل فلتر وقص الصور في فلاتر

Ahmed Mahmoud

اخر تحديث :

تحديد مجموعة صور والتعديل عليهم وعمل فلتر وقص الصور في فلاتر

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

يمثل نظاما التشغيل الأساسيان للهاتف المحمول ، iOS و Android اكثر من 97% من حصة السوق لتطبيقات الهاتف المحمول. عادةً ما يتعين على مطور تطبيقات الأجهزة المحمولة كتابة العديد من الرموز أو قواعد التعليمات البرمجية عند إنشاء تطبيق جوال.

يتم زيادة تكلفة تطبيق الهاتف المحمول من خلال تطوير التطبيق الأصلي ، والذي يقيد أيضًا خيارات التسويق الرقمي. لذلك ، يبحث سوق تطبيقات الأجهزة المحمولة عن طرق جديدة لإنشاء تطبيقات iOS و Android مع تكلفة معقولة.

هناك العديد من الأدوات الشائعة في السوق في الوقت الحاضر. تكتب هذه الأدوات رموزًا لنظامي iOS و Android في نفس الوقت. أطر تطوير التطبيقات عبر الأنظمة الأساسية ومن ضمنها تقينة Flutter .

add package in flutter

dependencies:
multi_image_crop: ^0.0.2

How to crop and add filter on images

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

ui.dart

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

  @override
  State<FullPage> createState() => _FullPageState();
}

class _FullPageState extends State<FullPage> with TickerProviderStateMixin {
  List<XFile>? receivedFiles = [];
  List<File> croppedFiles = [];
  final ImagePicker _picker = ImagePicker();


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

  @override
  void dispose() {
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // backgroundColor: Colors.black,
      appBar: AppBar(
        title: Text('Full Page'),
      ),
      body: ListView.builder(
          itemCount: croppedFiles.length,
          itemBuilder: (context, index) {
            return Container(
                height: 250,
                padding: const EdgeInsets.all(10.0),
                child: GestureDetector(
                  onTap: (){
                    print(croppedFiles[index].path);
                  },
                  child: Image.file(
                    croppedFiles[index],
                    fit: BoxFit.fitWidth,
                  ),
                ));
          }),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          chooseImage();
        },
        child: const Icon(Icons.add),
      ),
    );
  }

  Center buildCenter() {
    return Center(
      child: Container(
        height: 300,
        width: 250,
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(40),
        ),
      ),
    );
  }

  MaterialButton buildMaterialButton() {
    return MaterialButton(
      color: Colors.blueAccent,
      onPressed: () {},
      child: const Text(
        'Click Here.',
        style: TextStyle(color: Colors.white),
      ),
    );
  }

  void chooseImage() async {
    receivedFiles = await _picker.pickMultiImage();
    MultiImageCrop.startCropping(
        context: context,
        aspectRatio: 4 / 3,
        activeColor: Colors.amber,
        pixelRatio: 3,
        files: List.generate(
            receivedFiles!.length, (index) => File(receivedFiles![index].path)),
        callBack: (List<File> images) {
          setState(() {
            croppedFiles = images;
          });
        });
  }

}

مزيد من المقالات