老孟導讀：目前 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,
)

用法基本都是類似的，下面是所有動畫元件的效果及對應的元件名稱：

交流

老孟Flutter部落格（330個控制元件用法+實戰入門系列文章）：http://laomengit.com

歡迎加入Flutter交流群（微信：laomengit）、關注公眾號【老孟Flutter】：