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

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

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

لغه دارت ظهرت تقريبا في عام 2011 بالنسبه الفلاتر فهي عباره عن بيئه عمل ولكن تعمل بلغة Dart حيث ظهرت هذة التقنية  في سنه 2017 وهذا يدل على ان هذة التقنية حديثة ولكن في خلال عدد قليل من السنوات اصبحت واحد من اهم التقنيات واللغات القوية التي انتقل عدد كبير من المطورين الى تعلمها والكثير اصبح يحاول بتتعلم البرمجه واحب البرمجه بسببها , فلاتر ولكن انا لا انصح بهذا الشيء مباشرة فننصحك بالبدء في تعلم لغه الجافا اولا , بعد استخدامي لفلاتر وجدت انها تشبه لغه جافا بشكل كبير جدا ويوجد بعض المتغيرات مختلفه عن اللغتين ولكن هي بشكل كبير قريبه من جافا اللغه غير صعبه جدا ولكن لغه بسيطه ولغه جميله وسنحاول تقديم كثير من الشروحات فيها لذلك حاول ان تتابع الموقع وتشاهد كل ما نقوم بتنزيله في موقعنا 

اضافة carousel slider

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

flutter_carousel_slider: ^1.0.8

كيفية استخدام مكتبة carousel slider في فلاتر

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

class MyHomePage extends StatefulWidget {

  MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // transfer widget
      body:CarouselSlider(
        // transfer style
        slideTransform: CubeTransform(),
        slideIndicator: CircularSlideIndicator(
          // indicator bottom
          padding: EdgeInsets.only(bottom: 32),
          // color indicator
          currentIndicatorColor: Colors.white,
        ),
        //infinite transfer
        unlimitedMode: true,
        // widget
        children: [
        Container(
          color: Colors.deepPurple,
        ),
        Container(
          color: Colors.pink,
        ),
      ],
      ) ,
    );
  }
}

فيديو الشرح

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