شرح كيفية تغيير الايقونه اثناء النقر عليها مع animation في فلاتر

شرح كيفية تغيير الايقونه اثناء النقر عليها مع animation في فلاتر

شرح كيفية تغيير الايقونه اثناء النقر عليها مع animation في فلاتر

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


سواء كنت تستهدف iOS أو Android ، أو الويب ، أو Windows ، أو macOS ، أو Linux ، أو تدمجها كمجموعة أدوات واجهة المستخدم لمنصة من اختيارك ، نعتقد أن Flutter سيساعدك على إنشاء تطبيقات جميلة وسريعة مع تطوير منتج وقابل للتوسيع ومفتوح نموذج.

نود أن نوفر للمصممين حرية التعبير عن رؤيتهم الإبداعية بالكامل ، غير المقيدة بقيود الإطار الأساسي. نظرًا لإمكانيات التركيب المعقدة والتصميم متعدد الطبقات لـ Flutter ، يمكنك التحكم الكامل في كل بكسل على الشاشة. يمكنك تراكب وتحريك الرسومات والفيديو والنص وعناصر التحكم دون قيود. سواء كنت تقوم بالتطوير لنظام iOS (Cupertino) أو Android (Material) ، فإن Flutter يتميز بمجموعة كاملة من الأدوات المصغّرة التي توفر تجارب مثالية للبكسل إلى جانب إمكانيات التغيير والتبديل أو إنشاء أنماط مرئية جديدة تمامًا.


change icon after click flutter


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


change icon after click flutter

ui.dart


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

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

class _FullPageState extends State<FullPage>
    with SingleTickerProviderStateMixin {
    
  bool isChange = false;
  late AnimationController controller;

  @override
  void initState() {
    super.initState();
    controller =
        AnimationController(vsync: this, duration: Duration(seconds: 1));
  }

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


  @override
  Widget build(BuildContext context) {

    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              IconButton(
                iconSize: 100,
                onPressed: trigger,
                icon: AnimatedIcon(
                  icon: AnimatedIcons.menu_home,
                  color: Colors.orangeAccent,
                  progress: controller,
                ),
              ),
              IconButton(
                iconSize: 100,
                onPressed: trigger,
                icon: AnimatedIcon(
                  icon: AnimatedIcons.play_pause,
                  color: Colors.orangeAccent,
                  progress: controller,
                ),
              ),
              IconButton(
                iconSize: 100,
                onPressed: trigger,
                icon: AnimatedIcon(
                  icon: AnimatedIcons.add_event,
                  color: Colors.orangeAccent,
                  progress: controller,
                ),
              ),
              IconButton(
                iconSize: 100,
                onPressed: trigger,
                icon: AnimatedIcon(
                  icon: AnimatedIcons.search_ellipsis,
                  color: Colors.orangeAccent,
                  progress: controller,
                ),
              ),
            ],
          ),
        ),),);
  }
  void trigger() {
    setState((){
      isChange = !isChange;
      isChange ? controller.forward() : controller.reverse();
    });
  }
}


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

تعليقات