根據需求創(chuàng)建一個自定義的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?唤衫！
