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,
    );
  },
);
  }
上一篇下一篇

猜你喜欢

热点阅读