Flutter进度值显示按钮插件progress_value

Flutter进度值显示按钮插件progress_value_button的使用

插件介绍

progress_value_button 是一个用于创建带有平滑动画的进度按钮的插件。它允许你设置进度百分比，并在用户点击时触发回调函数。

示例代码

下面是一个完整的示例代码，展示了如何使用 progress_value_button 插件来创建一个进度按钮。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Progress Button App",
      debugShowCheckedModeBanner: false,
      home: HomeScreen(),
    );
  }
}

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

  [@override](/user/override)
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  bool _loaded = false;
  [@override](/user/override)
  void initState() {
    super.initState();
    Future.delayed(Duration(milliseconds: 2000), () {
      setState(() {
        _loaded = true;
      });
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _loaded
            ? ProgressValueButton(
                value: 10.0,
                animationDuration: Duration(milliseconds: 8000),
                height: 65.0,
                onPressed: (progress) {},
                margin: const EdgeInsets.all(10.0),
                child: Text(
                  "Uploading...",
                  style: TextStyle(
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                    fontSize: 18.0,
                  ),
                ),
              )
            : Container(),
      ),
    );
  }
}

更多关于Flutter进度值显示按钮插件progress_value_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

htzhanglong 1楼•6 天前

更多关于Flutter进度值显示按钮插件progress_value_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，以下是如何在Flutter应用中使用progress_value_button插件的一个示例代码案例。这个插件允许你创建一个带有进度显示的按钮，非常适合用于下载、上传等需要显示进度的场景。

首先，你需要在pubspec.yaml文件中添加progress_value_button依赖：

dependencies:
  flutter:
    sdk: flutter
  progress_value_button: ^最新版本号  # 请替换为实际最新版本号

然后运行flutter pub get来安装依赖。

接下来是一个简单的示例代码，展示如何使用ProgressValueButton：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ProgressValueButton Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  double _progressValue = 0.0;

  void _startProgress() async {
    setState(() {
      _progressValue = 0.0;
    });
    for (int i = 0; i <= 100; i++) {
      await Future.delayed(Duration(milliseconds: 50)); // 模拟进度变化
      setState(() {
        _progressValue = i.toDouble();
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ProgressValueButton Demo'),
      ),
      body: Center(
        child: ProgressValueButton(
          progress: _progressValue,
          child: Text('Start Progress'),
          onPressed: () {
            if (_progressValue < 100) {
              _startProgress();
            } else {
              // 重置进度值，以便可以再次点击开始
              setState(() {
                _progressValue = 0.0;
              });
            }
          },
          progressColor: Colors.blue,
          completedColor: Colors.green,
          linearStrokeCap: RoundCap.round,
          width: 200,
          height: 50,
          borderRadius: BorderRadius.circular(25),
          textStyle: TextStyle(color: Colors.white, fontSize: 18),
        ),
      ),
    );
  }
}

在这个示例中：

ProgressValueButton被用来创建一个带有进度显示的按钮。
progress属性设置了当前的进度值。
onPressed回调在按钮被点击时触发，这里用来模拟一个进度从0到100的变化。
progressColor和completedColor分别设置了进度条未完成和完成时的颜色。
linearStrokeCap、width、height和borderRadius等属性用来定制按钮的外观。

你可以根据实际需求调整这些属性，以实现你想要的效果。