إنشاء card Animation مع null safety باستخدام flutter

إنشاء card Animation مع null safety باستخدام flutter

في هذه المقالة نقدم لكم card ولكن مختلف قليلا حيث انه يحتوي على انميشن وايضا هو عباره عن 2 card الاول يظهر بالشكل الرئيسي كما هو موضح والثاني يكون عندما تنقر على الزر الموجود في العنصر الاول ويظهر لك العنصر الثاني هذا التصميم للاسف كان موجود فقط لتطبيقات فلاتر التي لا تدعم null safety ولكن في الفتره الاخيره قام احد المطورين بتنفيذه ليدعم ال null safety ولكي لا يحدث اي مشاكل اثناء التطوير معك ولهذا احببنا ان نقدم لكم هذا الشكل الرائع حتى تكون قادر على تنفيذه في تطبيقك بسهوله بدون اي مشاكل .

تستخدم غالبية المؤسسات التطوير عبر الأنظمة الأساسية ، وهو أحد أكثر الأطر استخدامًا في الوقت الحاضر. هناك العديد من أنواع الإطارات المختلفة في السوق والتي لها نفس الوظيفة! Xamarin و PhoneGap و Ionic و Titanium و Monaca و Sencha و jQuery Mobile و React native و Flutter والعديد من الأمثلة الأخرى هي بعض الأمثلة الأكثر شهرة. ولكن ليست كل أدوات Cross Platform متساوية في الكفاءة.

لا يزال React native و Flutter يحتفظان بالمواقع المهيمنة ، لكن العديد من العناصر المذكورة أعلاه قد تلاشت. يدعمها Facebook و Google ، وهما من أكثر الأسماء شهرة في مجال التكنولوجيا. سنتحدث عن إطار عمل Google Flutter الذي يتم ذكره بشكل متكرر في هذه المقالة. هل لديك فضول بشأن تطوير تطبيق flutter؟ أو هل Flutter فعال في إنشاء التطبيقات؟

android sdk manager تحميل flutter developers applications create app android android studio mac

add package

flutter_slimy_card: ^1.0.2

How to use slimy_card with null safety in Flutter

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

ui.dart

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

  @override
  State<ChatPage> createState() => _ChatPageState();
}

class _ChatPageState extends State<ChatPage> {
  final String image =
      'https://images.unsplash.com/photo-1666586364671-f4907c79b1dd?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80';

  @override
  Widget build(BuildContext context) => Scaffold(
        backgroundColor: Colors.black,
        body: Column(
          children: [
            SizedBox(height: 30,),
            FlutterSlimyCard(
              cardWidth: 250,
              // Height first card
              topCardHeight: 200,
              // Height sec card
              bottomCardHeight: 100,
              topCardWidget: topWidget(),
              bottomCardWidget: bottomWidget(),
            ),
            SizedBox(height: 30,),
            FlutterSlimyCard(
              cardWidth: 250,
              // Height first card
              topCardHeight: 200,
              // Height sec card
              bottomCardHeight: 100,
              topCardWidget: topWidget(),
              bottomCardWidget: bottomWidget(),
            )
          ],
        ),
      );

  topWidget() {
    return Container(
      child: SafeArea(
        child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(15.0),
              child: Image.network(
                image,
                fit: BoxFit.cover,
                height: 100.0,
                width: 100.0,
              ),
            ),
            SizedBox(
              height: 5,
            ),
            Text(
              'geecoders',
              style: TextStyle(color: Colors.white, fontSize: 18),
            ),
            SizedBox(
              height: 5,
            ),
          ],
        ),
      ),
    );
  }

  bottomWidget() {
    return Container(
      margin: EdgeInsets.only(top: 5),
      child: Column(
        children: [
          SizedBox(height: 10),
          Flexible(
              child: Text(
                'A horse is a large animal which people can ride. Some horses are used for pulling ploughs and carts. Say Hello to a Funny Hourse.',
                style: TextStyle(color: Colors.white),
              ))
        ],
      ),
    );
  }
}

تعديل المقال