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实现多种风格进度指示器.

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

相关推荐
励志成为嵌入式工程师7 分钟前
c语言简单编程练习9
c语言·开发语言·算法·vim
捕鲸叉37 分钟前
创建线程时传递参数给线程
开发语言·c++·算法
A charmer41 分钟前
【C++】vector 类深度解析:探索动态数组的奥秘
开发语言·c++·算法
Peter_chq44 分钟前
【操作系统】基于环形队列的生产消费模型
linux·c语言·开发语言·c++·后端
记录成长java2 小时前
ServletContext,Cookie,HttpSession的使用
java·开发语言·servlet
前端青山2 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
睡觉谁叫~~~2 小时前
一文解秘Rust如何与Java互操作
java·开发语言·后端·rust
音徽编程2 小时前
Rust异步运行时框架tokio保姆级教程
开发语言·网络·rust
观音山保我别报错2 小时前
C语言扫雷小游戏
c语言·开发语言·算法
小屁孩大帅-杨一凡3 小时前
java后端请求想接收多个对象入参的数据
java·开发语言