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

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

相关推荐
孤鸿玉12 小时前
Fluter InteractiveViewer 与ScrollView滑动冲突问题解决
flutter
叽哥18 小时前
Flutter Riverpod上手指南
android·flutter·ios
BG1 天前
Flutter 简仿Excel表格组件介绍
flutter
zhangmeng2 天前
FlutterBoost在iOS26真机运行崩溃问题
flutter·app·swift
恋猫de小郭2 天前
对于普通程序员来说 AI 是什么?AI 究竟用的是什么?
前端·flutter·ai编程
卡尔特斯2 天前
Flutter A GlobalKey was used multipletimes inside one widget'schild list.The ...
flutter
w_y_fan2 天前
Flutter 滚动组件总结
前端·flutter
醉过才知酒浓2 天前
Flutter Getx 的页面传参
flutter
火柴就是我3 天前
flutter 之真手势冲突处理
android·flutter
Speed1233 天前
`mockito` 的核心“打桩”规则
flutter·dart