شارك المقالة

كيفية إنشاء زر للسحب في فلاتر | slide button in flutter


كيفية إنشاء زر للسحب في فلاتر | slide button in flutter

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




أصبح إطار عمل Google Flutter شائعًا بشكل متزايد ، ويتم تطوير المزيد والمزيد من التطبيقات باستخدام Flutter اليوم. تعد قدرة Flutter عبر الأنظمة الأساسية هي ميزتها الرئيسية. يدعم كل من الويب وأنظمة التشغيل iOS / Android تطبيقك. بالإضافة إلى ذلك ، نظرًا لأن Flutter هو إطار عمل مفتوح المصدر ، يمكن لأي مطور تحسين وظائفه على GitHub.

سنقوم بإدراج أفضل التطبيقات مفتوحة المصدر التي تم إنشاؤها باستخدام Flutter اليوم. قد يمنحك بعض الأفكار حول كيفية تطور تطبيقك المستند إلى Flutter إذا تم استخدام خدمات تطوير تطبيقات الأجهزة المحمولة المناسبة. سنبدأ بتطبيقات Flutter المجانية والمفتوحة المصدر بحيث يمكنك استخدامها على الفور.


add slide_to_act to your project


dependencies:

  slide_to_act: ^2.0.1



How to Add slide button in flutter


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


How to Add slide button in flutter

ui.dart


class TestPage extends StatefulWidget {
  const TestPage({Key? key,required this.text}) : super(key: key);
  final String text;

  @override
  State<TestPage> createState() => _TestPageState();
}

class _TestPageState extends State<TestPage> {
bool isSubmit = false;


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.black87,
        leading: IconButton(
          onPressed: ()=> Navigator.pop(context),
          icon: Icon(Icons.arrow_back_ios_new),
        ),
        title: Text(widget.text),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            if (isSubmit)
            Text(widget.text),
             Padding(
               padding: const EdgeInsets.all(15.0),
               child: SlideAction(
                 borderRadius: 15,
                 elevation: 10,
                 innerColor: Colors.deepPurple,
                 outerColor: Colors.deepPurpleAccent[100],
                 submittedIcon: Icon(Icons.check_circle,color: Colors.white,),
                 sliderButtonIcon: Icon(Icons.lock_clock_rounded , color: Colors.white,),
                 text: 'slide to Submit',
                 textStyle: TextStyle(color: Colors.grey[100], fontSize: 20),
                 onSubmit: (){
                   print('Done ..');
                   setState(() {
                     isSubmit = true;
                   });
                 },

               ),
             ),

          ],
        )
      ),
    );
  }
  


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

  1. حل مشكلة minCompileSdk (31) specified in a dependency’s AAR
  2. عمل مؤشر لتتبع الخطوات في فلاتر | flutter stepper
  3.  كود منع تدوير الشاشه في التطبيقات بإستخدام فلاتر
  4.  شرح كيفية عمل post للبيانات من نوع params داخل الapi في flutter
  5. شرح كيفية استخدام الapi مع repostery في Flutter وتنظيم الكود

شاهد أيضًا
مقالات ذات صلة
كود بلغة c++ لمعرفة الاعداد الفردية | C ++ code to print odd numbers

  هل تم طلب منك في الجامعه او الكورس ان تكتب كود برمجي بلغة c++…

تصميم شات ui بكود فلاتر لانشاء تطبيق محادثه بشكل جميل

تصميم شات ui بكود فلاتر لانشاء تطبيق محادثه بشكل جميلكما نعلم ان تطبيقات المحادثات اصبحت…

مجموعة من افضل المواقع التي تساعدك في اختيار الالوان المناسبه لتصميمك

  اذاكنت ترغب ببناء تصميم موقع الكتروني احترافي على الانترنت وللاسف محتار في اختيار الالوان…

🚫 مانع الإعلانات مفعل

يجب إيقاف مانع الإعلانات لاستكمال تصفح الموقع