Skip to content
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy
flutter app development

Let Me Flutter

Flutter apps development site

  • Home
  • Flutter App Development
    • Flutter Solutions
      • Tech
      • Setup
        • How to make your first app with flutter?
      • How To Get Flutter Android App Using Flutter Build Apk
    • Dart Fundamentals
      • Flutter Loops
        • How To Easily Use For Loop In Flutter Widgets
        • How To Easily Use ForEach Loop In Flutter
        • How To Easily Use While Loop In Flutter
        • How To Easily Use Flutter For In Loop
        • How To Easily Use Flutter For Loop Index
      • Flutter Lists
        • How To Easily Use List In Flutter Dart
        • [Top 4 Ways] How To Properly Combine Lists In Dart
        • How To Reverse List In Flutter – Easy Flutter Code Example
        • How To Convert List To Set In Flutter – Easy Flutter Code Examples
        • How To Shuffle List In Flutter – Easy Flutter Code Examples
      • Flutter If Else Condition
        • How To Use If Else In Flutter – Easy Flutter Guide
      • Flutter Switch Case
        • How To Easily Use Flutter Switch Statement
      • Flutter Functions
        • How To Easily Use Flutter Function
      • Flutter Maps
        • How To Easily Create And Use Flutter Map List
        • How To Easily Create And Use Flutter Map – Easy Flutter Guide
      • Flutter Variables
        • How To Easily Convert Dart Double to Int (4 Easy Ways)
        • How To Easily Convert Dart Int To String
        • How To Easily Convert Double To String Flutter
        • How To Easily Convert Flutter String To Double
        • How To Easily Convert Flutter String To Int – Easy Flutter Guide
        • How To Perform Flutter String Concatenation [Top 4 Ways]
    • Flutter Web Templates
      • Flutter Web Template – Flutter Web Drawer Widget Example
    • Mobile Templates
      • Instagram UI Template
        • Instagram News Feed UI In Flutter-Beautiful Flutter Design-Flutter Instagram Template Part 1
      • Flutter Forms
        • Signup Flutter Form UI Design-Beautiful Flutter UI Template
        • Flutter Glassmorphism Login UI Template With Source Code
        • Signup Flutter Form UI Design 2022-Beautiful Flutter UI Template
        • Beautiful Flutter Login Template – Flutter templates 2022
        • Gradient Flutter Login UI Form Template With Source Code – Flutter Templates 2022
        • Beautiful Flutter Login UI Form Template
        • Beautiful Flutter Login Page UI Design – Example Code
        • How To Design Beautiful Flutter Login Screen UI
        • How To Design Beautiful Flutter Login Form Template – Easy Flutter Code
        • How To Create Beautiful Flutter Login Form Design UI Template
    • Widgets
      • Menus
        • Flutter Popup Menu Button Detailed Customization With Example-2022 Flutter Guide
      • Sliders
        • Flutter Carousel Slider
          • How To Easily Set Flutter Carousel Slider Full Width
          • How To Easily Use Flutter Carousel Slider OnPageChanged
          • How To Easily Customize Flutter Carousel Slider AutoPlay
        • Flutter Carousel Slider Beautiful Customization With Example
        • Flutter Range Slider Beautiful Customization With Example | Syncfusion
      • Stack
        • Flutter App Stack Widget Detailed Explanation With Example
      • Buttons
        • Flutter Icon Button Example – Detailed Customization – Step By Step
        • Flutter Raised Button Example – Detailed Raised Button Decoration
        • Flutter Elevated Button
          • How To Easily Change Flutter Elevated Button Color
          • How To Change Flutter Elevated Button Border Radius
          • How To Easily Customize Flutter Elevated Button Width
          • How To Easily Customize Flutter Elevated Button Height – Top 2 Methods
          • How To Easily Use Flutter Elevated Button OnPressed
        • Flutter Floating Action Button
          • How To Easily Customize Flutter FloatingActionButton Widget
      • Icons
        • How To Use Icons In Flutter? Font Awesome Icons In Flutter
        • How To Easily Change Flutter Icon Size – Flutter Example Code
      • Flutter Card Widget
        • All You Need To Know About Flutter Card Widget – Explained With Example
        • How To Easily Customize Flutter Card Border Radius
        • How To Easily Customize Flutter Card Border Radius
        • How To Change Flutter Card Color – Easy Flutter Guide
        • How To Change Flutter Card Elevation – Easy Flutter Guide
        • How To Change Flutter Card Shadow Color – Easy Flutter Guide
        • How To Easily Customize Flutter Card Height – Top 2 Methods
      • Flutter Drawer Widget
        • Beautiful Flutter Drawer Widget Customization-Explained With Example
        • How To Change Flutter Drawer Icon Color – Easy Flutter Guide
        • How To Change Flutter Drawer Width – Easy Flutter Code Example
        • How To Easily Change Flutter Drawer Background Color
        • How To Change Flutter Drawer Header Height – Easy Flutter Code Example
      • Appbars
        • How To Design Beautiful AppBar in Flutter
        • Let’s Customize AppBar In Flutter
        • Flutter SliverAppBar Customization [Easy Guide]
        • Flutter Appbar Actions Customization [Detailed Guide]
        • How To Change Flutter Appbar Color In Flutter App-2022 Guide
        • How To Customize Flutter Appbar Leading- 2022 Guide
        • How To Make Flutter Appbar Title Center-2022 Guide
        • How To Implement Flutter Appbar Transparent
        • How To Change Flutter Appbar Height
        • How To Remove Flutter Appbar Elevation
        • How To Change Flutter Appbar Shadow Color
        • How To Easily Change Flutter Appbar Background Color
        • How To Easily Customize Flutter Appbar Back Button
        • How To Easily Set Flutter Appbar Center Text
        • How to Easily Change Flutter Appbar Default Height
        • How To Easily Change Flutter Appbar Icon Color Theme
      • Flutter Textfield
        • Change Flutter Textfield Cursor Color Explained With Example-Best Flutter Guide
        • Flutter Textformfield Default Value Explained With Example
        • Flutter Textfield Onchanged Explained With Example-Best Flutter Guide
        • Flutter Textfield Remove Underline Explained With Example
        • How To Change Flutter Textfield Underline Color
        • How To Implement Flutter Textfield Disable?
        • How To Change Flutter Textfield Height?
        • How To Customize Flutter Textfield Label?
        • How To Customize Flutter Textfield Hint Text?
        • How To Change Flutter Textfield Hint Text Color?
        • How To Customize Flutter Textfield Initial Value?
      • Flutter Textformfield
        • How To Change Flutter Textformfield Background Color
        • How To Set Flutter Textformfield Default Value?
        • How To Change Flutter Textformfield Color?
        • How To Customize Flutter Textformfield KeyboardType?
        • How To Change Flutter Textformfield Border Color?
        • How To Implement Flutter Textformfield Remove Underline?
        • How To Change Flutter Textformfield Underline Color?
        • How To Change Flutter Textformfield Hint Text Size?
        • How To Change Flutter Textformfield Font Size?
        • How To Change Flutter Textformfield Hint Text Color?
        • How To Implement Flutter Textformfield Hint Text Center?
        • How To Change Flutter Textformfield Error Text
        • How To Change Flutter Textformfield Error Style
        • How To Change Flutter Textformfield Text Color
        • How To Change Flutter Textformfield Outline Border Color
        • How To Change Flutter Textformfield Outline Border Width
        • How To Change Flutter Textformfield Label Text
      • Flutter Dropdown
        • How To Change Flutter Dropdown Icon
        • How To Implement Flutter Dropdown Remove Underline
        • How To Change Flutter Dropdown Icon Color
        • How To Change Flutter Dropdown Background Color
        • How To Change Flutter Dropdown Border Radius
        • How To Change Flutter Dropdown Icon Size
        • How To Implement Flutter Dropdown OnChange
      • Flutter ListViews
        • How To Implement Flutter ListView Horizontal
        • How To Implement Flutter ListView Builder Horizontal
      • Flutter Popup Menu
        • How To Use Flutter Popup Menu Item Ontap
        • How To Change Flutter Popup Menu Shape
        • How To Change Flutter Popup Menu Width
        • How To Change Popup Menu Icon Flutter
        • How To Change Flutter Popup Menu Item Height
        • How To Change Flutter Popup Menu Icon Size
      • Flutter SingleChildScrollView
        • How To Use Flutter SingleChildScrollView
      • Flutter Raised Button
        • How To Change Flutter RaisedButton Width
        • How To Change Flutter RaisedButton Color
        • How To Change Flutter RaisedButton Shape
        • How To Use Flutter RaisedButton OnPressed
        • How To Implement Flutter RaisedButton Disable
        • How To Change Flutter RaisedButton Disabled Color
        • How To Change Flutter RaisedButton Size
        • How To Easily Use Flutter RaisedButton Icon
        • How To Use Flutter Raisedbutton Icon OnPressed
        • How To Change Flutter Raised Button Elevation
      • Flutter Icon Button
        • How To Change Flutter Icon Button Background Color
        • How To Change Flutter Icon Button Size
        • How To Use Flutter Icon Button OnPressed
      • Flutter Flat Button
        • How To Easily Change Flutter FlatButton Color
      • Flutter Text Widget
        • How To Easily Set Flutter Text Align Center
        • How To Easily Change Flutter Text Font Size
        • How To Easily Change Flutter Text Size
        • How To Make Flutter Text Bold-Example Code
        • How To Change Flutter Text Color-Example Code
        • How To Set Flutter Text Italic-Easy Flutter Code Example
        • How To Change Flutter Text Line Height-Easy Flutter Code Example
        • How To Easily Set Flutter Text Underline
        • How To Easily Add Flutter Text Shadow
        • How To Easily Set Flutter Text Word Spacing
        • How To Easily Set Flutter Text Letter Spacing
        • How To Easily Set Space Between Flutter Text And Underline
        • How To Easily Align Flutter Text Justify
        • How To Easily Change Flutter Text Underline Color
      • Flutter Images
        • Learn How To Use Flutter Image Asset-Easy Flutter Guide
      • Flutter Column Widget
        • How To Easily Set Flutter Column Align Left
        • How To Easily Implement Flutter Column Scrollable
        • How To Easily Customize Flutter Column Spacing
      • Flutter Snackbar
        • How To Easily Use Flutter Snackbar Widget
      • Flutter Wrap Widget
        • How To Easily Use Flutter Wrap Widget – Flutter Example Code
      • Flutter Container Border Customization[Detailed Guide]
      • Flutter SizedBox Widget
        • How To Easily Customize Flutter SizedBox Widget
      • Flutter InkWell Widget
        • How To Easily Use Flutter InkWell OnTap
      • Textfield In Flutter App Detailed Explanation With Example
      • Flutter Textfield Align Center With Example
      • Flutter Image Picker
        • How To Properly Use Flutter Image Picker – Easy Flutter Example
      • Flutter Container Widget
        • How To Easily Change Flutter Container Size
        • How To Easily Set Flutter Container Full Width
        • How To Easily Customize Flutter Box Shadow Offset
        • How To Easily Customize Flutter Container Shadow
        • How To Easily Change Flutter Container Border Radius
        • How To Easily Change Flutter Container Padding
        • How To Easily Change Flutter Container Color
        • How To Easily Add Flutter Container Background Image
        • How To Easily Change Flutter Container Shadow Color
        • How To Easily Change Flutter Container Height
        • How To Easily Customize Flutter Container Margin
        • How To Easily Implement Flutter Container Gradient
        • How To Easily Set Flutter Box Shadow Only Top
        • How To Easily Implement Flutter Container Shape Circle
        • How To Easily Change Flutter Container Alignment
      • Beautiful Bottom Navigation Bar In Flutter App-Android And Flutter IOS-Dart Flutter
      • Let’s Customize Texts In Flutter
      • How To Change Flutter Textfield Color [Easy Examples]
      • Flutter Textfield Border Radius Explained With Example-Best Flutter Guide
      • Flutter Glassmorphism
        • How To Easily Customize Flutter Glassmorphism Container
        • How To Easily Change Flutter Glassmorphism Container Size
      • Flutter Icon Button Example – Detailed Customization – Step By Step
      • Flutter SetState
        • How To Easily Use Flutter SetState
      • Flutter Positioned Widget
        • How To Easily Use Flutter Positioned Widget – Example Code
      • Flutter Padding
        • How To Use Flutter Padding – Easy Flutter Guide
      • Flutter Bottom Navigation Bar Customization
      • Neumorphic Effect In Flutter App Container Widget
      • How To Change Flutter Textfield Border Color
      • Container Customization In Flutter App
      • Flutter Textfield Only Numbers Explained With Example-Best Flutter Guide
      • Flutter Gesture Detector Widget
        • How To Easily Use Flutter GestureDetector OnTap
      • Flutter Textfield Maxlength Detailed Explanation With Example-Best Flutter Guide
      • How To Use Columns In Flutter Apps
      • Flutter Textfield Decoration Detailed Explanation With Example-Flutter Guide 2022
      • Beautiful Grid View Builder In Flutter App-Detailed Customization
      • ListView Builder In Flutter Apps
      • Flutter Table Widget
        • How To Easily Customize Flutter Table Widget
      • How To Use Rows In Flutter Apps
      • How To Change Flutter Textfield Font Size
    • React Native
      • React Native Jobs In 2023: All You Need To Know
      • Why Should I Learn React Native Framework In 2023
      • Right React Native Elements for Your Next App [Detailed Guide]
      • Benefits Of Creating A React Native App [Easy Guide]
    • Updates
      • What’s New in Flutter 2.10 release?
    • Animations
      • Animated Container
        • How To Use Animated Container In Flutter? Explained With Example
      • Animated Texts
        • Animated Text Kit In Flutter App-Dart Flutter Makes Animation Easy
      • Lottie Animations
        • How To Use Beautiful Lottie Animations In Flutter App
      • Hero Animations
        • Hero Animations In Flutter App With Example-Beautiful Flutter Animations In Dart Language
  • Python Programming
    • Python Tuples
      • How To Easily Create Python Tuple – Easy Python Guide
    • Python Dictionaries
      • How To Properly Define And Use Python Dictionary – Easy Python Code Example
      • How To Properly Use Python Dict To Create Dictionary – Easy Python Guide
      • How To Use Python Dictionary Get Method – Easy Python Code Example
      • How To Use Python Dictionary Pop Method – Easy Python Guide
      • How To Use Python Dictionary SetDefault Method – Easy Python Guide
      • How To Use Python Dictionary Clear Method – Easy Python Code Example
    • Python Del Keyword
      • How To Properly Use Python Del Keyword – Easy Python Code
    • Python If Else Statement
      • How To Easily Use Python If Else Statement
      • How To Use Python Elif Statement – Easy Python Guide
      • How To Easily Use Nested If In Python
    • Python Loops
      • Python For Loop
        • How To Easily Use Python For Loop – Python Code Examples
      • Python While Loop
        • How To Use Python While Loop – Easy Code Examples
    • Python Break and Continue
      • Python Break Statement
        • How To Easily Use Python Break Statement – Python Code Examples
      • Python Continue Statement
        • How To Easily Use Python Continue Statement
    • Python Pass Statement
      • How To Easily Use Python Pass Statement
    • Python Functions
      • How To Properly Use Python Function – Super Easy Python Guide
      • How To Properly Use Python Function Arguments – Easy Python Guide
      • How To Properly Use Python Lambda Function – Easy Python Guide
    • Python Variables
      • How To Define And Use Python Global Variable – Easy Python Guide
      • How To Properly Use Python Local Variable – Easy Python Guide
      • How To Properly Use Python NonLocal Variables – Easy Python Guide
    • Python Classes and Objects
      • How To Properly Define And Use Python Class – Easy Example Code
    • Python Lists
      • How To Easily Use Python List Pop Method
      • How To Properly Use Python List Remove Method – Easy Python Guide
      • How To Properly Use Python List Extend – Easy Python Guide
      • How To Properly Use Python List Insert – Easy Python Guide
      • How To Easily Use Python List Index Method – Python Example Code
      • How To Easily Use Python List Count Method – Python Example Code
      • How To Easily Use Python List Reverse Method
      • How To Easily Use Python List Sort Method
      • How To Properly Use Python List Copy Method – Easy Python Guide
      • How To Easily Use Python List Clear Method
      • How To Easily Create Python List – Easy Python Example Code
      • How To Properly Use Python List Append – Easy Python Code
      • How To Easily Convert Python List To String
      • How To Easily Get Python List Size – Top 2 Methods
  • Code Compiler
    • Free Online Code Compiler
  • Free SEO Tools
    • On Page SEO Checker
    • Bulk URL Checker
    • Keyword List Multiplier
    • Link Spinner
    • File Merger
    • Analytics Spam Filter Tool
    • Google Cache Finder
    • Structured Data Tool For Local Businesses
    • RSS Feed Commander
  • More
    • About Us
    • Disclaimer
    • Contact Us
    • Privacy Policy
  • Toggle search form
flutter beautiful carousel slider example source code

Flutter Carousel Slider Beautiful Customization With Example

Posted on March 11, 2022October 27, 2022 By ZeeshanAli 2 Comments on Flutter Carousel Slider Beautiful Customization With Example

Let’s talk about flutter carousel slider customization but first if you are new and want a complete setup and want to build your first app instantly, then click here, now let’s jump into flutter carousel sliders, what they really are, their role, and usage in flutter apps and finally the mentioned flutter carousel slider example.

Introduction

Carousel slider, as the name suggests, it slides its items. It gives a very beautiful look to your app and a good user experience. Flutter carousel slider has many properties for making the slider very attractive and eye catching. Most of the popular websites and apps have carousel sliders in them. Let’s see how to implement the mentioned beautiful carousel slide in our flutter app.

Import Carousel Slider Package

carousel_slider: ^4.0.0
Write this line in the dependencies section of your pubspec.yaml and run pub get to import the package in your app.
To get the latest version, you can visit here.
flutter carousel slider pubs pec import

Implementation

Let’s now implement our carousel slider in our app:

Carouse Slider Builder
CarouselSlider.builder(
          itemCount: 10,
          options: CarouselOptions(aspectRatio: 1.2)
          itemBuilder: (context, index, realIndex)
              {
                return Container(
                  margin: EdgeInsets.symmetric(horizontal: 10),
                  color: Colors.blue.shade500,
                                );
              }
                      )

 

We have used the carousel slider class builder, inside it we have:

  • An item count constructor, which defines the number of items in our carousel slider.
  • Options constructor, in which we can specify how the carousel slider will work, like the auto slider, how much space will each item cover of screen etc.
  • Item builder constructor will return the widget specified e.g. a container having some text, it will return that specific widget and how many will return are specified using the item count constructor. For just a simple example, we have returned a container widget, having a blue color and some horizontal margin as well, so each container will be separated. Let’s see how it looks now:

simple carousel slider flutter

Carousel Options
options:CarouselOptions()
Using the options constructor, lets customize our carousel slider. For that, we use a carousel option class,
Aspect Ratio
options: CarouselOptions(aspectRatio: 1.2)
simple carousel slider flutter aspect ratio
Aspect ratio constructor is used if no height is specified, the more value it has, the less the height of the carouse will be. As you can see in the above image. We have specified aspect ratio for this.
Height
height:300
simple carousel slider flutter aspect ratio
We have used the height constructor, when we specify height then then aspect ratio won’t be used.
Auto Play
autoPlay: true
Specifying the auto play constructor to true will automatically set the slider to true, which means the slider will automatically slide its items after some time i.e. 1 or 2 seconds. By default, auto play is false.
Auto Play Animation Duration
autoPlayAnimationDuration: Duration(seconds: 4)
Using the auto play animation duration constructor, we can specify the duration of the animation when an item slides in the slider when the auto play constructor is set to true. We have set it to 4 just for demonstration that giving it greater value means slower the slider animation will be.
Auto Play Curve
 autoPlayCurve: Curves.bounceIn
Using the auto play curve constructor, we can specify the animation curve when an item slides in our carousel slider. For demonstration purpose, we have set it to bounce in, the item will have a bouncing animation whenever it slides in the slider. You can use other curves as well. It has a variety of curves, like ease in, decelerate etc.
Enlarge Center Page
enlargeCenterPage: true
simple carousel slider flutter center image enlarge
Specifying the enlarge center page constructor to true means that the item in the carousel slider which whenever the slider slides and the item that we see in our screen in the center will be enlarged. See the above image example.
Enlarge Strategy
enlargeStrategy: CenterPageEnlargeStrategy.height
Enlarge strategy constructor is used to specify which strategy to use to enlarge the center page, we have specified the height, so whenever the center page enlarges, then do it by enlarging the height.
Initial Page
initialPage: 2
Initial page constructor defines which item to show when the user navigates to the carouse slider page. We have specified it to 2 so it will start from third item of the carousel slider because the index starts from 0, so 0,1,2 we get the third item.
Enable Infinite Scroll
enableInfiniteScroll: false
simple carousel slider flutter infinite scroll false
Using the enable infinite scroll constructor, we can specify our slider to scroll for forever, by default, its true but making it false means it will slide till the last item and wont slide forward after that. Same is for the first item, it wont slide in backward direction if it is already in the first item. Although, it can slide forward and backward between other items other than the first and the last one. In the above image, we are in the last item and its not scrolling forward because the enable infinite scroll is set to false.
Page Snapping
pageSnapping: false
Using the page snapping constructor, we can specify that if we slide the item, then should it slide entirely to the other item or to only some extent. It is very good for custom sliding behavior. By default, its set to true but if we set it to false then we can control like every pixel of the page snapping.
Reverse
 reverse: true
Using the reverse constructor and setting it to true will auto slide the items in the backward direction, from right to left.
View Port Fraction
 viewportFraction: 1
simple carousel slider view port fraction 1
Using the view port fraction constructor, we can specify specify the width of each item. Making it 1 will specify to show only one item at a time in the slider, decrease its value from 1 will make the width less that the screen width which allows other items to be shown at the same time. See the image above in which we have specified the view port fraction to 1. You can see the width it little less than the screen width and that’s because we have given our container some margin. Let’s give our view port fraction 0.7 value and see how it looks now:
image here
Scroll Direction
scrollDirection: Axis.vertical
simple carousel slider scroll direction axis vertical
Using the scroll direction constructor, we can specify the direction of our carousel slide, by default, it is horizontal but if we make it vertical, then you can see it moves in vertical direction as you can see in the image above. Make its height larger if you want.
Scroll Physics
scrollPhysics: NeverScrollableScrollPhysics()
Using the scroll physics constructor, we can specify how the animation will animate if the user stops dragging the items. If you don’t want to slide the items or want to just freeze them in their positions then use the never scrollable scroll physics class.
Auto Play Interval
autoPlayInterval: Duration(seconds: 2)
Using the auto play interval constructor, if we specify the duration to 2 seconds then it will animate or slide the next item in 2 seconds, by default, it is 4 seconds.
On Page Changed
 onPageChanged: (index, reason) {

                    print(index.toString());

                    print(reason.toString());

                  }
Using the on page changed constructor, we can specify some functionality when the page slides, using the index argument, we can specify in which item we are currently sliding from or to. Reason argument specifies whether the slide occurs manually or automatic. When the slide occurs from the user, means when the user drags the item then it shows manual and when it occurs from the auto play then it shows timed.

Source Code

 

flutter beautiful carousel slider

Let’s see the complete source code for the mentioned flutter beautiful carousel slider design implementation.

import 'package:carousel_slider/carousel_slider.dart';

import 'package:flutter/material.dart';

void main() {

  runApp(const MyApp());

}

class MyApp extends StatelessWidget {

  const MyApp({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Flutter  beautiful carousel slider',

      debugShowCheckedModeBanner: false,

      home: HomePage(),

    );

  }

}

class HomePage extends StatelessWidget {

  const HomePage({Key? key}) : super(key: key);

  @override

  Widget build(BuildContext context) {

    return SafeArea(

      child: Scaffold(

        body: Center(

          child: Column(

            mainAxisAlignment: MainAxisAlignment.center,

            children: [

              Text(

                'Carousel Slider',

                style: TextStyle(

                    fontSize: 30,

                    color: Colors.blue.shade600,

                    fontWeight: FontWeight.w900,

                    shadows: [

                      Shadow(

                          color: Colors.black38,

                          blurRadius: 5,

                          offset: Offset(2, 2))

                    ]),

              ),

              SizedBox(

                height: 30,

              ),

              CarouselSlider.builder(

                  itemCount: 10,

                  itemBuilder: (context, index, realIndex) {

                    return Container(

                      margin: EdgeInsets.all(15),

                      decoration: BoxDecoration(

                          borderRadius: BorderRadius.circular(20),

                          boxShadow: [

                            BoxShadow(

                                color: Colors.black54,

                                offset: Offset(2, 2),

                                blurRadius: 7,

                                spreadRadius: 2)

                          ],

                          image: DecorationImage(

                              fit: BoxFit.cover,

                              image: AssetImage(index.isEven

                                  ? 'assets/development.jpg'

                                  : 'assets/cartoon.jpg'))),

                      child: Container(

                        margin: EdgeInsets.all(15),

                        decoration: BoxDecoration(

                            borderRadius: BorderRadius.circular(20),

                            boxShadow: [

                              BoxShadow(

                                  color: Colors.black54,

                                  offset: Offset(2, 2),

                                  blurRadius: 7,

                                  spreadRadius: 2)

                            ],

                            image: DecorationImage(

                                fit: BoxFit.cover,

                                image: AssetImage(index.isEven

                                    ? 'assets/development.jpg'

                                    : 'assets/cartoon.jpg'))),

                        child: Container(

                          margin: EdgeInsets.all(15),

                          decoration: BoxDecoration(

                              borderRadius: BorderRadius.circular(20),

                              boxShadow: [

                                BoxShadow(

                                    color: Colors.black54,

                                    offset: Offset(2, 2),

                                    blurRadius: 7,

                                    spreadRadius: 2)

                              ],

                              image: DecorationImage(

                                  fit: BoxFit.cover,

                                  image: AssetImage(index.isEven

                                      ? 'assets/development.jpg'

                                      : 'assets/cartoon.jpg'))),

                          child: Container(

                            margin: EdgeInsets.all(15),

                            decoration: BoxDecoration(

                                borderRadius: BorderRadius.circular(20),

                                boxShadow: [

                                  BoxShadow(

                                      color: Colors.black54,

                                      offset: Offset(2, 2),

                                      blurRadius: 7,

                                      spreadRadius: 2)

                                ],

                                image: DecorationImage(

                                    fit: BoxFit.cover,

                                    image: AssetImage(index.isEven

                                        ? 'assets/development.jpg'

                                        : 'assets/cartoon.jpg'))),

                            child: Container(

                              margin: EdgeInsets.all(15),

                              decoration: BoxDecoration(

                                  borderRadius: BorderRadius.circular(20),

                                  boxShadow: [

                                    BoxShadow(

                                        color: Colors.black54,

                                        offset: Offset(2, 2),

                                        blurRadius: 7,

                                        spreadRadius: 2)

                                  ],

                                  image: DecorationImage(

                                      fit: BoxFit.cover,

                                      image: AssetImage(index.isEven

                                          ? 'assets/development.jpg'

                                          : 'assets/cartoon.jpg'))),

                            ),

                          ),

                        ),

                      ),

                    );

                  },

                  options: CarouselOptions(

                      onPageChanged: (index, reason) {

                        print(index.toString());

                        print(reason.toString());

                      },

                      height: 300,

                      autoPlay: true,

                      autoPlayAnimationDuration: Duration(seconds: 2),

                      autoPlayCurve: Curves.easeInOutBack,

                      enlargeCenterPage: true,

                      enlargeStrategy: CenterPageEnlargeStrategy.height,

                      initialPage: 2,

                      pageSnapping: false,

                      viewportFraction: .7,

                      autoPlayInterval: Duration(seconds: 4))),

              SizedBox(

                height: 10,

              ),

              Text(

                'Hope you enjoyed it,Keep learning and happy coding',

                style: TextStyle(

                    fontSize: 15,

                    color: Colors.blue.shade600,

                    fontWeight: FontWeight.w900,

                    shadows: [

                      Shadow(

                          color: Colors.black26,

                          blurRadius: 5,

                          offset: Offset(2, 2))

                    ]),

              ),

            ],

          ),

        ),

      ),

    );

  }

}

Note:

That’s all for this article, hope you enjoyed it and have learnt a lot from it. Implement it in your code and share your experience with us. We would love to see how you have used it in your flutter app. We would be looking forward for your response. Hope to see you in our next articles in which we will dig deep into other amazing widgets. Thanks.

Share this post:

Share on Twitter Share on Facebook Share on Pinterest Share on LinkedIn Share on WhatsApp
Sliders Tags:carousel, carousel image slider flutter, carousel slider, carousel slider flutter, carousel slider flutter example, carousel slider flutter full width, carousel slider flutter height, dart flutter, easy carousel slider flutter, flutter, flutter app development, flutter app tutorial, flutter carousel, flutter carousel animation, flutter carousel slider, flutter carousel slider aspect ratio, flutter carousel slider autoplay, flutter carousel slider code, flutter carousel slider customization, flutter carousel slider example, flutter carousel slider fraction, flutter carousel slider full width, flutter carousel widget, flutter carousel_slider, flutter dart, flutter ecommece, flutter for beginners, flutter google, flutter home slider, flutter how to user carousel, flutter image slider, flutter learn, flutter slider, flutter slideshow, flutter tutorial, flutter ui, flutter ui design, flutter widget, flutter widget example

Post navigation

Previous Post: Flutter Glassmorphism Login UI Template With Source Code
Next Post: Flutter Range Slider Beautiful Customization With Example | Syncfusion

Related Posts

flutter range slider syncfusion Flutter Range Slider Beautiful Customization With Example | Syncfusion Sliders

Comments (2) on “Flutter Carousel Slider Beautiful Customization With Example”

  1. knell says:
    August 3, 2022 at 11:53 am

    Hmm іt appears like your weƄsite ate my fіrst comment (it
    was supeг long) so I ցuess I’ll just sum it up what I had ԝritten and say, Ι’m thoroughly enjoying your blog.
    I too am an aspiring Ƅlog writer but I’m still new t᧐ the whole thing.
    Do you have any tips and hints for rookie
    blog writers? I’d genuinely apprеciatе it.

    Reply
    1. ZeeshanAli says:
      August 3, 2022 at 9:11 pm

      Just try to write more quality content and share your knowledge as much as you can. Consistency is the key. Thanks.

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Latest Posts

  • Flutter Firebase Email Authentication [Login, Signup, Logout]
  • Flutter Firebase CRUD App [Create, Read, Update, Delete]
  • [Solved] Flutter Pinch Zoom Image In ListView Builder
  • Flutter Contacts List [Display Data And Make A Call]
  • Flutter Reorderable Grid View Easy Explanation [Detailed Example]
  • Python Nested Dictionary [Explained With 6 Easy Examples]
  • Python Dictionary Keys Method [Easy Python Code Programs]
  • How To Use Python Dictionary FromKeys Method [Easy Examples]
  • Python Dictionary Clear Method [Explained With Examples]
  • How To Use Python Set Update Method [Python Code Examples]
  • How To Use Python Set Union Method [Easy Python Programs]
  • Python Set Symmetric Difference Update Method [Easy Examples]
  • How To Use Python Set Symmetric Difference Method
  • How To Use Python Set Pop Method [Easy Code Guide]
  • How To Use Python Set Issubset Method [Easy Python Examples]
  • How To Use Python Set IsDisjoint Method [Detailed Examples]
  • How To Use Python Set Intersection Update Method
  • How To Use Python Set Intersection [Easy Python Tutorial]
  • How To Properly Use Python Set Discard Method
  • Python Set Difference Update Method [Easy Examples]
  • Python Set Difference Method Implementation [Easy Guide]

Menu

  • Let Me Flutter – Home
  • Flutter App Development
  • Python Programming
  • About Us
  • Contact Us
  • Disclaimer
  • Privacy Policy

Categories

LATEST POSTS

  • Flutter Firebase Email Authentication [Login, Signup, Logout]
  • Flutter Firebase CRUD App [Create, Read, Update, Delete]
  • [Solved] Flutter Pinch Zoom Image In ListView Builder
  • Flutter Contacts List [Display Data And Make A Call]
  • Flutter Reorderable Grid View Easy Explanation [Detailed Example]

Copyright © 2023 Let Me Flutter.

Powered by PressBook Media WordPress theme