A Flutter Carousel widget.
As simple as using any flutter Widget.
Example:
Add the module to your project pubspec.yaml
:
...
dependencies:
...
carousel_pro: ^0.0.13
...
And install it using flutter packages get
on your project folder. After that, just import the module and use it:
import 'package:carousel_pro/carousel_pro.dart';
//...
new SizedBox(
height: 150.0,
width: 300.0,
child: new Carousel(
images: [
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
new ExactAssetImage("assets/images/LaunchImage.jpg")
],
)
),
import 'package:carousel_pro/carousel_pro.dart';
//...
new SizedBox(
height: 200.0,
width: 350.0,
child: new Carousel(
images: [
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
new ExactAssetImage("assets/images/LaunchImage.jpg")
],
dotSize: 4.0,
dotSpacing: 15.0,
dotColor: Colors.lightGreenAccent,
indicatorBgPadding: 5.0,
dotBgColor: Colors.purple.withOpacity(0.5),
borderRadius: true,
)
),
import 'package:carousel_pro/carousel_pro.dart';
//...
new SizedBox(
height: 200.0,
width: 350.0,
child: new Carousel(
images: [
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
new ExactAssetImage("assets/images/LaunchImage.jpg")
],
dotSize: 4.0,
dotSpacing: 15.0,
dotColor: Colors.lightGreenAccent,
indicatorBgPadding: 5.0,
dotBgColor: Colors.purple.withOpacity(0.5),
borderRadius: true,
moveIndicatorFromBottom: 180.0,
noRadiusForIndicator: true,
)
),
import 'package:carousel_pro/carousel_pro.dart';
//...
new SizedBox(
height: 200.0,
width: 350.0,
child: new Carousel(
images: [
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
new ExactAssetImage("assets/images/LaunchImage.jpg")
],
dotSize: 4.0,
dotSpacing: 15.0,
dotColor: Colors.lightGreenAccent,
indicatorBgPadding: 5.0,
dotBgColor: Colors.purple.withOpacity(0.5),
borderRadius: false,
moveIndicatorFromBottom: 180.0,
noRadiusForIndicator: true,
overlayShadow: true,
overlayShadowColors: Colors.white,
overlayShadowSize: 0.7,
)
),
import 'package:carousel_pro/carousel_pro.dart';
//...
new SizedBox(
height: 200.0,
width: 350.0,
child: new Carousel(
images: [
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
new ExactAssetImage("assets/images/LaunchImage.jpg")
],
showIndicator: false,
borderRadius: false,
moveIndicatorFromBottom: 180.0,
noRadiusForIndicator: true,
overlayShadow: true,
overlayShadowColors: Colors.white,
overlayShadowSize: 0.7,
)
),
All the images on this Carousel. Type: List
The transition animation timing curve Default value: Curves.ease Type: Curve
The transition animation duration Type: Duration Default value: 300ms.
The base size of the dots Type: double Default value: 8.0
The increase in the size of the selected dot Type: double Default value: 2.0
The distance between the center of each dot Type: double Default value: 25.0
The Color of each dot Type: Color Default value: Colors.white
The background Color of the dots Type: Color Default value: Colors.grey[800].withOpacity(0.5)
Enable or Disable the indicator (dots) Type: bool Default value: true
Padding Size of the background Indicator Type: double Default value: 20.0
How to show the images in the box Type: BoxFit Default value: cover
Enable/Disable radius Border for the images Type: bool Default value: false
Border Radius of the images Type: Radius Default value: Radius.circular(8.0)
Move the Indicator From the Bottom Type: double Default value: 0.0
Remove the radius bottom from the indicator background Type: bool Default value: false
Enable/Disable Image Overlay Shadow Type: bool Default value: false
Choose the color of the overlay Shadow color Type: Color Default value: Colors.grey[800]
Choose the size of the Overlay Shadow, from 0.0 to 1.0 Type: double Default value: 0.5
Enable/Disable autoplay carousel Type: bool Default value: true
The autoplay transition duration Type: Duration Default value: 3s
Developed by JLouage (Julien Louage) info@jlouage.com
Feel free to help!
example/main.dart
import 'package:flutter/material.dart';
import 'package:carousel_pro/carousel_pro.dart';
void main() {
runApp(
new MaterialApp(
debugShowCheckedModeBanner: true,
title: 'Carousel Pro',
home: new CarouselPage(),
)
);
}
class CarouselPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new Center(
child: new SizedBox(
height: 150.0,
width: 300.0,
child: new Carousel(
images: [
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
new NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
new ExactAssetImage("assets/images/LaunchImage.jpg")
],
)
),
),
);
}
}
Add this to your package's pubspec.yaml file:
dependencies:
carousel_pro: ^0.0.13
You can install packages from the command line:
with Flutter:
$ flutter packages get
Alternatively, your editor might support flutter packages get
.
Check the docs for your editor to learn more.
Now in your Dart code, you can use:
import 'package:carousel_pro/carousel_pro.dart';
Version | Uploaded | Documentation | Archive |
---|---|---|---|
0.0.13 | Jun 26, 2018 |
|
|
0.0.12 | May 29, 2018 |
|
|
0.0.11 | May 25, 2018 |
|
|
0.0.1 | May 24, 2018 |
|
|
Popularity:
Describes how popular the package is relative to other packages.
[more]
|
98
|
Health:
Code health derived from static analysis.
[more]
|
100
|
Maintenance:
Reflects how tidy and up-to-date the package is.
[more]
|
70
|
Overall:
Weighted score of the above.
[more]
|
93
|
We analyzed this package on Feb 14, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:
Detected platforms: Flutter
References Flutter, and has no conflicting libraries.
Format lib/src/carousel_pro.dart
.
Run flutter format
to format lib/src/carousel_pro.dart
.
The package description is too short. (-20 points)
Add more detail to the description
field of pubspec.yaml
. Use 60 to 180 characters to describe the package, what it does, and its target use case.
Package is pre-v0.1 release. (-10 points)
While nothing is inherently wrong with versions of 0.0.*
, it might mean that the author is still experimenting with the general direction of the API.
Package | Constraint | Resolved | Available |
---|---|---|---|
Direct dependencies | |||
Dart SDK | >=2.0.0-dev.28.0 <3.0.0 | ||
flutter | 0.0.0 | ||
Transitive dependencies | |||
collection | 1.14.11 | ||
meta | 1.1.6 | 1.1.7 | |
sky_engine | 0.0.99 | ||
typed_data | 1.1.6 | ||
vector_math | 2.0.8 | ||
Dev dependencies | |||
flutter_test |