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

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

相关推荐
不会吃萝卜的兔子3 小时前
go webrtc - 1 go基本概念
开发语言·golang·webrtc
要做朋鱼燕3 小时前
【C++】 priority_queue 容器模拟实现解析
开发语言·c++·笔记·职场和发展
jiaway4 小时前
【C语言】第四课 指针与内存管理
c语言·开发语言·算法
励志不掉头发的内向程序员4 小时前
C++进阶——继承 (1)
开发语言·c++·学习
中国胖子风清扬6 小时前
Rust 序列化技术全解析:从基础到实战
开发语言·c++·spring boot·vscode·后端·中间件·rust
我就是全世界6 小时前
【存储选型终极指南】RustFS vs MinIO:5大维度深度对决,95%技术团队的选择秘密!
开发语言·分布式·rust·存储
yudiandian20146 小时前
【QT 5.12.12 打包-Windows 平台下】
开发语言·qt
要记得喝水6 小时前
C#某公司面试题(含题目和解析)--1
开发语言·windows·面试·c#·.net