شرح كيفية التنقل وعمل blur للصور مع Animated في flutter

Ahmed Mahmoud

اخر تحديث :

شرح كيفية التنقل وعمل blur للصور مع Animated في flutter

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

عندما نذكر flutter فإننا نذكر واحد من اقوى ال technology في مجال تطوير mobile application وذلك بسبب كفائتها التي نراها واهمية دعمها لاكثر من platform مختلفه وهذا من اهم اسباب انتشار تقنية flutter وايضا دعمها لتطوير websites و desktop applications والتحديثات المستمره من طرف العملاق google من اجل مساعدة ال developer من انشاء التطبيقات بسهوله وانجاز الاعمال بشكل اسرع وهي لغة widget فإذا فهمت كيف تستخدم ال widget بشكل صحيح والتعرف على كل عنصر منهم فسوف تكون قادر على بناء التطبيقات بسهوله بالنسبة للغة البرمجه الداعمه لفلاتر فهي Dart والتي ظهرت في عام 2011 وانتشرت في نهاية 2017 بسبب Flutter

وضع الصور التي نريد التبديل عليها في list

في البداية سوف نقوم بوضع مصفوفه في class مختلف ونضع بداخلها الصور التي نريد ان نستخدمها يمكنك احضار الصور من الانترنت او من اي مكان الامر راجع لك .

list.dart

List<String> images = [
  "assets/image1.jpg",
  "assets/image2.jpg",
  "assets/image3.jpg",
  "assets/image4.jpg",
  "assets/image5.jpg",
  "assets/image6.jpg"
];

التبديل بين الصور في Flutter مع وجود animation بطريقة مختلفه

نقوم هنا بإستخدام AnimatedSwitcher لكي نستطيع التبديل يمين ويسار مع الانميشن وبعدها استخدمنا BackdropFilter لكي نستطيع وضع blur حول الصور كل هذا لكي نقوم بعمل صورة شفافه خلف الصورة الرئيسيه بالنسبة للصورة الرئيسيه سوف يتم وضعها بداخل الFractionallySizedBox وهنا يتم الحصول على العنصر الخاص بالصورة والصوره نفسها .

main_page.dart

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

  @override
  State<GG> createState() => _GGState();
}

int countIndex = 0 ;

class _GGState extends State<GG> {
  @override
  Widget build(BuildContext context) {
    return Stack(
        alignment: Alignment.center,
        children: [
          // Animated Switch position
          AnimatedSwitcher(
            duration: const Duration(microseconds: 600),
            child: Form(
              key: ValueKey<int>(countIndex),
              child: Container(
                decoration: BoxDecoration(
                  image: DecorationImage(image: AssetImage(images[countIndex]) , fit: BoxFit.cover),
                ),
                child: BackdropFilter(
                  filter: ImageFilter.blur(
                    sigmaX: 10,
                    sigmaY: 10,
                  ),
                  child: Container(
                    color: Colors.black45.withOpacity(0.2),
                  ),
                ),
              ),
            ),
          ),
          FractionallySizedBox(
            heightFactor: 0.55,
            child: PageView.builder(
              onPageChanged: (value) {
                setState(() {
                  countIndex = value;
                });
              },
              itemCount: images.length,
              itemBuilder: (context , index) {
                return FractionallySizedBox(
                  widthFactor: 0.8,
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(32),
                        image: DecorationImage(image: AssetImage(images[index]) , fit: BoxFit.cover),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      );
  }
}