Flutter彩色进度指示器插件scrumlab_colored_progress_indicators的使用

Flutter彩色进度指示器插件scrumlab_colored_progress_indicators的使用

scrumlab_colored_progress_indicators 是一个用于Flutter的进度指示器插件，支持彩色的圆形进度指示器、线性进度指示器和刷新指示器，并且具有Google颜色主题。

特性

• 彩色圆形进度指示器
• 彩色线性进度指示器
• 彩色刷新指示器

开始使用

在你的Flutter项目的pubspec.yaml文件中添加以下依赖：

dependencies:
  ...
  scrumlab_colored_progress_indicators: ^1.2.0-nullsafety.0

在你的库中添加以下导入：

import 'package:scrumlab_colored_progress_indicators/scrumlab_colored_progress_indicators.dart';

然后运行 flutter pub get。

使用方法

圆形进度指示器

child: ColoredCircularProgressIndicator()

线性进度指示器

child: ColoredLinearProgressIndicator()

刷新指示器

child: ColoredRefreshIndicator(
  child: SingleChildScrollView(
    physics: AlwaysScrollableScrollPhysics(),
    child: ...
  )
)

属性

这些指示器的属性与Flutter官方的CircularProgressIndicator、LinearProgressIndicator和RefreshIndicator相同，但不包括valueColor或color属性（因为这些属性会随着颜色动画变化）。

更多示例

以下是完整的示例代码，展示了如何在应用中使用该插件。

import 'package:flutter/material.dart';
import 'package:scrumlab_colored_progress_indicators/scrumlab_colored_progress_indicators.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ColoredProgressDemo(),
    );
  }
}

class ColoredProgressDemo extends StatefulWidget {
  [@override](/user/override)
  _ColoredProgressDemoState createState() => _ColoredProgressDemoState();
}

class _ColoredProgressDemoState extends State<ColoredProgressDemo> {
  Future<void> _refreshState() async {
    await Future.delayed(Duration(seconds: 7));
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        title: Text("Scroll from top for Refresh Indicator"),
      ),
      body: ColoredRefreshIndicator(
        onRefresh: () => _refreshState(),
        child: SingleChildScrollView(
          padding: EdgeInsets.symmetric(vertical: 20.0),
          physics: AlwaysScrollableScrollPhysics(),
          child: Center(
            child: Column(
              children: [
                Text(
                  "Without Colorful Accents (default)",
                  textScaleFactor: 2.0,
                  textAlign: TextAlign.center,
                  style: TextStyle(decoration: TextDecoration.underline),
                ),
                SizedBox(height: 50.0),
                SizedBox(
                  height: 100.0,
                  width: 100.0,
                  child: CircularProgressIndicator(strokeWidth: 8.0),
                ),
                SizedBox(height: 50.0),
                SizedBox(
                  width: 400.0,
                  child: LinearProgressIndicator(),
                ),
                SizedBox(height: 80.0),
                Text(
                  "With Colorful Accents",
                  textScaleFactor: 2.0,
                  textAlign: TextAlign.center,
                  style: TextStyle(decoration: TextDecoration.underline),
                ),
                SizedBox(height: 50.0),
                SizedBox(
                  width: 100.0,
                  height: 100.0,
                  child: ColoredCircularProgressIndicator(strokeWidth: 8.0),
                ),
                SizedBox(height: 50.0),
                SizedBox(
                  width: 400.0,
                  child: ColoredLinearProgressIndicator(),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}