根據需求建立一個自定義的Widget

import 'package:flutter/material.dart';

enum AnimationType {

  ///圓圈模式

  circular,

  ///橫線模式

  Linear,

  ///重新整理模式

  refresh

}

class KSProgressDialog extends StatelessWidget {

  ///是否顯示

  final bool isShow;

  ///提醒內容

  final String? title;

  ///動畫效果    預設圓圈模式

  final AnimationType? showType;

  ///背景透明度

  final double? alpha;

  ///字型顏色

  final Color? textColor;

  ///方塊背景顏色

  final Color? itemColor;

  const KSProgressDialog(

      {Key? key,

      required this.isShow,

      this.title,

      this.showType = AnimationType.circular,

      this.alpha = 0.1,

      this.textColor = Colors.black,

      this.itemColor = Colors.black12})

      : super(key: key);

  @override

  Widget build(BuildContext context) {

    List<Widget> widgetList = [];

    //1.設定動畫效果

    var progressIndicator;

    var needWidth =

        0.0; //Linear 模式下需要設定寬度，不然的話就會佔滿全屏,傳遞文字過多的話需要傳遞一個寬度的引數過來，可自己完善

    switch (showType) {

      case AnimationType.circular:

        progressIndicator = CircularProgressIndicator(

          strokeWidth: 2, //線的寬度

          valueColor: AlwaysStoppedAnimation<Color>(Colors.white), //線的顏色

          backgroundColor: Colors.grey, //圓圈的背景色

        );

        break;

      case AnimationType.Linear:

        title == null ? needWidth = 100 : needWidth = 150;

        progressIndicator = LinearProgressIndicator(

          valueColor: AlwaysStoppedAnimation<Color>(Colors.white), //線的顏色

          backgroundColor: Colors.grey, //圓圈的背景

        );

        break;

      case AnimationType.refresh:

        progressIndicator = RefreshProgressIndicator(

          valueColor: AlwaysStoppedAnimation<Color>(Colors.white), //線的顏色

          backgroundColor: Colors.grey, //圓圈的背景色

        );

        break;

      default:

    }

    if (isShow) {

      Widget progressView;

      if (title == null) {

        progressView = Center(

          child: Container(

            width: needWidth > 0 ? needWidth : null,

            padding: needWidth > 0

                ? EdgeInsets.only(top: 40, bottom: 40, left: 10, right: 10)

                : EdgeInsets.all(30.0),

            decoration: BoxDecoration(

                color: itemColor, borderRadius: BorderRadius.circular(10.0)),

            child: Column(

              mainAxisSize: MainAxisSize.min,

              children: <Widget>[

                progressIndicator,

              ],

            ),

          ),

        );

      } else {

        progressView = Center(

          child: Container(

            width: needWidth > 0 ? needWidth : null,

            padding: const EdgeInsets.all(20.0),

            decoration: BoxDecoration(

                color: itemColor, borderRadius: BorderRadius.circular(4.0)),

            child: Column(

              mainAxisSize: MainAxisSize.min,

              children: <Widget>[

                progressIndicator,

                Container(

                  padding: const EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 0),

                  child: Text(

                    title!,

                    style: TextStyle(color: textColor, fontSize: 16.0),

                  ),

                )

              ],

            ),

          ),

        );

      }

      widgetList.add(Opacity(

        opacity: alpha!,

        child: new ModalBarrier(color: Colors.black38),

      ));

      widgetList.add(progressView);

    }

    return Stack(

      children: widgetList,

    );

  }

}

2. 使用舉例

@override

  Widget build(BuildContext context) {

    if (isLoading == false) {

      return Scaffold(

        appBar: AppBar(

          title: Text("測試"),

        ),

        body: ListView.builder(

          itemBuilder: (context, index) {

            return _orderItemView();

          },

          itemCount: 10,

        ),

      );

    } else {

      return Scaffold(

        appBar: AppBar(

          title: Text("測試"),

        ),

        body: KSProgressDialog(isShow: true),

      );

    }

  }

具體的效果可以根據自己的情況進行修改，複製即用！

demo地址:

https://github.com/Turboks/KSProgress

歡迎star✨！