Flutter 网络请求过渡动画,全局Alart文言提示
2020-08-22 本文已影响0人
技术混子
插件:loading_indicator_view: ^1.1.0
复制 下述代码进项目中 调用即可:
封装类:
import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:loading_indicator_view/loading_indicator_view.dart';
class ShowLoading extends StatefulWidget {
final String title;
const ShowLoading({Key key, this.title}) : super(key: key);
@override
_ShowLoadingState createState() => _ShowLoadingState();
}
class _ShowLoadingState extends State<ShowLoading> {
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
width: 120,
height: 120,
child: Material(
elevation: 24.0,
color: Theme.of(context).dialogBackgroundColor,
type: MaterialType.card,
//在这里修改成我们想要显示的widget就行了,外部的属性跟其他Dialog保持一致
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
BallSpinFadeLoaderIndicator(
ballColor: Colors.black87,
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: new Text(widget.title),
),
],
),
)),
);
}
}
// 请求 成功 提示框
class ShowSuccess extends StatefulWidget {
final String title;
const ShowSuccess({Key key, this.title}) : super(key: key);
@override
_ShowSuccessState createState() => _ShowSuccessState();
}
class _ShowSuccessState extends State<ShowSuccess> {
/// 倒计时的计时器。
Timer _timer;
/// 启动倒计时的计时器。
_startTimer() {
_timer = Timer(
// 持续时间参数。
Duration(seconds: 2),
// 回调函数参数。
() {
Navigator.of(context).pop(true);
},
);
}
@override
void initState() {
// TODO: implement initState
super.initState();
//启动倒计时
_startTimer();
// _openAlertDialog();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_timer.cancel();
}
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
width: 120,
height: 120,
child: Material(
borderRadius: BorderRadius.circular(10),
elevation: 24.0,
color: Theme.of(context).dialogBackgroundColor,
type: MaterialType.card,
//在这里修改成我们想要显示的widget就行了,外部的属性跟其他Dialog保持一致
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.done,
size: 50,
color: Colors.black87,
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: new Text(widget.title),
),
],
),
)),
);
}
}
// 请求 成功 提示框
class ShowAlart extends StatefulWidget {
final String title;
const ShowAlart({Key key, this.title}) : super(key: key);
@override
_ShowAlartState createState() => _ShowAlartState();
}
class _ShowAlartState extends State<ShowAlart> {
/// 倒计时的计时器。
Timer _timer;
/// 启动倒计时的计时器。
_startTimer() {
_timer = Timer(
// 持续时间参数。
Duration(seconds: 2),
// 回调函数参数。
() {
Navigator.of(context).pop(true);
},
);
}
@override
void initState() {
// TODO: implement initState
super.initState();
//启动倒计时
_startTimer();
// _openAlertDialog();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_timer.cancel();
}
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
width: 180,
height: 60,
child: Material(
borderRadius: BorderRadius.circular(10),
elevation: 24.0,
color: Theme.of(context).dialogBackgroundColor,
type: MaterialType.card,
//在这里修改成我们想要显示的widget就行了,外部的属性跟其他Dialog保持一致
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 5),
child: new Text(widget.title),
),
],
),
)),
);
}
}
// 请求 失败 提示框
class ShowError extends StatefulWidget {
final String title;
const ShowError({Key key, this.title}) : super(key: key);
@override
_ShowErrorState createState() => _ShowErrorState();
}
class _ShowErrorState extends State<ShowError> {
/// 倒计时的计时器。
Timer _timer;
/// 启动倒计时的计时器。
_startTimer() {
_timer = Timer(
// 持续时间参数。
Duration(seconds: 2),
// 回调函数参数。
() {
Navigator.of(context).pop(true);
},
);
}
@override
void initState() {
// TODO: implement initState
super.initState();
//启动倒计时
_startTimer();
// _openAlertDialog();
}
@override
void dispose() {
// TODO: implement dispose
super.dispose();
_timer.cancel();
}
@override
Widget build(BuildContext context) {
return Center(
child: SizedBox(
width: 120,
height: 120,
child: Material(
borderRadius: BorderRadius.circular(10),
elevation: 24.0,
color: Theme.of(context).dialogBackgroundColor,
type: MaterialType.card,
//在这里修改成我们想要显示的widget就行了,外部的属性跟其他Dialog保持一致
child: new Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.close,
size: 50,
color: Colors.black87,
),
Padding(
padding: const EdgeInsets.only(top: 20),
child: new Text(widget.title),
),
],
),
)),
);
}
}
在需要使用的class中如下例调用
例---->
/* 加载数据的 loading 动画 */
static Future _showAlertDialog(String message) async {
await showDialog(
barrierColor: Color(0x00000001),
context: Router.navigatorState.currentState.context,
barrierDismissible: false,
builder: (BuildContext context) {
return ShowLoading(
title: message,
);
},
);
}