用flutter系统的loading的话遮罩是全屏的,导航按钮就无法点击,所以做了一个wiget添加在导航栏下方的屏幕上
Animation.dart
import 'package:flutter/material.dart';
class LoadingAnimation extends StatefulWidget {
LoadingAnimation(
{Key key,
@required this.image,
this.duration = const Duration(milliseconds: 800),
this.controller});
final Image image;
final Duration duration;
final AnimationController controller;
@override
State<StatefulWidget> createState() {
return _LoadingAnimationState();
}
}
class _LoadingAnimationState extends State<LoadingAnimation>
with SingleTickerProviderStateMixin {
@override
Widget build(BuildContext context) {
return Center(
child: RotationTransition(
//设置动画的旋转中心
alignment: Alignment.center,
//动画控制器
turns: _controller,
//将要执行动画的子view
child: widget.image,
),
);
}
AnimationController _controller;
@override
void initState() {
super.initState();
_controller = (widget.controller ??
AnimationController(vsync: this, duration: widget.duration))
..repeat();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
}
LoadingWidget.dart
import 'package:flutter/material.dart';
import 'package:sj_ui/style/widget_style.dart';
import 'package:sj_ui/toast/loading_animation.dart';
class SJLoadingWidget extends StatelessWidget {
SJWidgetStyle style = SJWidgetStyle.sj;
String text;
SJLoadingWidget({this.style, this.text});
@override
Widget build(BuildContext context) {
/********* 根据 style 设置司乘不同样式:*******/
// 最小宽度,
double _toastMinWidth = 120;
// 最大宽度,注:最大宽度增大80才正常显示!,最小宽度没有效果
double _toastMaxWidth = 120;
// 文字大小,
double _textSize = 12;
// 背景不透明度
double _backgroundOpacity = 0.7;
// icon 与文字距离
double _blankHeight = 8;
// toast 文字图标与背景 padding,
EdgeInsetsGeometry _padding =
const EdgeInsets.symmetric(horizontal: 20, vertical: 10);
// icon 大小
double _iconSize = 30;
if (style == SJWidgetStyle.sj) {
_toastMinWidth = 200;
_toastMaxWidth = 200;
_textSize = 24;
_backgroundOpacity = 0.9;
_blankHeight = 16;
_padding = const EdgeInsets.symmetric(horizontal: 20, vertical: 20);
_iconSize = 44;
}
/***********************************************/
final List<Widget> children = <Widget>[];
// 添加loading 图标
children.add(_buildLoadingIcon(style, _iconSize));
if (text != null && text.trim() != '') {
// 图标与文字距离
children.add(SizedBox(height: _blankHeight));
}
// add text
if (text != null && text.trim() != '') {
children.add(Text(text,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: _textSize,
decoration: TextDecoration.none)));
}
return Center(
child: ConstrainedBox(
constraints: BoxConstraints(
minWidth: _toastMinWidth,
maxWidth: _toastMaxWidth,
),
child: Container(
padding: _padding,
decoration: BoxDecoration(
color: Color(0xb3000000).withOpacity(_backgroundOpacity),
borderRadius: BorderRadius.all(
Radius.circular(4.0),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: children,
),
),
),
);
}
Widget _buildLoadingIcon(SJWidgetStyle style, double iconSize) {
var image = 'images/sj_loading.png';
if (style == SJWidgetStyle.sj) {
image = 'images/sj_loading.png';
}
var loadingIcon = Image.asset(
image,
package: 'sj_ui',
width: iconSize,
height: iconSize,
);
return LoadingAnimation(
duration: const Duration(milliseconds: 800),
image: loadingIcon,
);
}
}
调用
return Center(
child: SJLoading.loadingWidget(
text: '加载中',
),
);
网友评论