Flutter 3.24: CarouselView Widget — new addition

In Flutter 3.24, the new CarouselView widget was introduced, providing an easy way to display items in a scrollable carousel format. This widget allows for the creation of dynamic, smooth, and customizable carousels, typically used for image sliders, featured content, or any horizontally scrollable list. Let’s dive in and explore how to use this new widget effectively!

Setting Up Carousel View in Flutter 3.24

To demonstrate the new Carousel View widget, we’ll start by setting up a basic Flutter project using version 3.24. If you’re following along, you can create a new project and ensure it’s running the latest release.

In our example, we’ll place the CarouselView widget inside a Column, allowing us to stack multiple widgets vertically. But wait at this point you will encounter an exception in the UI. Widgets like Carousel View, ListView, and GridView require explicit height information, which is missing. To fix this, we need to wrap the Carousel View in a SizedBox and provide a height value. Here, we’ll use a height of 200 pixels, though you can adjust this based on your design requirements.

Now, let’s add the CarouselView itself, which comes with two required properties: itemExtent and children.

• itemExtent: Defines the width (or extent) of each item within the carousel. This is crucial for determining how wide each item will appear on the screen. If you want to show partial views of the next/previous items, you can adjust this value.
• children: The list of widgets to be displayed as individual carousel items. Each child represents one item in the carousel, and you can dynamically generate or provide them directly.

Some other properties for CarouselView:

• controller: This property allows you to control the behavior of the carousel programmatically. You can use it to set the initial page, jump between pages, or listen for page changes. It’s particularly useful if you want more control over how the carousel behaves.
• itemSnapping: When set to true, the items will "snap" into place when the user scrolls, ensuring that the carousel always stops at a complete item rather than between items. This is useful for a polished user experience, especially when displaying discrete items like images.
• shape: This property allows you to customize the shape of the carousel items. For example, you can apply rounded corners, circular shapes, or any other custom shape.
• elevation : Adds a shadow or depth effect to each item in the carousel. This is useful for giving items a floating appearance, making the carousel look more dynamic and visually appealing.

At this stage, let’s create basic containers as placeholders for the items. With minimal code, we’ve already got a functional carousel within a MaterialApp.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text('CarouselView from Flutter 3.24'),
        ),
        body: SizedBox(
          height: 200,
          child: CarouselView(
              itemExtent: 150,
              itemSnapping: true,
              elevation: 2,
              scrollDirection: Axis.horizontal,
              reverse: false,
              onTap: (int value) {
                print('item tapped $value');
              },
              children: List.generate(20, (int index) {
                return Container(
                  color: Colors.red,
                  child: Center(child: Text(index.toString())),
                );
              })),
        ));
  }
}

The new CarouselView widget introduced in Flutter 3.24 is highly customizable, making it a powerful tool for creating dynamic, horizontally scrollable content such as image carousels, featured product sliders, or promotional content. With properties like itemExtent, children, controller, itemSnapping, and elevation, it provides developers with the flexibility to create polished, user-friendly interfaces while simplifying the development process by eliminating the need for third-party libraries.

Github link for code : https://github.com/yogitakumar/CarouselView.git

Connect with Me,

LinkedIn: https://www.linkedin.com/in/yogitakumar05/

X: https://x.com/YogitaKumar05

Thanks for reading, and stay tuned for more updates!