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.
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 {@overrideWidget build(BuildContext context) {return MaterialApp(title: 'Carousel Slider',theme: ThemeData(primarySwatch: Colors.blue,),home: CarouselSliderExample(),);}}
Add carousel_slider
in the dependencies section of the pubspec.yaml
and run pub get
.
dependencies:carousel_slider: ^4.0.0
Import the carousel_slider
package in main.dart
.
import 'package:carousel_slider/carousel_slider.dart';
CarouselSliderExample
classAdd the class in main.dart
and run the application.
class CarouselSliderExample extends StatelessWidget {@overrideWidget 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,),),]),);}}
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/