Year-End Discount: 10% OFF 1-year and 20% OFF 2-year subscriptions!

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

Tired of LeetCode? 😩

Learn the 24 patterns to solve any coding interview question without getting lost in a maze of LeetCode-style practice problems. Practice your skills in a hands-on, setup-free coding environment. 💪

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/
Carousel slider example

RELATED TAGS

flutter

Tired of LeetCode? 😩

Learn the 24 patterns to solve any coding interview question without getting lost in a maze of LeetCode-style practice problems. Practice your skills in a hands-on, setup-free coding environment. 💪

Keep Exploring
Related Courses