Introduction

The fan_carousel_image_slider package provides a way to create a carousel image slider with a fan effect in Flutter, allowing you to display images in a visually appealing manner.

Content

1.Add the `fan_carousel_image_slider` dependency:

Open your pubspec.yaml file and add the fan_carousel_image_slider dependency.

Copy Code


dependencies:
  fan_carousel_image_slider: ^latest_version

Read more"Explore Flutter Widgets to Create Cross-Platform Apps"

Run flutter pub get to install the package.

2.Import the package:

Import the fan_carousel_image_slider package in your Dart file.

Copy Code


import 'package:fan_carousel_image_slider/fan_carousel_image_slider.dart';

3.Create a FanCarouselImageSlider Widget:

Use the FanCarouselImageSlider widget to display the carousel image slider.

Copy Code


FanCarouselImageSlider(
  images: [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ],
  index: 0,
  height: 200,
  onTap: (index) {
    // Handle image tap
    print('Tapped on image $index');
  },
),

images: A list of image URLs to display in the carousel.
index: The initial index of the image to display.
height: The height of the carousel image slider.
onTap: Callback function that is called when an image is tapped.

4.Run the app:

Run your Flutter app to see the FanCarouselImageSlider in action.

Sample Code

Copy Code


import 'package:flutter/material.dart';
import 'package:fan_carousel_image_slider/fan_carousel_image_slider.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FanCarouselImageSlider',
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: const HomePage(),
    );
  }
}

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

  static const List<String> sampleImages = [
    "https://img.freepik.com/free-photo/modern-sports-car-speeds-through-dark-curve-generative-ai_188544-9136.jpg?size=626&ext=jpg&ga=GA1.1.553209589.1715040000&semt=sph",
    "https://img.freepik.com/free-photo/modern-sports-car-speeds-through-dark-curve-generative-ai_188544-9136.jpg?size=626&ext=jpg&ga=GA1.1.553209589.1715040000&semt=sph",
    "https://img.freepik.com/free-photo/modern-sports-car-speeds-through-dark-curve-generative-ai_188544-9136.jpg?size=626&ext=jpg&ga=GA1.1.553209589.1715040000&semt=sph",
    "https://img.freepik.com/free-photo/modern-sports-car-speeds-through-dark-curve-generative-ai_188544-9136.jpg?size=626&ext=jpg&ga=GA1.1.553209589.1715040000&semt=sph",
    "https://img.freepik.com/free-photo/modern-sports-car-speeds-through-dark-curve-generative-ai_188544-9136.jpg?size=626&ext=jpg&ga=GA1.1.553209589.1715040000&semt=sph",
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: [
            const SizedBox(
              height: 60,
            ),
            FanCarouselImageSlider(
              imagesLink: sampleImages,
              isAssets: false,
              // expandImageHeight: 11.0,
              autoPlay: true,
            ),
          ],
        ),
      ),
    );
  }
}

Output

212736044 0075701e da20 4f37 9f50 27ff4f29639f

Conclusion

By following these steps, you can easily implement a FanCarouselImageSlider in Flutter using the fan_carousel_image_slider package. This allows you to create a visually appealing carousel image slider in your app.

Post Views: 94