GitLocker: The Coding Marketplace

Description:

toggle rotate

【pub地址】【github地址】
dependencies:
toggle_rotate: 1.0.1
copied to clipboard

一、描述

目标: 让一个组件点击时执行旋转，再点击旋转回去。

最简使用
时长、曲线、方向
一切组件
旋转角度

1.所有属性:

名称
类型
功能
备注
默认

beginAngle
double
起始角度
角度制
0

endAngle
double
终止角度
角度制
90

durationMs
int
动画时长
毫秒
200

curve
Curve
动画曲线
-
Curves.fastOutSlowIn

clockwise
bool
是否顺时针旋转
-
true

onTap
void Function
点击事件
-
null

onEnd
void Function(bool)
动画结束回调
-
null

child
Widget
子组件
@required
null

2.最简使用:

ToggleRotate(
child: Icon(Icons.arrow_upward,size: 60,color: Colors.orangeAccent),
onEnd: (bool isExpanded) { // 动画结束时间
print("---expanded---:$isExpanded-------");
},
onTap: () {}, //点击事件
),
copied to clipboard

3.指定时长和曲线和方向

ToggleRotate(
curve: Curves.decelerate,
durationMs: 400,//动画时长
clockwise: false, //是否是顺时针
child: Icon(Icons.arrow_upward,size: 60,color: Colors.orangeAccent),
onTap: () {},
),
copied to clipboard

4.可使一切组件进行旋转切换

ToggleRotate(
curve: Curves.decelerate,
durationMs: 400,
child: Image(width:60,height: 60,image: AssetImage("assets/images/icon_28.jpg")),
onTap: () {},

)
copied to clipboard

5.可使旋转的角度

ToggleRotate(
beginAngle: 0, // 起始角度
endAngle: 45, // 终止角度
curve: Curves.linear,
child: Image(width:60,height: 60,image: AssetImage("assets/images/icon_28.jpg")),
onTap: () {},
)
copied to clipboard