GF Custom Flutter Carousel Slider Widget

GF Custom Flutter Carousel Slider Widget

What is Flutter slider?

A slider is a Flutter widget that is used to select a particular value from a given set of ranges. As the name itself suggests, the user can slide through the starting point to the ending point or in-between to select the desired value from the given range.

Implementation:

Slider: The slider widget which is a simple flutter widget can be implemented by providing the range values from starting to ending. This widget takes two required parameters:

  1. value: The default value is passed whenever the app is launched and it should take the type double.
  2. onChanged: This is used when the user changes the slider value which is a type double and can be used for further process.

What is Flutter Range Slider?

A range slider is a Flutter widget that is similar to a Flutter Slider widget. The only difference between these two is that in a slider widget we select a desired value from the given range but whereas in a range slider we get to select a continuous range of values from min to max values that is given in the range.

Implementation:

RangeSlider widget is a Flutter widget that can be used by calling the RangeSlider component . This widget takes two required parameters:

  1. values: The RangeValues type of data is passed in value that has a starting and an ending value.
  2. onChanged: This function is called when the values are changed to get a RangeValue.

What is Flutter Carousel Slider?

Carousel Slider is a Flutter Carousel Slider widget that is one of the most used and popular component in most of the applications and eCommerce sites. These are commonly called as Image Sliders too where-in there will be plenty of images which scrolls right and left automatically or even manually to enhance the user experience and the feel of the application.

Flutter Carousel Slider/Flutter Image Slider

GFCarousel Slider is a Flutter Carousel Slider or Flutter Image Slider widget that has a set of images that slides one after the other in a linear manner repeatedly in a given interval of time. GFCarousel Slider can have any number of items in a slide and it can also have multiple images in one single slide.

Below is a simple example code for Flutter Carousel Slider with indicator of one image in one slide of GFCarousel Slider

import 'package:getwidget/getwidget.dart';

final List<String> imageList = [
  "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg",
  "https://cdn.pixabay.com/photo/2017/12/13/00/23/christmas-3015776_960_720.jpg",
  "https://cdn.pixabay.com/photo/2019/12/19/10/55/christmas-market-4705877_960_720.jpg",
  "https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg",
  "https://cdn.pixabay.com/photo/2019/12/22/04/18/x-mas-4711785__340.jpg",
  "https://cdn.pixabay.com/photo/2016/11/22/07/09/spruce-1848543__340.jpg"
];

 GFCarousel(
    items: imageList.map(
     (url) {
     return Container(
       margin: EdgeInsets.all(8.0),
       child: ClipRRect(
         borderRadius: BorderRadius.all(Radius.circular(5.0)),
          child: Image.network(
             url,
             fit: BoxFit.cover,
              width: 1000.0
           ),
        ),
      );
      },
     ).toList(),
    onPageChanged: (index) {
      setState(() {
        index;
      });
    },
 ),

Gf Flutter Carousel Slider Custom Properties

The look and feel of the GF carousel slider widget for the Flutter app can be customized using the GFCarousel properties. Sliding items can be any type of list of widgets or a list of images.

NameDescription
itemswidgets to be shown as a slider
heightset slide widget height and overrides any existing [aspectRatio]
aspectRatioaspect ratio is used if no height has been declared. Defaults to 16:9 aspect ratio
viewportFractionThe fraction of the viewport that each page should occupy. Defaults to 0.8, which means each page fills 80% of the slide
autoPlayenables autoplay, sliding one page at a time. Use [autoPlayInterval] to determent the frequency of slides. Defaults to false works only if viewportFraction set to 1.0,
reversereverse the order of items if set to true. Defaults to false
autoPlayIntervalsets Duration to determent the frequency of slides when [autoPlay] is set to true. Defaults to 4 seconds
autoPlayAnimationDurationanimation-duration between two transitioning pages while in auto playback. Defaults to 800 ms
autoPlayCurvedetermines the animation curve physics. Defaults to [Curves.fastOutSlowIn]
enlargeMainPagedetermines if the current page should be larger than the side images, creating a feeling of depth in the carousel. Defaults to false
pauseAutoPlayOnTouchsets a timer on touch detected that pauses the autoplay with the given [Duration]. Touch Detection is only active if [autoPlay] is true
paginationdisplays pagination on state true
passiveIndicatorslider pagination's passive color
activeIndicatorslider pagination's active color
pagerSizepagination dots size can be defined using [double]
initialPageinitial page to show when first creating the [GFCarousel]. Defaults to 0
enableInfiniteScrolldetermines if slides should loop infinitely or be limited to item length. Defaults to true, i.e. infinite loop
scrollDirectionaxis along which the page view scrolls. Defaults to [Axis.horizontal]
onPageChangedcalled whenever the page in the center of the viewport changes

GF Flutter Carousel Slider with Multiple Items

GFCarousel Slider can have any number of images and it can also have multiple images in just one slide. It supports multi-image slides. The ItemsCarousel component of GetWidget for the Flutter app is a multi-section container with multiple items. Each section can be swiped or dragged between. It contains any number of items in each Slide component.

GF ItemsCarousel

In the below code, the list of Images given to the children in the GFItemsCarousel, that allows sliding each slide container that contains multiple items.

The below code gives the default Flutter multi-image slider component

import 'package:getwidget/getwidget.dart';

final List<String> imageList = [
  "https://cdn.pixabay.com/photo/2017/12/03/18/04/christmas-balls-2995437_960_720.jpg",
  "https://cdn.pixabay.com/photo/2017/12/13/00/23/christmas-3015776_960_720.jpg",
  "https://cdn.pixabay.com/photo/2019/12/19/10/55/christmas-market-4705877_960_720.jpg",
  "https://cdn.pixabay.com/photo/2019/12/20/00/03/road-4707345_960_720.jpg",
  "https://cdn.pixabay.com/photo/2019/12/22/04/18/x-mas-4711785__340.jpg",
  "https://cdn.pixabay.com/photo/2016/11/22/07/09/spruce-1848543__340.jpg"
];

 GFItemsCarousel(
   rowCount: 3,
   children: imageList.map(
     (url) {
      return Container(
        margin: EdgeInsets.all(5.0),
        child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(5.0)),
        child:
          Image.network(url, fit: BoxFit.cover, width: 1000.0),
         ),
      );
     },
   ).toList(),
),

GF Flutter Carousel Slider with Multiple Image Custom Properties

NameDescription
rowCountcount of visible cells in each slide
childrenwidgets to be shown in slides
itemHeightdefines the height of an item

Last Updated: September 21, 2023