Trusted answers to developer questions
Trusted Answers to Developer Questions

RELATED TAGS

flutter

How to create a carousel slider in a Flutter application

Shubham Singh Kshatriya

Overview

Many applications use a carousel slider to display some featured images on their interface. A carousel slider is basically an infinite loop in which all of its items are displayed.

Let's create a carousel slider in a Flutter application by using the carousel_slider package.

Step 1: Create a new Flutter project

flutter create carouselslider

Update the main.dart file with the code below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Carousel Slider',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CarouselSliderExample(),
    );
  }
}

Step 2: Install the package

Add carousel_slider in the dependencies section of the pubspec.yaml and run pub get.

dependencies:
    carousel_slider: ^4.0.0

Step 3: Import the package

Import the carousel_slider package in main.dart.

import 'package:carousel_slider/carousel_slider.dart';

Step 4: Create the CarouselSliderExample class

Add the class in main.dart and run the application.

class CarouselSliderExample extends StatelessWidget {
@override
Widget build(BuildContext context) {
	return Scaffold(
	body: ListView(
    children: [
      CarouselSlider(
        items: [
          Container(
            margin: EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                image: NetworkImage("url"),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                image: NetworkImage("url"),
                fit: BoxFit.cover,
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.all(8.0),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(10.0),
              image: DecorationImage(
                image: NetworkImage("url"),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ], 
        options: CarouselOptions(
            height: 380.0,
            enlargeCenterPage: true,
            autoPlay: true,
            aspectRatio: 16 / 9,
            autoPlayCurve: Curves.fastOutSlowIn,
            enableInfiniteScroll: true,
            autoPlayAnimationDuration: Duration(milliseconds: 800),
            viewportFraction: 0.8,
          ),
        ),
    ]),
    );
  }
}

Output

Let's verify that by running the code widget below.

# This file is deprecated. Tools should instead consume 
# `.dart_tool/package_config.json`.
# 
# For more info see: https://dart.dev/go/dot-packages-deprecation
# 
# Generated by pub on 2022-05-24 17:54:19.014413.
async:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/async-2.8.2/lib/
boolean_selector:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/boolean_selector-2.1.0/lib/
characters:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/characters-1.2.0/lib/
charcode:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/charcode-1.3.1/lib/
clock:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/clock-1.1.0/lib/
collection:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/collection-1.16.0/lib/
cupertino_icons:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/cupertino_icons-1.0.4/lib/
fake_async:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/fake_async-1.3.0/lib/
flutter:file:///opt/flutter/packages/flutter/lib/
flutter_lints:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/flutter_lints-2.0.1/lib/
flutter_test:file:///opt/flutter/packages/flutter_test/lib/
lints:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/lints-2.0.0/lib/
matcher:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/matcher-0.12.11/lib/
material_color_utilities:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/material_color_utilities-0.1.4/lib/
meta:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/meta-1.7.0/lib/
path:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/path-1.8.1/lib/
sky_engine:file:///opt/flutter/bin/cache/pkg/sky_engine/lib/
source_span:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/source_span-1.8.2/lib/
stack_trace:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/stack_trace-1.10.0/lib/
stream_channel:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/stream_channel-2.1.0/lib/
string_scanner:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/string_scanner-1.1.0/lib/
term_glyph:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/term_glyph-1.2.0/lib/
test_api:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/test_api-0.4.9/lib/
vector_math:file:///opt/flutter/.pub-cache/hosted/pub.dartlang.org/vector_math-2.1.2/lib/
carousel_slider_example:lib/

RELATED TAGS

flutter

CONTRIBUTOR

Shubham Singh Kshatriya
RELATED COURSES

View all Courses

Keep Exploring

Learn in-demand tech skills in half the time

Copyright ©2022 Educative, Inc. All rights reserved.

soc2