Flutter进度显示插件jprogress的使用

Flutter进度显示插件jprogress的使用

JProgress 是一个包含基于时间的进度控件的包，并且允许用户根据选择设置值。

特性

• 时间控制 – 开始 - 停止 - 持续时间等

入门指南

• 圆形定时进度
• 圆形自定义进度
• 线性定时进度
• 线性自定义进度

使用方法

要使用 ProgressController，必须初始化并释放资源。

late ProgressController controller;

[@override](/user/override)
void initState() {
  controller = ProgressController(
    duration: const Duration(minutes: 3), // 设置持续时间为3分钟
    timeFormat: DateFormatN.SecMin, // 设置时间格式为秒和分钟
    tickPeriod: const Duration(milliseconds: 1000), // 设置每次更新的时间间隔为1秒
  );
  super.initState();
}

// 释放资源
[@override](/user/override)
void dispose() {
  controller.dispose(); // 释放控制器资源
  super.dispose();
}

额外信息

由 Just Codes Developers 提供。 “JProgress”

完整示例代码

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // 这是应用的根组件
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'JProgress 示例',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late ProgressController controller;
  String b = "";

  [@override](/user/override)
  void initState() {
    controller = ProgressController(
      duration: const Duration(minutes: 3),
      timeFormat: DateFormatN.SecMin,
      tickPeriod: const Duration(milliseconds: 1000),
    );
    super.initState();
  }

  [@override](/user/override)
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          const SizedBox(
            height: 10,
          ),
          Expanded(
            child: ListView(
              children: [
                progress(),
                button("定时进度圆圈", "1"),
                button("定时进度线性", "2"),
                button("仅定时", "3"),
                button("自定义进度圆圈", "4"),
                button("自定义进度线性", "5"),
              ],
            ),
          ),
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: const Icon(Icons.stop),
        onPressed: () {
          controller.stop();
        },
      ),
    );
  }

  Widget progress() {
    switch (b) {
      case "1":
        return CountdownProgress(
          controller: controller,
          valueColor: Colors.blue,
          backgroundColor: Colors.white,
          textStyle: Theme.of(context).textTheme.overline,
          strokeWidth: 3.0,
          progressWidget: ProgressWidget.Indicator,
          progressType: ProgressType.Circular,
          size: 150,
          onTimeout: () => controller.stop(), // 超时后停止或执行其他操作
          onUpdate: () {
            setState(() {}); // 更新UI
          },
        );
      case "2":
        return CountdownProgress(
          controller: controller,
          valueColor: Colors.red,
          backgroundColor: Colors.white,
          textStyle: Theme.of(context).textTheme.overline,
          strokeWidth: 3.0,
          progressWidget: ProgressWidget.Indicator,
          progressType: ProgressType.Linear,
          size: 90,
          onTimeout: () => controller.stop(), // 超时后停止或执行其他操作
          onUpdate: () {
            setState(() {}); // 更新UI
          },
        );
      case "3":
        return CountdownProgress(
          controller: controller,
          size: 90,
          onTimeout: () => controller.stop(), // 超时后停止或执行其他操作
          onUpdate: () {
            setState(() {}); // 更新UI
          },
        );
      case "4":
        return CustomProgress(
          valueColor: Colors.red,
          backgroundColor: Colors.white,
          textStyle: Theme.of(context).textTheme.overline,
          strokeWidth: 3.0,
          progressType: ProgressType.Circular,
          size: 90,
          title: "你好",
          value: controller.valuePercent,
        );
      case "5":
        return CustomProgress(
          valueColor: Colors.red,
          backgroundColor: Colors.white,
          textStyle: Theme.of(context).textTheme.overline,
          strokeWidth: 3.0,
          size: 90,
          title: "你好",
          progressType: ProgressType.Linear,
          value: controller.valuePercent,
        );
      default:
        return const SizedBox(
          height: 1,
        );
    }
  }

  Widget button(String title, String p) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: InkWell(
        onTap: () {
          controller.start(); // 开始计数
          setState(() => b = p); // 更新当前选中的进度类型
        },
        child: Container(
          height: 50,
          width: 80,
          decoration: const BoxDecoration(
              color: Colors.grey,
              borderRadius: BorderRadius.all(Radius.circular(20))),
          child: Center(
            child: Text(
              title,
              style: const TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                  fontSize: 14),
            ),
          ),
        ),
      ),
    );
  }
}