carousel_pro 1.0.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 100

Carousel Pro pub package

Flutter Carousel小部件.

Usage #

就像使用任何Flutter Widget一样简单.

示例:将模块添加到您的项目pubspec.yaml

...
dependencies:
 ...
 carousel_pro: ^1.0.0
...

并使用flutter packages get安装它,并将其放在您的项目文件夹中. 之后,只需导入模块并使用它:

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")
    ],
  )
),

ScreenShot 01

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,
  )
),

ScreenShot 02

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,
    )
),

ScreenShot 03

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,
    )
),

ScreenShot 04

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,
    )
),

ScreenShot 05

Parameters and Values #

images #

该轮播上的所有图片. 类型:清单

animationCurve #

过渡动画时间曲线默认值: Curves.ease 类型: 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 #

过渡动画的持续时间类型: Duration 默认值: 300ms.

dotSize #

点的基本大小类型: double 默认值: 8.0

dotIncreaseSize #

所选点的大小增加类型:两倍默认值: 2.0

dotSpacing #

每个点的中心之间的距离类型: double 默认值: 25.0

dotColor #

每个点的颜色类型:颜色默认值: Colors.white

dotBgColor #

点的背景颜色类型:颜色默认值: Colors.grey [800] .withOpacity(0.5)

showIndicator #

启用或禁用指示器(点) 类型:布尔型默认值: true

indicatorBgPadding #

背景的填充大小指标类型:两倍默认值: 20.0

boxFit #

如何在框中显示图像类型: BoxFit 默认值:封面

Values #
  • BoxFit.cover;
  • BoxFit.fitWidth;
  • BoxFit.fitHeight;
  • BoxFit.scaleDown;
  • BoxFit.fill;
  • BoxFit.contain;
  • BoxFit.none;

borderRadius #

启用/禁用图像的半径边框类型:布尔型默认值: false

radius #

图像的边框半径类型:半径默认值: Radius.circular(8.0)

moveIndicatorFromBottom #

从底部移动指示器类型:双重默认值: 0.0

noRadiusForIndicator #

从指示器背景中删除半径底部类型: bool 默认值: false

overlayShadow #

启用/禁用图像覆盖阴影类型: bool 默认值: false

overlayShadowColors #

选择叠加层的颜色阴影颜色类型:颜色默认值: Colors.grey [800]

overlayShadowSize #

选择"覆盖阴影"的大小,从0.0到1.0. 类型: double 默认值: 0.5

autoplay #

启用/禁用自动播放轮播类型:布尔型默认值: true

autoplayDuration #

自动播放过渡持续时间类型:持续时间默认值: 3s

Credits #

JLouage(Julien Louage)开发 info@jlouage.com

Contributing #

随时提供帮助!

[1.0.0]

  • Bug修复

[0.0.12]

  • 添加了动画

[0.0.11]

  • 屏幕截图已添加
  • 添加示例
  • 自述文件已修改

[0.0.1]

  • 初始发行

example/main.dart

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

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: true,
    title: 'Carousel Pro',
    home: CarouselPage(),
  ));
}

class CarouselPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 150.0,
          width: 300.0,
          child: Carousel(
            boxFit: BoxFit.cover,
            autoplay: false,
            animationCurve: Curves.fastOutSlowIn,
            animationDuration: Duration(milliseconds: 1000),
            dotSize: 6.0,
            dotIncreasedColor: Color(0xFFFF335C),
            dotBgColor: Colors.transparent,
            dotPosition: DotPosition.topRight,
            dotVerticalPadding: 10.0,
            showIndicator: true,
            indicatorBgPadding: 7.0,
            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"),
            ],
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

将此添加到包的pubspec.yaml文件中:


dependencies:
  carousel_pro: ^1.0.0

2. Install it

您可以从命令行安装软件包:

使用Flutter:


$ flutter pub get

另外,您的编辑器可能支持flutter pub get . 查看您的编辑器文档以了解更多信息.

3. Import it

现在,在Dart代码中,您可以使用:


import 'package:carousel_pro/carousel_pro.dart';
  
Popularity:
描述该程序包相对于其他程序包的受欢迎程度. [更多]
99
Health:
从静态分析得出的代码运行状况. [更多]
100
Maintenance:
反映出软件包的整洁和最新状态. [更多]
100
Overall:
以上的加权分数. [更多]
100
了解有关得分的更多信息.

我们在2020年1月16日分析了此软件包,并在下面提供了得分,详细信息和建议. using: 分析已完成,状态使用以下命令 :

  • 飞镖:2.7.0
  • 高达:0.13.4
  • Flutter:1.12.13 + hotfix.5

Dependencies

Package Constraint Resolved Available
直接依赖
Dart SDK > = 2.0.0 <3.0.0
flutter 0.0.0
传递依存关系
collection 1.14.11 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
开发依赖
flutter_test

by  ICOPY.SITE