flutter开发实战-flutter_spinkit实现多种风格进度指示器

flutter开发实战-flutter_spinkit实现多种风格进度指示器

最近开发过程中flutter_spinkit,这个拥有多种种风格加载指示器

一、flutter_spinkit

引入flutter_spinkit

dart 复制代码
  # 多种风格的模糊进度指示器
  flutter_spinkit: ^5.1.0

效果示例

dart 复制代码
const spinkit = SpinKitRotatingCircle(
  color: Colors.white,
  size: 50.0,
);
dart 复制代码
final spinkit = SpinKitFadingCircle(
  itemBuilder: (BuildContext context, int index) {
    return DecoratedBox(
      decoration: BoxDecoration(
        color: index.isEven ? Colors.red : Colors.green,
      ),
    );
  },
);
dart 复制代码
final spinkit = SpinKitSquareCircle(
  color: Colors.white,
  size: 50.0,
  controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)),
);

二、实现指示器效果

代码如下

dart 复制代码
import 'package:flutter/material.dart';
import 'package:flutter_spinkit/flutter_spinkit.dart';

/// 加载中
class LoadingWidget extends StatelessWidget {
  const LoadingWidget({this.bgColor, Key? key}) : super(key: key);

  final Color? bgColor;

  Color getColorAtIndex(int index) {
    if (index == 0) {
      return Colors.deepOrangeAccent;
    }

    if (index == 1) {
      return Colors.redAccent;
    }

    if (index == 1) {
      return Colors.lightBlueAccent;
    }

    return Colors.white70;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      color: bgColor != null ? bgColor : Colors.white,
      child: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            SizedBox(
              width: 300.0,
              height: 60.0,
              child: SpinKitThreeBounce(
                size: 40.0,
                itemBuilder: (BuildContext context, int index) {
                  return DecoratedBox(
                      decoration: BoxDecoration(
                          color: getColorAtIndex(index),
                          shape: BoxShape.circle));
                },
              ),
            ),
            Padding(padding: const EdgeInsets.only(top: 20)),
            Text(
              //S.of(context).viewStateLoading,
              "正在加载中,一会就到了",
              style: TextStyle(
                fontSize: 18,
                fontWeight: FontWeight.w500,
                fontStyle: FontStyle.normal,
                color: Colors.white,
                decoration: TextDecoration.none,
              ),
            )
          ],
        ),
      ),
    );
  }
}

三、小结

flutter开发实战-flutter_spinkit实现多种风格进度指示器.

学习记录,每天不停进步。

相关推荐
咖啡续命又一天19 分钟前
python 自动化采集 ChromeDriver 安装
开发语言·python·自动化
huohaiyu1 小时前
synchronized (Java)
java·开发语言·安全·synchronized
_OP_CHEN1 小时前
C++基础:(九)string类的使用与模拟实现
开发语言·c++·stl·string·string类·c++容器·stl模拟实现
蓝天智能1 小时前
QT MVC中View的特点及使用注意事项
开发语言·qt·mvc
木觞清2 小时前
喜马拉雅音频链接逆向实战
开发语言·前端·javascript
wuxuanok2 小时前
苍穹外卖 —— 公共字段填充
java·开发语言·spring boot·spring·mybatis
偷光2 小时前
浏览器中的隐藏IDE: Console (控制台) 面板
开发语言·前端·ide·php
LL_break3 小时前
线程1——javaEE 附面题
java·开发语言·面试·java-ee
MOON404☾3 小时前
Rust 与 传统语言:现代系统编程的深度对比
开发语言·后端·python·rust
先知后行。3 小时前
Reactor模型和类图设计
java·开发语言