كيفية استخدام animations عند تغيير الصور في flutter بسهوله
في هذا الكود نقدم لكم طريقة جديده لعرض الصور والمميز انها لن تحتاج منك الى تثبيت اي مكتبات خارجية بل ما سوف نقوم به هو استخدام الanimations الموجوده داخل flutter لتنفيذ امر معين اثناء تغيير الصوره والنقر على زر التغيير وهذا الامر سوف يعطي طابع مختلف قليلا على شكل تطبيقك والتصميم الذي تعمل عليه ويجعله اكثر حيويه عن الاشكال التقليديه والانقالات العاديه التي اصبح الكثير من المستخدمين لا يفضلونها .
ظهرت لغة دارت في سنة 2011 و فلاتر ظهر في سنة 2017 وهذا يعني انهاومن بيئات العمل الجديده وللمعلومية flutter من تطوير العملاق جوجل والتي تطور الكثير من اللغات وتهتم بعالم البرمجه بشكل كبير جدا وهي ايضا من قامت بتطوير كوتلن والمختصه بتطوير تطبيقات الاندرويد واصبحت المنافسه للجافا وذلك بعد المشاكل التي واجهتها جوجل بسبب التطبيقات المطوره باستخدام جافا على Google play واصبحت تقدم الكثير من libraries التي تسهل على المطورين العمل وتسهل عليهم الكثير من الوقت في انشاء وتطوير تطبيقات الجوال بشكل سريع .
Flutter كغيرها من بيئات العمل سوف تواجه مشاكل مع التطبيقات التي تظهر بواسطتها ولكن لا تقلق فقد لا تشاهد مشاكل سوا في المشاريع الكبيره جدا ولكن كتطبيقات بسيطه او متوسطه فلا تقلق منها اطلاقا ودائما نجد استمراريه في التطوير من قبل جوجل لحل المشاكل التي تواجه المستخدمين بشكل كبير ، وهذا ما يجعل المبرمجين ينتقلون الى هذه اللغه والتعامل معها في الفترات الاخيره وترك باقي اللغات ، ونحن سنشارك معكم شروحات في تطوير التطبيقات بشكل مبسط لكم .
كود animations مع تغيير الصوره في فلاتر
التبديل بين الصور تم احاطته ب العنصر AnimatedCrossFade لكي يحدث التغيير عند تبديل الصور عند النقر على الزر وعند كل ضغطة يغير حالة الزر للصورة الاخرى وهذا الامر مفيد جدا لكي يساعدكم في التبديل بين الصور واضافة المؤثرات عليها .
class GeeCoders extends StatefulWidget {
const GeeCoders({Key? key}) : super(key: key);
@override
State<GeeCoders> createState() => _GeeCodersState();
}
class _GeeCodersState extends State<GeeCoders> {
bool _change = true;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.grey[900],
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedCrossFade(firstChild: Image.network('https://images.unsplash.com/photo-1604171253006-20f7b199b5bc?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Z2FtaW5nJTIwbW91c2V8ZW58MHx8MHx8&w=1000&q=80' , width: 400,height: 500, fit: BoxFit.cover) ,
secondChild: Image.network('https://images.unsplash.com/photo-1594008671712-da08718510bf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1yZWxhdGVkfDF8fHxlbnwwfHx8fA%3D%3D&w=1000&q=80', width: 400,height: 500, fit: BoxFit.cover,),
crossFadeState: _change ? CrossFadeState.showFirst : CrossFadeState.showSecond,
duration: Duration(seconds: 1)),
SizedBox(height: 30,),
MaterialButton(onPressed: (){
setState(() {
_change = !_change;
});
}, child: const Text('Click' , style: TextStyle(color: Colors.white),) , color: Colors.deepPurple,),
],
),
),
);
}
}
لمزيد من الدروس
