E commerce images slide example

WidgetSliderThis example requires knowledge about the package's external control feature.
Please first refer to External Control article.

---

Note: here is the full code implementation of article -> example/main.dart

---

1. Let's first create the controller of WidgetSlider.

final controller = SliderController(
  duration: const Duration(milliseconds: 600), // optional
);

2. Then, create a list of random images:

final images = const [
  'https://i.picsum.photos/id/816/200/300.jpg?hmac=4O5XSGjimzcjZYOXpVb_--v3rGzmS-3chmG2L1MS-mc',
  'https://i.picsum.photos/id/436/200/300.jpg?hmac=OuJRsPTZRaNZhIyVFbzDkMYMyORVpV86q5M8igEfM3Y',
  'https://i.picsum.photos/id/645/200/300.jpg?hmac=fiKW3Nj8r0CWJQY3S-kkeT8PAfvKhA8igd9GIRk41Yw',
  'https://i.picsum.photos/id/281/200/300.jpg?hmac=KCN8F5QTgxHdeQxLpZ5BOuUEVQEp8jAedlLSRERW7CY',
  'https://i.picsum.photos/id/816/200/300.jpg?hmac=4O5XSGjimzcjZYOXpVb_--v3rGzmS-3chmG2L1MS-mc',
];

3. And finally put everything into the widget.

WidgetSlider(
  fixedSize: 300,
  controller: controller,
  itemCount: images.length,
  itemBuilder: (context, index, activeIndex) {
    return CupertinoButton(
      // optional properties ...
      onPressed: () async => await controller.moveTo?.call(index),
      child: Container(
        margin: const EdgeInsets.all(5),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(10),
          image: DecorationImage(
            fit: BoxFit.fill,
            image: NetworkImage(images[index]),
          ),
          boxShadow: [
            BoxShadow(
              color: Colors.grey.shade50,
              offset: const Offset(0, 8),
              spreadRadius: 5,
              blurRadius: 10,
            ),
            BoxShadow(
              color: Colors.grey.shade100,
              offset: const Offset(0, 8),
              spreadRadius: 5,
              blurRadius: 10,
            ),
          ],
        ),
      ),
    );
  },
);