美文网首页
Flutter 网络请求过渡动画,全局Alart文言提示

Flutter 网络请求过渡动画,全局Alart文言提示

作者: 技术混子 | 来源:发表于2020-08-22 21:43 被阅读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,
        );
      },
    );
      }
    

    相关文章

      网友评论

          本文标题:Flutter 网络请求过渡动画,全局Alart文言提示

          本文链接:https://www.haomeiwen.com/subject/odxpjktx.html