Flutter Widget of the Week: CarouselView

Hello everyone! With this article, I would like to announce that I’m starting a “Flutter Widget of the Week” series that I think will be useful when developing Flutter projects. The first week’s widget is the CarouselView widget, which was introduced with the latest version of Flutter. I first tried to do this in my own project by adding animations to Containers. While researching, I saw that there were packages for this and I did it using a package. Now, if you have Flutter version 3.24, you can do this as a classic widget, which I think is a great convenience. Now let’s examine it in detail.

What is CarouselView?

CarouselView is a kind of slider component. That is, you can scroll and switch multiple elements (usually images or cards) horizontally or vertically. This is a very common feature in mobile apps because it allows users to easily switch between content.

How does it work?

The CarouselView widget contains a series of pages. These pages may often have a similar layout to each other, but each one offers different content. Users can switch between these pages by swiping left or right with their fingers.

Example:

Let’s say you have a news app and you want to show the most important news of the day. Each news can be a page and users can easily switch between them. This is where CarouselView comes in!

How to use?

We can think of CarouselView as a typical ListView, but it would be more accurate to describe it as working in a horizontal structure. With a few simple parameters we can start using it right away.

Column(
   children: [
      ConstrainedBox(
         constraints: const BoxConstraints(maxHeight: 300.0),
         child: CarouselView(
            padding: const EdgeInsets.symmetric(horizontal: 16.0),
            scrollDirection: Axis.horizontal,
            itemExtent: 400,
            itemSnapping: true,
            backgroundColor: Colors.white,
            elevation: 4.0,
            shape: RoundedRectangleBorder(
               borderRadius: BorderRadius.circular(150),
            ),
            children: [
               Container(
                  color: Colors.yellow,
                  child: const Center(child: Text('Box 1'))),
               Container(
                  color: Colors.blue,
                  child: const Center(child: Text('Box 2'))),
               Container(
                  color: Colors.red,
                  child: const Center(child: Text('Box 3'))),
            ],
         ),
      ),
   ],
),

When we run the code, we get a screen like below:

Notes:

• By placing the CarouselView in ConstrainedBox, we set a limit for its height.
• With itemExtent we set the size of the widgets in the Carousel on the main axis. In our example, since scrollDirection is horizontal, it means that the main axis is horizontal. The 400 value we give here represents the width of the Containers. If we set this value to 200, the Containers will start to look like a narrow long column.
• itemSnapping is a setting for scrolling to preserve the original layout. By default it defaults to false, which means that widgets that don’t fit on the first screen from the items to be scrolled appear to be absent but become visible when scrolled. If we change this parameter to true, according to this example, a part of the blue Container is visible on the first screen if its size is appropriate.
• I didn’t use it here, but the reverse parameter also allows you to sort the items to be scrolled in reverse order.
• The shrinkExtent parameter, which is not present in this example, expresses the minimum extent allowed on the main axis for widgets during scrolling. For example, let’s say we set itemExtent to 400 and shrinkExtent to 150. The Container, which is 400 wide before the scrolling starts, shrinks to a maximum of 150 units until it disappears from the screen when scrolling starts and scrolls on the screen until it disappears. By default, the value 0 is given, if no value is set, Containers can be scrolled as in the screen recording above without losing any size.

I hope you found this article useful! If you appreciate the information provided, you have the option to support me by Buying Me A Coffee! Your gesture would be greatly appreciated!

In this article, I wanted to tell you about CarouselWidget, which is presented as a novelty. I hope I was able to write clearly and understandably enough.

Good coding to everyone.

Selin.