سلايد باللمس scroll كما في موقع eBay

بتاريخ 38 دقائق مضت قال Motaz Khogali:

وعليكم السلام موجودة علي flutter 

 

باستخدام هذل الكود كمثال 

class _HomePageState extends State<HomePage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
          height: 200, // card height
          child: PageView.builder(
            itemCount: 10,
            controller: PageController(viewportFraction: 0.7),
            onPageChanged: (int index) => setState(() => _index = index),
            itemBuilder: (_, i) {
              return Transform.scale(
                scale: i == _index ? 1 : 0.9,
                child: Card(
                  elevation: 6,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  child: Center(
                    child: Text(
                      "Card ${i + 1}",
                      style: TextStyle(fontSize: 32),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

 

أهلاً بك أستاذي؛ 

هل يمكنك إرشادي إلى دليل أو فيديو يوضح لي كيف أستخدم flutter في هذه المرحلة ؟ 

وشكرا لك مسبقاً .

بتاريخ منذ ساعة مضت قال عبد الواحد الحدادي:

السلام عليكم ورحمة الله وبركاته، أتمنى أن يكون الجميع بصحة جيدة ... أريد أن أسأل أيّ المكتبات توفر هذا السلايد الذي يكون على الأجهزة اللوحية والصغيرة ( انظر الفيديو المرفق من فضلك ) .. المثال من موقع eBay . 

تحياتي لكم وبالتوفيق للجميع .

Record_2020-09-11-22-19-52.mp4

أهلاً  بك 
هذا يسمى Carousel في الويب . يوجد له  استخدام في الbootstrap  و يمكن عمله  ال css و ال html و ال js 

اقدم لك هذا المثال الشبيه لما هو في الفديو الخاص بك .  

يمكنك التعديل على الملف . بما يناسب حاجتك . 
مرفق ملف فيه كود html css js 

شكراً لك 

index.html

بتاريخ 17 دقائق مضت قال عبد الواحد الحدادي:

أهلاً بك أستاذي؛ 

هل يمكنك إرشادي إلى دليل أو فيديو يوضح لي كيف أستخدم flutter في هذه المرحلة ؟ 

وشكرا لك مسبقاً .

flutter هو إطار عمل يعتمد  على لغة ال dart  البرمجية و هو مخصص لتطوير تطبيقات الأندرويد و ال ios 
و حتى الآن فهو غير مدعوم لتطوير الويب 
لذلك لا يمكنك إستخدامه في الموقع الخاص بكـ  و لا ينصح باستخدام الflutter لتطوير تطبيقات الويب بسبب انها غير مدعومة . 
عدى عن هذا فأنت تحتاج الى تعلم لغة برمجة جديدة و هي لغة ال dart و هذا سيكون محبط لك نوعاً ما بما أنك ما زلت في مرحلة التعلم . 
أرفقت لك حل للمشكلة  الخاصة بك بإستخدام ال html js css 

 

بتاريخ On 9/11/2020 at 14:23 قال عبد الواحد الحدادي:

السلام عليكم ورحمة الله وبركاته، أتمنى أن يكون الجميع بصحة جيدة ... أريد أن أسأل أيّ المكتبات توفر هذا السلايد الذي يكون على الأجهزة اللوحية والصغيرة ( انظر الفيديو المرفق من فضلك ) .. المثال من موقع eBay . 

تحياتي لكم وبالتوفيق للجميع .

Record_2020-09-11-22-19-52.mp4

مرحبًا عبد الواحد.

يمكنك بناء الslider الموجود في المثال المرفق باستخدام html و css فقط دون الحاجة إلى استخدام أي مكتبات كما يلي:

أكواد html:

<div class="slider">

  <div class="slider__item">
    <img class="slider__image" src="image1.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image2.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image3.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image4.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image5.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image6.png" alt="" >
  </div>
  
  <div class="slider__item">
    <img class="slider__image" src="image7.png" alt="" >
  </div>
  
</div>

أكواد css:

.slider {
  display: flex; /*تظهر على هيئة صف slider ستقوم هذه الخاصية بجعل محتويات الحاوية */
  
  overflow-x: scroll; /* حتى نرى باقي العناصر scroll بعدها نستخدم هذه الخاصية حتى نتمكن من عمل  */
  
  /* IE, Edge and Firefox في المتصفحات scroll baar نستخدم التنسيقين التاليين إذا أردنا إخفاء ال */
  
  -ms-overflow-style: none;   /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

/* Chrome, Safari and Opera في المتصفحات scroll baar نستخدم التنسيقين التاليين إذا أردنا إخفاء ال */
  
.slider::-webkit-scrollbar {
  display: none;
}

.slider__image {
  width: 150px;
}

نتيجة الأكواد السابقة:

repl.it.mp4

ملفات الأكواد إذا أردت تجربتها: ThoroughWateryWireframes.zip

وعليكم السلام موجودة علي flutter 

باستخدام هذل الكود كمثال 

class _HomePageState extends State<HomePage> {
  int _index = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
          height: 200, // card height
          child: PageView.builder(
            itemCount: 10,
            controller: PageController(viewportFraction: 0.7),
            onPageChanged: (int index) => setState(() => _index = index),
            itemBuilder: (_, i) {
              return Transform.scale(
                scale: i == _index ? 1 : 0.9,
                child: Card(
                  elevation: 6,
                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
                  child: Center(
                    child: Text(
                      "Card ${i + 1}",
                      style: TextStyle(fontSize: 32),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}