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