Trending Articles       10 Flutter Listview Examples       Flutter Custom Button Example       Flutter Audio Recording       Flutter 2.0 Autocomplete TextField       Current Location Google Maps

Flutter Carousel - Swiper Banners

Hi Guys, Today we are going to learn how to show Carousel Banners in Flutter

Table of contents
1. Integrated flutter_swiper
2. Add Swiper3. Properties
4. Page indicator
5. Control button
6. Full code
7. Flutter run

Integrated flutter_swiper

Add flutter_swiper: ^ 1.1.6  and synchronize flutter packages get.
Add references import 'package: flutter_swiper / flutter_swiper.dart'  in the corresponding .dart files

flutter_swiper: ^1.1.6


Add Swiper to widget

You can set the scrolling direction to Axis.vertical if you need to scroll vertically. Multiple layout methods, unlimited carousel, Android and IOS dual-end adaptation

                  outer: false,
                  itemBuilder: (c, i) {
                      return Container(
                        child: Image.asset(dataList[i].img,fit: BoxFit.cover,),
                  new SwiperPagination(margin: new EdgeInsets.all(5.0)),
                  itemCount: dataList == null ? 0 : dataList.length,



Parameter Defaults Description
scrollDirection Axis.horizontal Scroll direction, set to Axis.vertical if you need to scroll vertically
loop true Unlimited carousel mode switch
index 0 Index position at the beginning
autoplay false Auto play switch
onIndexChanged void onIndexChanged(int index) Invoked when the user changes the index by manual dragging or autoplay
onTap void onTap(int index) Called when the user clicks on a carousel
duration 300.0 Animation time in milliseconds
pagination null Setting new SwiperPagination()Display default paging indicator
control null Setting new SwiperControl()Display default paging buttons


Page indicator

Inherited from the paging indicator SwiperPlugin, SwiperPluginto Swiperprovide an additional interface. Set to new SwiperPagination()show the default tab

Parameter Defaults Description
If you want to put the paging indicator in another position, you can modify this parameter
margin const EdgeInsets.all(10.0) Distance between page indicator and container border
builder SwiperPagination.dots
Now defines two default paging indicator style: SwiperPagination.dots, , SwiperPagination.fractioncan be further customized



Control button

Control button component is inherited from SwiperPlugin, is set new SwiperControl()to show the default controls

Parameter Defaults Description
iconPrevious Icons.arrow_back_ios IconData on the previous page
iconNext Icons.arrow_forward_ios IconData on the next page
color Theme.of(context).primaryColor Control button color
size 30.0 Control button size


Full code

import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';

import 'cource_data.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      home: Carasole(),
class Carasole extends StatelessWidget{
  SwiperController _swiperController=SwiperController();

  Widget build(BuildContext context) {
    // TODO: implement build
    return SafeArea(

      child: Scaffold(
        backgroundColor: Color.fromARGB(0, 1, 221, 245),
        body: Column(
          children: [
              elevation: 10,margin: EdgeInsets.all(5),
              shape: RoundedRectangleBorder
(borderRadius: BorderRadius.circular(10.0)),

              child: Container(
                height: 180,
                child: Swiper(
                  itemWidth: 250,
                  controller: _swiperController,
                  outer: false,
                  itemBuilder: (c, i) {
                      return Container(
                        child: Image.asset(dataBanners[i].img,fit: BoxFit.cover,
height: 120,),
                  new SwiperPagination(builder: DotSwiperPaginationBuilder(
activeColor:,size: 5,activeSize: 8,
color: Colors.grey),
                      margin: new EdgeInsets.all(5.0)),
                  itemCount: dataBanners == null ? 0 : dataBanners.length,
                  layout: SwiperLayout.STACK,
              child: ListView.builder(
                itemCount: dataList.length,
                  itemBuilder: (ctx,index){
                return Card(
                  child: Padding(
                    padding: const EdgeInsets.all(8.0),
                    child: ListTile(
                        title: Text(dataList[index].name),
                        subtitle: Text("By Author"),



Flutter run


Author: RRTutors

Flutter Questions

Android Questions