Carousel Slider In Flutter

Carousel Slider In Flutter :

This flutter tutorial post is carousel slider in flutter.

Screenshot :

custom_carousel.dart

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

class CustomCarousel extends StatefulWidget {
  final List<String> imageUrls;
  CustomCarousel({this.imageUrls});
  @override
  _CustomCarouselState createState() => _CustomCarouselState();
}

class _CustomCarouselState extends State<CustomCarousel> {
  var pageIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Stack(children: <Widget>[
      CarouselSlider(
        height: double.infinity,
        viewportFraction: 1.0,
        autoPlay: false,
        onPageChanged: (index) {
          setState(() {
            pageIndex = index;
          });
        },
        items: widget.imageUrls.map((i) {
          return Builder(builder: (BuildContext context) {
            return Container(
                child: FadeInImage(
              image: NetworkImage(i),
              fit: BoxFit.cover,
              placeholder: AssetImage('assets/images/loading.gif'),
            ));
          });
        }).toList(),
      ),
      Positioned(
          bottom: 8,
          right: 8,
          child: Container(
              height: 12,
              child: ListView.builder(
                  shrinkWrap: true,
                  itemCount: widget.imageUrls.length,
                  scrollDirection: Axis.horizontal,
                  itemBuilder: (BuildContext context, int index) {
                    return Padding(
                        padding: const EdgeInsets.all(4.0),
                        child: AnimatedContainer(
                            duration: Duration(milliseconds: 300),
                            height: 5,
                            width: index == pageIndex ? 15 : 5,
                            decoration: BoxDecoration(
                              borderRadius: BorderRadius.circular(8.0),
                              color: Colors.blue,
                            )));
                  })))
    ]));
  }
}

main.dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'ui/page/custom_carousel.dart';

void main() {
  SystemChrome.setPreferredOrientations(
          [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown])
      .then((_) => runApp(new MyApp()));
}

class MyApp extends StatelessWidget {
  List<String> images = new List();
  @override
  Widget build(BuildContext context) {

    images.add('http://www.welcomenepal.com/uploads/Lumbini5_tk_buddhajayanti.jpg');
    images.add('http://www.welcomenepal.com/uploads/lumbini8.jpg');
    images.add('http://www.welcomenepal.com/uploads/lumbini3.jpg');
    images.add('http://www.welcomenepal.com/uploads/lumbini4_tk_buddhajayanti.jpg');

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
      statusBarIconBrightness: Brightness.dark,
      statusBarBrightness:
          Platform.isAndroid ? Brightness.dark : Brightness.light,
      systemNavigationBarColor: Colors.white,
      systemNavigationBarDividerColor: Colors.grey,
      systemNavigationBarIconBrightness: Brightness.dark,
    ));
    return MaterialApp(
        title: 'Flutter',
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          primarySwatch: Colors.deepOrange,
          platform: TargetPlatform.iOS,
        ),
        initialRoute: '/',
        routes: <String, WidgetBuilder>{
          '/': (context) => Container(
              color: Colors.white,
              child: Column(
                  children: <Widget>[
                    SizedBox(
                      width: double.infinity,
                      height: 200,
                      child: CustomCarousel(imageUrls: images),
                    )
                  ]))
        });
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in