القائمة الرئيسية

الصفحات

تحديد عنصر او مجموعة عناصر مع animation باستخدام فلاتر

تحديد عنصر او مجموعة عناصر مع animation باستخدام فلاتر


 تحديد عنصر او مجموعة عناصر مع animation باستخدام فلاتر

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


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




add lib to pubspec (select_card )

قم بإضافة الاكواد التاليه داخل الملف الخاص بالمكتبة .


dependencies:

  select_card: ^0.0.9


How to use select_card  package with flutter

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


تحديد عنصر او مجموعة عناصر مع animation باستخدام فلاتر

ui.dart


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

  @override
  State<CodeLess> createState() => _CodeLessState();
}

class _CodeLessState extends State<CodeLess> {
  String? cardGroupResult;
  String? cardGroupResult2;
  String? selectSlideResult;

  final List<String> titles = <String>[
    'Emre Kaplan',
    'Oğuzcan',
    'Cansu',
    'Ahmet',
    "Mete",
    "Fatih Burak Kaplan ",
  ];

  final List<String> imagesFromNetwork = <String>[
    'https://gravatar.com/avatar/37b27392b82a7f94676757c1c2d10273?s=400&d=robohash&r=x',
    'https://gravatar.com/avatar/36f1d92605a3bf914d94cd136d3c7ec3?s=400&d=robohash&r=x',
    'https://gravatar.com/avatar/5ef18de85860bd24b4d95f3dcd41eccb?s=400&d=robohash&r=x',
    'https://gravatar.com/avatar/ce9c78d5127331baa3c67c7f67973967?s=400&d=robohash&r=x',
    "https://gravatar.com/avatar/d7204273c98a64cf10cef68ef561e722?s=400&d=robohash&r=x",
    "https://gravatar.com/avatar/f4f5b41a89722855c614bb1ea1dacc4d?s=400&d=robohash&r=x"
  ];

  final List<String> ids = <String>[
    '123',
    '134',
    '145',
    '156',
    "167",
    "178",
  ];

  final Map<String, String> carMap = {
    'assets/image1.jpg': 'automobile',
    'assets/image2.jpg': "VIP",
    'assets/image3.jpg': "18+1",
    'assets/image6.jpg': "Panelvan",
    'assets/image5.jpg': "Pick-Up",
    'assets/image4.jpg': "SUV",
    'assets/image3.jpg': "Other",
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      backgroundColor: Colors.white,
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
       children: [
         // single select
         SelectGroupCard(
             context,
             titles: titles,
             ids: ids,
             onTap: (title, id) {
               debugPrint(title);
               debugPrint(id);
               setState(() {
                 cardGroupResult = title;
               });
             }),
         SingleChildScrollView(
           scrollDirection: Axis.horizontal,
           child: Row(
             children: [
               SelectSingleCard(context,
                   title: titles[2],
                   id: ids[2],
                   imageSourceType: ImageSourceType.network,
                   image: imagesFromNetwork[1],
                   content: ids[0],
                   cardBackgroundColor: Colors.amberAccent,
                   cardSelectedColor: Colors.blue,
                   titleTextColor: Colors.blue.shade900,
                   contentTextColor: Colors.black87, onTap: (title, id) {
                     debugPrint(title);
                     debugPrint(id);
                     setState(() {
                       cardGroupResult2 = title + " " + id;
                     });
                   }),
               SelectSingleCard(context,
                   title: titles[5],
                   imageSourceType: ImageSourceType.network,
                   image: imagesFromNetwork[5],
                   content: ids[5],
                   cardBackgroundColor: Colors.orange,
                   cardSelectedColor: Colors.green,
                   titleTextColor: Colors.white,
                   contentTextColor: Colors.black87, onTap: (title) {
                     debugPrint(title);
                     setState(() {
                       cardGroupResult2 = title;
                     });
                   }),
               SelectSingleCard(context,
                   title: titles[2],
                   id: ids[2],
                   imageSourceType: ImageSourceType.network,
                   image: imagesFromNetwork[1],
                   content: ids[0],
                   cardBackgroundColor: Colors.amberAccent,
                   cardSelectedColor: Colors.blue,
                   titleTextColor: Colors.blue.shade900,
                   contentTextColor: Colors.black87, onTap: (title, id) {
                     debugPrint(title);
                     debugPrint(id);
                     setState(() {
                       cardGroupResult2 = title + " " + id;
                     });
                   }),
               SelectSingleCard(context,
                   title: titles[2],
                   id: ids[2],
                   imageSourceType: ImageSourceType.network,
                   image: imagesFromNetwork[1],
                   content: ids[0],
                   cardBackgroundColor: Colors.amberAccent,
                   cardSelectedColor: Colors.blue,
                   titleTextColor: Colors.blue.shade900,
                   contentTextColor: Colors.black87, onTap: (title, id) {
                     debugPrint(title);
                     debugPrint(id);
                     setState(() {
                       cardGroupResult2 = title + " " + id;
                     });
                   }),
               SelectSingleCard(context,
                   title: titles[5],
                   imageSourceType: ImageSourceType.network,
                   image: imagesFromNetwork[5],
                   content: ids[5],
                   cardBackgroundColor: Colors.orange,
                   cardSelectedColor: Colors.green,
                   titleTextColor: Colors.white,
                   contentTextColor: Colors.black87, onTap: (title) {
                     debugPrint(title);
                     setState(() {
                       cardGroupResult2 = title;
                     });
                   }),
             ],
           ),
         ),
         Padding(
           padding: const EdgeInsets.symmetric(horizontal: 100.0),
           child: SelectSlideItem(
             imageHeight: 160,
               duration: const Duration(milliseconds: 500),
             text: 'items',
               mapList: carMap,
               onChange: (title) {
                 debugPrint(title);
                 setState(() {
                   selectSlideResult = title;
                 });
               }),
         ),
       ],
      )
    );
  }
}


مزيد من الاكواد البرمجية :

تعليقات

التنقل السريع