【老孟Flutter】41个酷炫的 Loading 组件库

老孟导读:目前 loading 库中包含41个动画组件,还会继续添加,同时也欢迎大家提交自己的 loading 动画组件或者直接微信发给我也可以。

Github 地址:https://github.com/781238222/flutter-do/tree/master/m_loading_sample

效果如下:

在项目的 pubspec.yaml 文件中添加依赖:

dependencies:
  m_loading: ^0.0.1

执行命令:

flutter pub get

所有 loading 动画组件的用法大同小异,都有 duration(动画时长) 和 curve(动画曲线)参数,以及外观样式的设置,下面是一些 loading 动画组件的用法。

小球类的动画组件中有 BallStyle 类型的参数,此参数表示小球样式,用法如下:

BallCircleOpacityLoading(
  ballStyle: BallStyle(
    size: 5,
    color: Colors.red,
    ballType: BallType.solid,
  ),
)

  • size:小球大小
  • color:小球颜色
  • ballType:小球类型,hollow:空心,solid:实心
  • borderWidth:边框宽
  • borderColor:边框颜色

设置空心球:

BallCircleOpacityLoading(
  ballStyle: BallStyle(
    size: 5,
    ballType: BallType.hollow,
    borderWidth: 1,
    borderColor: Colors.red
  ),
)

设置动画时长和动画曲线:

Ring2InsideLoading(
  color: Colors.blue,
  duration: Duration(milliseconds: 1200),
  curve: Curves.bounceInOut,
)

非小球类的组件使用:

PacmanLoading(
  mouthColor: Colors.blue,
  ballColor: Colors.red,
)

PouringHourGlassLoading(
  color: Colors.blue,
)

用法基本都是类似的,下面是所有动画组件的效果及对应的组件名称:

BallPulseLoadingBall4ScaleLoadingBallGridPulseLoadingBallCirclePulseLoading
Ball3OpacityLoadingBall4OpacityLoadingBallGridOpacityLoadingBallCircleRotateLoading
BallBounceLoadingBallRotateScaleLoadingBall2TrianglePathLoadingBallCircleOpacityLoading
Ball3TrianglePathLoadingBallInsideBallLoadingBallClipRotatePulseLoadingBallCircleInsideRotateLoading
RingRotateRing2InsideLoadingRing2SymmetryLoadingRingBallRotateLoading
RingClipRotateMultipleWaterCircleLoadingWater2CircleLoadingWaterRipple
WaterMultipleCircleLoadingWaterPulseLoadingBarPulseLoadingBarScaleLoading
BarScale1LoadingBarScalePulseOutLoadingBarMusicLoadingSquare4OpacityLoading
SquareFadingLoadingSquareRotateLoadingSquareGridScaleLoadingCircleRotateLoading
CirclePulseLoadingCircleSquareLoadingCircle2InsideScaleLoadingPouringHourGlassLoading
PacmanLoading

交流

老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com

欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 酷酷鲨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值