Image Carousel with Flutter framework with basic animation using VS Code

Note: We are not going to build a carousel/slider from scratch, instead we are going to use a package called carousel_pro. In future tutorials I will show, how to build a carousel from scratch and how we can publish as a package.


Source code for the image carousel/slider

pubspec.yaml

	name: image_carousel_app
	description: A new Flutter project.
	dependencies:
	flutter:
	sdk: flutter
	carousel_pro: ^0.0.1
	# The following adds the Cupertino Icons font to your application.
	# Use with the CupertinoIcons class for iOS style icons.
	cupertino_icons: ^0.1.2
	dev_dependencies:
	flutter_test:
	sdk: flutter
	# For information on the generic Dart part of this file, see the
	# following page: https://www.dartlang.org/tools/pub/pubspec
	# The following section is specific to Flutter.
	flutter:
	# The following line ensures that the Material Icons font is
	# included with your application, so that you can use the icons in
	# the material Icons class.
	uses-material-design: true
	# To add assets to your application, add an assets section, like this:
	# assets:
	# - images/a_dot_burr.jpeg
	# - images/a_dot_ham.jpeg
	assets:
	- assets/images/1.jpg
	- assets/images/2.jpg
	- assets/images/3.jpg
	- assets/images/4.jpg
	# An image asset can refer to one or more resolution-specific "variants", see
	# https://flutter.io/assets-and-images/#resolution-aware.
	# For details regarding adding assets from package dependencies, see
	# https://flutter.io/assets-and-images/#from-packages
	# To add custom fonts to your application, add a fonts section here,
	# in this "flutter" section. Each entry in this list should have a
	# "family" key with the font family name, and a "fonts" key with a
	# list giving the asset and other descriptors for the font. For
	# example:
	# fonts:
	# - family: Schyler
	# fonts:
	# - asset: fonts/Schyler-Regular.ttf
	# - asset: fonts/Schyler-Italic.ttf
	# style: italic
	# - family: Trajan Pro
	# fonts:
	# - asset: fonts/TrajanPro.ttf
	# - asset: fonts/TrajanPro_Bold.ttf
	# weight: 700
	#
	# For details regarding fonts from package dependencies,
	# see https://flutter.io/custom-fonts/#from-packages
	fonts:
	- family: fira
	fonts:
	- asset: assets/fonts/FiraSans-Regular.ttf

view raw pubspec.yaml hosted with ❤ by GitHub

main.dart

	//First go to pubspec.yaml file and add this => carousel_pro: ^0.0.1 under dependencies.
	import 'package:carousel_pro/carousel_pro.dart';
	import 'package:flutter/material.dart';
	void main() => runApp(new MyApp());
	class MyApp extends StatelessWidget {
	@override
	Widget build(BuildContext context) {
	return new MaterialApp(
	debugShowCheckedModeBanner: false,
	title: 'Flutter Carousel',
	home: ImageCarousel(),
	);
	}
	}
	class ImageCarousel extends StatefulWidget {
	_ImageCarouselState createState() => new _ImageCarouselState();
	}
	class _ImageCarouselState extends State<ImageCarousel> with SingleTickerProviderStateMixin {
	Animation<double> animation;
	AnimationController controller;
	initState() {
	super.initState();
	controller = new AnimationController(
	duration: const Duration(milliseconds: 2000), vsync: this);
	animation = new Tween(begin: 0.0, end: 18.0).animate(controller)
	..addListener(() {
	setState(() {
	// the state that has changed here is the animation object’s value
	});
	});
	controller.forward();
	}
	@override
	Widget build(BuildContext context) {
	double screenHeight = MediaQuery.of(context).size.height;
	Widget carousel = new Carousel(
	boxFit: BoxFit.cover,
	images: [
	new AssetImage('assets/images/1.jpg'),
	new AssetImage('assets/images/2.jpg'),
	new AssetImage('assets/images/3.jpg'),
	new AssetImage('assets/images/4.jpg'),
	],
	animationCurve: Curves.fastOutSlowIn,
	animationDuration: Duration(seconds: 1),
	);
	Widget banner = new Padding(
	padding: const EdgeInsets.only(top: 20.0, left: 20.0),
	child: new Container(
	decoration: BoxDecoration(
	borderRadius: BorderRadius.only(
	topLeft: Radius.circular(15.0),
	bottomRight: Radius.circular(15.0)),
	color: Colors.amber.withOpacity(0.5),
	),
	padding: const EdgeInsets.all(10.0),
	child: new Text(
	'Banner on top of carousel',
	style: TextStyle(
	fontFamily: 'fira',
	fontSize: animation.value,//18.0,
	//color: Colors.white,
	),
	),
	),
	// ),
	// ),
	);
	return new Scaffold(
	backgroundColor: Colors.black,
	body: new Center(
	child: new Container(
	padding: const EdgeInsets.all(20.0),
	height: screenHeight / 2,
	child: new ClipRRect(
	borderRadius: BorderRadius.circular(30.0),
	child: new Stack(
	children: [
	carousel,
	banner,
	],
	),
	),
	),
	),
	);
	}
	dispose() {
	controller.dispose();
	super.dispose();
	}
	}

view raw image_carousel_pro.dart hosted with ❤ by GitHub

Flutter developer wallpaper by slcoder - ego with coding: