شرح كيفية تغيير الايقونه اثناء النقر عليها مع 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 وبناء عليها سوف تغير الشكل .
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();
});
}
}
مزيد من المقالات
