code4soul

code for Love, code for Life

0%

[widget] shake_animation_widget

Posted on Edited on In

簡單的抖動動畫 widget，在輸入框的錯誤提示或是吸引使用者注意的時候蠻方便的一個 widget

安裝方式

pubspec.yaml 下面加入

1
2
dependencies:
  shake_animation_widget: ^3.0.4

記得輸入完要 pub get 安裝過

使用方式

  • shake animation
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      ShakeAnimationWidget(
        // shake animation controller
        shakeAnimationController: _shakeAnimationController,
        // shake animation 的樣式
        shakeAnimationType: ShakeAnimationType.TopBottomShake,
        // shake 的幅度
        shakeRange: 0.1,
        // shake 的次數, 預設 0
        shakeCount: 0,
        // 設置預設不抖動, 預設是 true
        isForward: false,
        child: const Text('code for love, code for life')
      ),
      TextButton(onPressed: () => _shakeAnimationController.start(shakeCount: 0), child: const Text("Start"))
    ],
  ),
)
  • shake text animation
1
2
3
4
5
6
7
8
9
10
11
ShakeTextAnimationWidget(
  // 設置文案
  animationString: "Join the Dart side!!",
  space: 1.0,
  runSpace: 10,
  // 文字樣是
  textStyle: const TextStyle(
    fontSize: 25,
  ),
  shakeCount: 0,
)
  • bottom round flow menu
1
2
3
4
5
6
7
BottomRoundFlowMenu(
  defaultBackgroundColor: Colors.white,
  iconList: const [Icon(Icons.icecream), Icon(Icons.ac_unit), Icon(Icons.account_balance_wallet_rounded)],
  clickCallBack: (int index) {
    print("press on $index");
  },
),
  • animated status button
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
AnimatedStatusButton(
  // controller
  animatedStatusController: _animatedStatusController,
  width: 220.0,
  height: 40,
  // 動畫時間
  milliseconds: 600,
  buttonText: 'Submit',
  // 背景顏色
  backgroundNormalColor: Colors.white,
  // 外框顏色
  borderNormalColor: Colors.green,
  // 文字顏色
  textNormalCcolor: Colors.black54,

  clickCallback: () async {
    await Future.delayed(const Duration(seconds: 3));
    return true; // 回傳 true 會讓 loading status 回到按鈕的狀態, false 的話會持續顯示 loading
  },
)
  • rote flow button menu
1
2
3
4
5
6
7
RoteFlowButtonMenu(
  defaultBackgroundColor: Colors.yellowAccent,
  iconList: const [Icon(Icons.plus_one), Icon(Icons.people), Icon(Icons.add)],
  clickCallBack: (int index) {
    print("on press $index");
  },
)
  • draggable floating action button
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
final GlobalKey _parentKey = GlobalKey();
// 要用 stack 包住才有效果
Stack(key: _parentKey, children: [
  Container(color: Colors.blueGrey),
  DraggableFloatingActionButton(
    initialOffset: const Offset(120, 70),
    parentKey: _parentKey,
    onPressed: () {},
    child: Container(
      width: 60,
      height: 60,
      decoration: const ShapeDecoration(
        shape: CircleBorder(),
        color: Colors.white,
      ),
      child: const Icon(Icons.add),
    ),
  ),
])

相關連結

shake_animation_widget