jlouage/flutter-carousel-pro
Flutter Carousel Pro
gehe zu github herunterladenCarousel Pro ![pub package](https://img.shields.io/pub/v/carousel_pro.svg)
A Flutter Carousel widget.
Usage
As simple as using any flutter Widget.
Example:
Add the module to your project pubspec.yaml
:
...
dependencies:
...
carousel_pro: ^1.0.0
...
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';
//...
SizedBox(
height: 150.0,
width: 300.0,
child: Carousel(
images: [
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
ExactAssetImage("assets/images/LaunchImage.jpg")
],
)
),
import 'package:carousel_pro/carousel_pro.dart';
//...
SizedBox(
height: 200.0,
width: 350.0,
child: Carousel(
images: [
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
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';
//...
SizedBox(
height: 200.0,
width: 350.0,
child: Carousel(
images: [
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
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';
//...
SizedBox(
height: 200.0,
width: 350.0,
child: Carousel(
images: [
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
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';
//...
SizedBox(
height: 200.0,
width: 350.0,
child: Carousel(
images: [
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*GqdzzfB_BHorv7V2NV7Jgg.jpeg'),
NetworkImage('https://cdn-images-1.medium.com/max/2000/1*wnIEgP1gNMrK5gZU7QS0-A.jpeg'),
ExactAssetImage("assets/images/LaunchImage.jpg")
],
showIndicator: false,
borderRadius: false,
moveIndicatorFromBottom: 180.0,
noRadiusForIndicator: true,
overlayShadow: true,
overlayShadowColors: Colors.white,
overlayShadowSize: 0.7,
)
),
Parameters and Values
images
All the images on this Carousel.
Type: List
animationCurve
The transition animation timing curve
Default value: Curves.ease
Type: Curve
Values
- Curves.linear;
- Curves.fastOutSlowIn;
- Curves.ease;
- Curves.bounceOut;
- Curves.bounceIn;
- Curves.bounceInOut;
- Curves.decelerate;
- Curves.ease;
- Curves.easeIn;
- Curves.easeInOut;
- Curves.easeOut;
- Curves.elasticIn;
- Curves.elasticInOut;
- Curves.elasticOut;
animationDuration
The transition animation duration
Type: Duration
Default value: 300ms.
dotSize
The base size of the dots
Type: double
Default value: 8.0
dotIncreaseSize
The increase in the size of the selected dot
Type: double
Default value: 2.0
dotSpacing
The distance between the center of each dot
Type: double
Default value: 25.0
dotColor
The Color of each dot
Type: Color
Default value: Colors.white
dotBgColor
The background Color of the dots
Type: Color
Default value: Colors.grey[800].withOpacity(0.5)
showIndicator
Enable or Disable the indicator (dots)
Type: bool
Default value: true
indicatorBgPadding
Padding Size of the background Indicator
Type: double
Default value: 20.0
boxFit
How to show the images in the box
Type: BoxFit
Default value: cover
Values
- BoxFit.cover;
- BoxFit.fitWidth;
- BoxFit.fitHeight;
- BoxFit.scaleDown;
- BoxFit.fill;
- BoxFit.contain;
- BoxFit.none;
borderRadius
Enable/Disable radius Border for the images
Type: bool
Default value: false
radius
Border Radius of the images
Type: Radius
Default value: Radius.circular(8.0)
moveIndicatorFromBottom
Move the Indicator From the Bottom
Type: double
Default value: 0.0
noRadiusForIndicator
Remove the radius bottom from the indicator background
Type: bool
Default value: false
overlayShadow
Enable/Disable Image Overlay Shadow
Type: bool
Default value: false
overlayShadowColors
Choose the color of the overlay Shadow color
Type: Color
Default value: Colors.grey[800]
overlayShadowSize
Choose the size of the Overlay Shadow, from 0.0 to 1.0
Type: double
Default value: 0.5
autoplay
Enable/Disable autoplay carousel
Type: bool
Default value: true
autoplayDuration
The autoplay transition duration
Type: Duration
Default value: 3s
Credits
Developed by JLouage (Julien Louage) info@jlouage.com
Contributing
Feel free to help!
![](/images/banner-woo.jpg)
herausragende projekte, die mit jlouage/flutter-carousel-pro zusammenhängen, empfohlener download
AppFlowy
47859
AppFlowy is an open-source alternative to Notion. You are in charge of your data and customizations. Built with Flutter and Rust.
localsend
33797
An open-source cross-platform alternative to AirDrop
spotube
23772
🎧 Open source Spotify client that doesn't require Premium nor uses Electron! Available for both desktop & mobile!
revanced-manager
15035
💊 Application to use ReVanced on Android
gsy_github_app_flutter
14559
Flutter 超完整的开源项目,功能丰富,适合学习和日常使用。GSYGithubApp系列的优势:我们目前已经拥有Flutter、Weex、ReactNative、kotlin 四个版本。 功能齐全,项目框架内技术涉及面广,完成度高,持续维护,配套文章,适合全面学习,对比参考。跨平台的开源Github客户端App,更好的体验,更丰富的功能,旨在更好的日常管理和维护个人Github,提供更好更方便的驾车体验Σ( ̄。 ̄ノ)ノ。同款Weex版本 : https://github.com/CarGuo/GSYGithubAppWeex 、同款React Native版本 : https://github.com/CarGuo/GSYGithubApp 、原生 kotlin 版本 https://github.com/CarGuo/GSYGithubAppKotlin
dio
12249
A powerful HTTP client for Dart and Flutter, which supports global settings, Interceptors, FormData, aborting and canceling a request, files uploading and downloading, requests timeout, custom adapters, etc.
gopeed
11832
A modern download manager that supports all platforms. Built with Golang and Flutter.
bloc
11441
A predictable state management library that helps implement the BLoC design pattern
getx
9899
Open screens/snackbars/dialogs/bottomSheets without context, manage states and inject dependencies easily with Get.
flame
8846
A Flutter based game engine.
flutter_deer
7595
🦌 Flutter 练习项目(包括集成测试、可访问性测试)。内含完整UI设计图,更贴近真实项目的练习。Flutter practice project (including integration testing and accessibility testing). Contains complete UI design drawings for a more realistic practice project.
fish-redux
7343
An assembled flutter application framework.
ente
6686
Fully open source, End to End Encrypted alternative to Google Photos and Apple Photos
fl_chart
6451
FL Chart is a highly customizable Flutter chart library that supports Line Chart, Bar Chart, Pie Chart, Scatter Chart, and Radar Chart.
pixez-flutter
6360
一个支持免代理直连及查看动图的第三方Pixiv flutter客户端
Flutter-Responsive-Admin-Panel-or-Dashboard
6355
Responsive Admin Panel or Dashboard using Flutter
aidea
6021
AIdea 是一款支持 GPT 以及国产大语言模型通义千问、文心一言等,支持 Stable Diffusion 文生图、图生图、 SDXL1.0、超分辨率、图片上色的全能型 APP。
riverpod
5828
A reactive caching and data-binding framework. Riverpod makes working with asynchronous code a breeze.
pikapika
5463
美观易用且无广告的漫画和游戏客户端,同时支持MacOS,Windows,Android,iOS。
provider
5029
InheritedWidgets, but simple