当前位置：首页 > news >正文

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

news 2025/7/7 18:15:05

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

在这里插入图片描述

一、flutter_spinkit

引入flutter_spinkit

  # 多种风格的模糊进度指示器flutter_spinkit: ^5.1.0

效果示例

const spinkit = SpinKitRotatingCircle(color: Colors.white,size: 50.0,
);

final spinkit = SpinKitFadingCircle(itemBuilder: (BuildContext context, int index) {return DecoratedBox(decoration: BoxDecoration(color: index.isEven ? Colors.red : Colors.green,),);},
);

final spinkit = SpinKitSquareCircle(color: Colors.white,size: 50.0,controller: AnimationController(vsync: this, duration: const Duration(milliseconds: 1200)),
);

二、实现指示器效果

代码如下

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;}@overrideWidget 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,),)],),),);}
}