Flutter Carousel - Swiper Banners

Last updated Dec 08, 2019

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

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

 

Properties

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
alignment
Alignment.bottomCenter
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.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',

      home: Carasole(),
    );
  }
}
class Carasole extends StatelessWidget{
  ListdataList=CourceData.getList();
  ListdataBanners=CourceData.getBanners();
  SwiperController _swiperController=SwiperController();

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

      child: Scaffold(
        backgroundColor: Color.fromARGB(0, 1, 221, 245),
        body: Column(
          children: [
            Card(
              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) {
                    if(dataBanners!=null){
                      return Container(
                        child: Image.asset(dataBanners[i].img,fit: BoxFit.cover,
height: 120,),
                      );
                    }
                  },
                  pagination:
                  new SwiperPagination(builder: DotSwiperPaginationBuilder(
activeColor: Colors.pink,size: 5,activeSize: 8,
color: Colors.grey),
                      margin: new EdgeInsets.all(5.0)),
                  itemCount: dataBanners == null ? 0 : dataBanners.length,
                  layout: SwiperLayout.STACK,
                ),
              ),
            ),
            Expanded(
              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"),
                        leading:Image.asset(dataList[index].img)
                    ),
                  ),
                );
              }),
            )
          ],
        ),
      ),
    );
  }


}

 

Flutter run

Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

2892 Views