Carousel Image Slider In Flutter Example

Flutter / By /

In this tutorial we will learn how to create an image slider in flutter by loading an image from the URL. To show the images in the slider we will use the carousel slider API from flutter dev website.

What is a Carousel Image Slider In Flutter?

Sometimes we want to show images in moving form, it can be from left to right or up to down. You can see these types of dynamic image sliders in amazon, flipkart or many other shopping or entertainment websites or apps.

image slider in flutter
image slider in flutter

Add The Following Dependency

Add the following dependency in your pubspec.yaml file and click on pub get. 

dev_dependencies:
  flutter_test:
    sdk: flutter
  carousel_slider: ^4.0.0

Create A List Of Images

I am directly using the URL of images. You can get your images from a server like API. There is no big difference between them. We only needed the URL. Following is the list of URLs of images you can use by copy and paste in your code.

final List<String> imageList = ["https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80",
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'];

Import The Flutter Carousel Image Slider Library In Flutter Class

Import the carousel library in your class where you are using the Carousel Image slider.

import 'package:carousel_slider/carousel_slider.dart';

Widget For Image Slider

Use Following widget in your flutter project class to create a dynamic image slider. You can manage it by wrapping Column, Row, Container or other widget for any type style. Please note that I wrapped it inside Container for better look and margin.

Container(
  margin: EdgeInsets.all(15),
  child: CarouselSlider.builder(
    itemCount: imageList.length,
    options: CarouselOptions(
      enlargeCenterPage: true,
      height: 300,
      autoPlay: true,
      autoPlayInterval: Duration(seconds: 3),
      reverse: false,
      aspectRatio: 5.0,
    ),
    itemBuilder: (context, i, id){
      //for onTap to redirect to another screen
      return GestureDetector(
        child: Container(
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(15),
            border: Border.all(color: Colors.white,)
        ),
          //ClipRRect for image border radius
          child: ClipRRect(
            borderRadius: BorderRadius.circular(15),
            child: Image.network(
              imageList[i],
            width: 500,
            fit: BoxFit.cover,
            ),
          ),
        ),
        onTap: (){
          var url = imageList[i];
          print(url.toString());
        },
      );
    },
  ),
),

I used the GestureDetector() widget for moving into another screen by clicking on a particular image.

You can learn more about this image slider from pub.dev website. There are many other sliders available for your desire. You can go by clicking here.

Please do comment if you like this tutorial even if you find any issue in this code.

Please also learn more flutter and android tutorials which will improve your development skills.

Buy us a Coffee to provide best content for you.

Don’t miss new tips!

We don’t spam! Read our [link]privacy policy[/link] for more info.

Related Posts

205 thoughts on “Carousel Image Slider In Flutter Example”

  2. Pingback: https://canadianpharmaceuticalsonline.home.blog/

  3. Pingback: reallygoodemails.comonlineviagra

  4. Pingback: viagraonline.estranky.skclankyviagra-without-prescription.html

  5. Pingback: viagraonlineee.wordpress.com

  6. Pingback: where to buy viagra online

  7. Pingback: https://viagraonlinee.livejournal.com/492.html

  9. Pingback: buy viagra online no prescription

  10. Pingback: buy viagra online

  11. Pingback: https://www.kadenze.com/users/canadian-pharmaceuticals-for-usa-sales

  12. Pingback: linktr.eecanadianpharmaceuticalsonline

  13. Pingback: disqus.comhomeforumcanadian-pharmaceuticals-online

  14. Pingback: 500px.compcanadianpharmaceuticalsonline

  15. Pingback: https://dailygram.com/index.php/blog/1155353/we-know-quite-a-bit-about-covid-19/

  16. Pingback: northwest pharmacy canada

  17. Pingback: 500px.complistofcanadianpharmaceuticalsonline

  18. Pingback: canadian pharmacy uk delivery

  19. Pingback: canadian drugs

  20. Pingback: pharmacy canada

  21. Pingback: global pharmacy canada

  22. Pingback: canadian pharmacy uk delivery

  23. Pingback: top rated online canadian pharmacies

  24. Pingback: pinshape.com/users/2441621-canadian-pharmaceutical-companies

  25. Pingback: buy viagra now

  26. Pingback: northwest pharmacies

  27. Pingback: https://pinshape.com/users/2445987-order-stromectol-over-the-counter

  28. Pingback: https://reallygoodemails.com/orderstromectoloverthecounter

  29. Pingback: https://challonge.com/en/orderstromectoloverthecounter

  30. Pingback: https://500px.com/p/orderstromectoloverthecounter

  31. Pingback: https://www.seje.gov.mz/question/order-stromectol-over-the-counter-6/

  32. Pingback: canadajobscenter.comauthorbuystromectol

  33. Pingback: online canadian pharmacy

  34. Pingback: https://aoc.stamford.edu/profile/canadianpharmaceuticalsonline/

  35. Pingback: northwest pharmacy canada

  36. Pingback: ktqt.ftu.edu.vnenquestion listcanadian-pharmaceuticals-for-usa-sales

  37. Pingback: discount canadian pharmacies

  38. Pingback: stromectol scabies treatment

  39. Pingback: ktqt.ftu.edu.vnenquestion listorder-stromectol-over-the-counter-10

  40. Pingback: orderstromectoloverthecounter.bandcamp.comreleases

  41. Pingback: www.provenexpert.comorder-stromectol-over-the-counter12

  42. Pingback: https://www.repairanswers.net/question/order-stromectol-over-the-counter-2/

  43. Pingback: https://www.repairanswers.net/question/stromectol-order-online/

  44. Pingback: canadajobscenter.comauthorarpreparof1989

  45. Pingback: aoc.stamford.eduprofilegoatunmantmen

  46. Pingback: web904.comstromectol-buy

  47. Pingback: https://web904.com/buy-ivermectin-online-fitndance/

  48. Pingback: https://glycvimepedd.bandcamp.com/releases

  49. Pingback: https://canadajobscenter.com/author/ereswasint/

  50. Pingback: https://aoc.stamford.edu/profile/hispennbackwin/

  51. Pingback: bursuppsligme.bandcamp.comreleases

  52. Pingback: https://pinshape.com/users/2461310-canadian-pharmacies-shipping-to-usa

  53. Pingback: https://pinshape.com/users/2462760-order-stromectol-over-the-counter

  54. Pingback: https://pinshape.com/users/2462910-order-stromectol-online

  55. Pingback: 500px.com/p/phraspilliti

  56. Pingback: https://web904.com/canadian-pharmaceuticals-for-usa-sales/

  57. Pingback: https://500px.com/p/skulogovid/?view=groups

  58. Pingback: 500px.compbersavahi?view=groups

  59. Pingback: reallygoodemails.comcanadianpharmaceuticalsonlineusa

  60. Pingback: www.provenexpert.comcanadian-pharmaceuticals-online-usa

  61. Pingback: canadian pharmacies online prescriptions

  62. Pingback: canadian medications

  63. Pingback: haikudeck.comcanadian-pharmaceuticals-online-personal-presentation-827506e003

  64. Pingback: buyersguide.americanbar.orgprofile4206420

  65. Pingback: https://experiment.com/users/canadianpharmacy

  66. Pingback: canada medication

  67. Pingback: stromectol generic

  68. Pingback: challonge.comgotsembpertvil

  69. Pingback: challonge.comcitlitigolf

  70. Pingback: order-stromectol-over-the-counter.estranky.czclankyorder-stromectol-over-the-counter.html

  71. Pingback: soncheebarxu.estranky.czclankystromectol-for-head-lice.html

  72. Pingback: lehyriwor.estranky.skclankystromectol-cream.html

  73. Pingback: https://dsdgbvda.zombeek.cz/

  74. Pingback: inflavnena.zombeek.cz

  75. Pingback: www.myscrsdirectory.comprofile4217080

  76. Pingback: supplier.ihrsa.orgprofile4217170

  77. Pingback: wefbuyersguide.wef.orgprofile4219140

  78. Pingback: canadian pharmacy viagra

  79. Pingback: https://moaamein.nacda.com/profile/422018/0

  80. Pingback: https://www.audiologysolutionsnetwork.org/profile/422019/0

  81. Pingback: https://network.myscrs.org/profile/422020/0

  82. Pingback: sanangelolive.commemberscanadianpharmaceuticalsonlineusa

  83. Pingback: purchase stromectol

  84. Pingback: https://www.ecosia.org/search?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"

  85. Pingback: www.mojomarketplace.comuserCanadianpharmaceuticalsonline-EkugcJDMYH

  86. Pingback: https://seedandspark.com/user/canadian-pharmaceuticals-online

  87. Pingback: www.giantbomb.comprofilecanadapharmacyblogcanadian-pharmaceuticals-online265652

  88. Pingback: canadian pharmacy uk delivery

  89. Pingback: canadian cialis

  90. Pingback: https://search.seznam.cz/?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"

  91. Pingback: stromectol

  92. Pingback: https://duckduckgo.com/?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"

  93. Pingback: https://swisscows.com/en/web?query="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"

  94. Pingback: https://www.dogpile.com/serp?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"

  95. Pingback: best canadian pharmacies online

  96. Pingback: https://search.givewater.com/serp?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"

  97. Pingback: www.bakespace.commembersprofileСanadian pharmaceuticals for usa sales1541108

  98. Pingback: canadian pharmacy online

  99. Pingback: results.excite.comserp?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"

  100. Pingback: northwest pharmacies

  101. Pingback: canadian pharmacies online prescriptions

  102. Pingback: results.excite.comserp?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"

  103. Pingback: https://canadianpharmaceuticalsonline.as.me/schedule.php

  104. Pingback: canadian pharmaceuticals online

  105. Pingback: https://reallygoodemails.com/orderstromectoloverthecounterusa

  106. Pingback: logarkomx

  107. Pingback: stromectol buy

  108. Pingback: pinshape.comusers2491694-buy-stromectol-fitndance

  109. Pingback: www.provenexpert.commedicament-stromectol

  110. Pingback: buy stromectol

  111. Pingback: stromectol tablets uk

  112. Pingback: https://tropkefacon.estranky.sk/clanky/buy-ivermectin-fitndance.html

  113. Pingback: best canadian pharmacies online

  114. Pingback: dramamhinca.zombeek.cz

  115. Pingback: https://sanangelolive.com/members/thisphophehand

  116. Pingback: motocom.codemosnetw5askmequestioncanadian-pharmaceuticals-online-5

  117. Pingback: www.infospace.comserp?q="My Canadian Pharmacy - Extensive Assortment of Medications – 2022"

  118. Pingback: canadianpharmacy

  119. Pingback: https://aleserme.estranky.sk/clanky/stromectol-espana.html

  120. Pingback: https://orderstromectoloverthecounter.mystrikingly.com/

  121. Pingback: stromectoloverthecounter.wordpress.com

  122. Pingback: https://buystromectol.livejournal.com/421.html

  123. Pingback: https://orderstromectoloverthecounter.flazio.com/

  124. Pingback: canada online pharmacies

  125. Pingback: https://conifer.rhizome.org/pharmaceuticals

  126. Pingback: stromectol espana

  127. Pingback: stromectol coupon

  128. Pingback: stromectol oral

  129. Pingback: orderstromectoloverthecounter.proweb.cz

  130. Pingback: orderstromectoloverthecounter.nethouse.ru

  131. Pingback: sandbox.zenodo.orgcommunitiescanadianpharmaceuticalsonline

  132. Pingback: demo.socialengine.comblogs24031227canadian-pharmaceuticals-online

  133. Pingback: pharmaceuticals.cgsociety.orgjvcccanadian-pharmaceuti

  134. Pingback: https://taylorhicks.ning.com/photo/albums/best-canadian-pharmaceuticals-online

  135. Pingback: my.afcpe.orgforumsdiscussiondiscussionsreputable-canadian-pharmaceuticals-online

  136. Pingback: www.dibiz.comndeapq

  137. Pingback: pharmacy canada

  138. Pingback: https://canadianpharmaceuticals.educatorpages.com/pages/canadian-pharmacies-shipping-to-usa

  139. Pingback: https://soundcloud.com/canadian-pharmacy

  140. Pingback: canadian pharmacy

  141. Pingback: canadian online pharmacy

  142. Pingback: dragonballwiki.netforumcanadian-pharmaceuticals-online-safe

  143. Pingback: the-dots.comprojectscovid-19-in-seven-little-words-848643

  144. Pingback: jemi.socanadian-pharmacies-shipping-to-usa

  145. Pingback: www.homify.comideabooks9099923reputable-canadian-pharmaceuticals-online

  146. Pingback: buy viagra online usa

  147. Pingback: viagra canada

  148. Pingback: pinshape.comusers2507399-best-canadian-pharmaceuticals-online

  149. Pingback: https://aoc.stamford.edu/profile/upogunem/

  150. Pingback: canadian pharmacies mail order

  151. Pingback: canadian medications

  152. Pingback: best canadian pharmacies online

  153. Pingback: canada pharmacies online prescriptions

  154. Pingback: https://dustpontisrhos.zombeek.cz/

  155. Pingback: sanangelolive.commembersmaiworkgendty

  156. Pingback: issuu.comlustgavalar

  157. Pingback: https://calendly.com/canadianpharmaceuticalsonline/onlinepharmacy

  158. Pingback: canadianpharmaceuticalsonline.golog.jparchives16914921.html

  159. Pingback: canadian pharmacys

  160. Pingback: pharmacy canada

  161. Pingback: https://canadianpharmaceuticalsonline.mynikki.jp/archives/16957846.html

  162. Pingback: pinshape.comusers2528098-canadian-pharmacy-online

  163. Pingback: https://gravatar.com/kqwsh

  164. Pingback: canada drugs online

  165. Pingback: telegra.phCanadian-pharmacy-drugs-online-12-11

  166. Pingback: graph.orgCanadian-pharmacies-online-12-11

  167. Pingback: canadianonlinepharmacieslegitimate.flazio.com

  168. Pingback: halttancentnin.livejournal.com301.html

  169. Pingback: https://app.roll20.net/users/11413335/canadian-pharmaceuticals-online-shipping

  170. Pingback: https://linktr.ee/canadianpharmaceuticalsonlineu

  171. Pingback: onlinepharmaciesofcanada.bigcartel.combest-canadian-online-pharmacy

  172. Pingback: hub.docker.comrcanadadiscountdrugpharmaceuticals

  173. Pingback: canada pharmacy

  174. Pingback: online pharmacy

  175. Pingback: prescription drugs without prior prescription

  176. Pingback: canadian viagra

  177. Pingback: bitcoinblack.netcommunitycanadianpharmacyonlineviagrainfo

  178. Pingback: https://forum.melanoma.org/user/canadadrugsonline/profile/

  179. Pingback: [email protected]

  180. Pingback: prescription drugs without prior prescription

  181. Pingback: https://my.desktopnexus.com/Canadianpharmacygeneric/journal/

  182. Pingback: http://canadianpharmaceuticalsonlinee.iwopop.com/

  183. Pingback: top rated online canadian pharmacies

  184. Pingback: pharmacycheapnoprescription.nethouse.ru

  185. Pingback: https://www.midi.org/forum/profile/96944-pharmacyonlinecheap

  186. Pingback: canadian pharmacies shipping to usa

  187. Pingback: https://dailygram.com/blog/1183360/canada-online-pharmacies/

  188. Pingback: drugs for sale

  189. Pingback: https://rabbitroom.com/members/onlinepharmacydrugstore/profile/

  190. Pingback: https://www.mixcloud.com/canadianpharmaceuticalsonline/

  191. Pingback: www.goodreads.comusershow161146330-canadianpharmaceuticalsonline

  192. Pingback: myanimelist.netprofilecanadapharmacies

  193. Pingback: pharmacyonlineprescription.webflow.io

  194. Pingback: https://www.clubsandwiched.com/community/account/sagasdg/

  195. Pingback: pastelink.netii18z6qf

  196. Pingback: https://joshbond.co.uk/community/profile/shippingtousa/

  197. Pingback: https://shippingtousa.mystrikingly.com/

  198. Pingback: https://pharmaciesshipping.wordpress.com/2023/05/15/canadian-pharmaceuticals-online-with-no-prescription/

  199. Pingback: canadian government approved pharmacies

  200. Pingback: www.horreur.clubcommunityprofilecanadianpharmacy

  201. Pingback: canada rx

  202. Pingback: nicol.co.tzcommunityprofilecanadianpharmacy

  203. Pingback: online pharmacy canada

  204. Pingback: https://plclink.co.uk/community/profile/canadianpharmacy/

  205. Pingback: Northwest Pharmacy

  206. Pingback: ascenddeals.combeaverageprofilecanadianpharmacy

  207. Pingback: https://baldstyled.com/community/profile/canadianpharmacy/

Leave a Comment