Flutter进度条展示插件progress_line的使用

发布于 1周前 作者 sinazl 来自 Flutter

好的，以下是关于“Flutter进度条展示插件progress_line的使用”的完整示例demo：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Progress Line Demo')),
        body: Center(
          child: ProgressLineWidget(
            percent: 0.7,
            lineWidth: 2,
            lineColors: const [
              Colors.purple,
              Colors.pink,
              Colors.red,
              Colors.orange,
              Colors.yellow,
              Colors.lightGreenAccent,
              Colors.lightGreen,
              Colors.green,
            ],
            bgColor: Colors.grey.withOpacity(0.4),
            innerPadding: const EdgeInsets.all(20),
            outerPadding: const EdgeInsets.only(left: 16),
            width: 180,
            height: 100,
            animationDuration: const Duration(seconds: 5),
            start: Text(
              ('value * 100').toStringAsFixed(0),
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            end: Text(
              ((1 - value) * 100).toStringAsFixed(0),
              style: TextStyle(fontSize: 20, color: Colors.black),
            ),
            callback: (value) {
              setState(() {
                _value = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

示例代码说明：

  1. 导入包：首先导入 package:progress_line/progress_line.dart。 2 ```dart import ‘package:flutter/material.dart’; import ‘package:progress_line/progress_line.dart’;

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter中使用progress_line插件来展示进度条的代码示例。假设你已经在pubspec.yaml文件中添加了progress_line依赖并运行了flutter pub get。

首先，确保你的pubspec.yaml文件包含以下依赖：

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

然后，你可以在你的Flutter项目中创建一个简单的页面来展示进度条。以下是一个完整的示例代码：

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

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

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

class ProgressLineDemo extends StatefulWidget {
  @override
  _ProgressLineDemoState createState() => _ProgressLineDemoState();
}

class _ProgressLineDemoState extends State<ProgressLineDemo> with SingleTickerProviderStateMixin {
  double _progress = 0.0;

  @override
  void initState() {
    super.initState();
    // 模拟进度增加
    _startProgress();
  }

  void _startProgress() {
    Timer.periodic(Duration(milliseconds: 100), (Timer timer) {
      setState(() {
        if (_progress < 1.0) {
          _progress += 0.01;
        } else {
          timer.cancel();
        }
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Progress Line Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            SizedBox(
              height: 50,
            ),
            ProgressLine(
              percentage: _progress,
              lineHeight: 20.0,
              lineColor: Colors.blue,
              backgroundColor: Colors.grey[200]!,
              padding: EdgeInsets.symmetric(horizontal: 20.0),
              borderRadius: BorderRadius.circular(25.0),
            ),
            SizedBox(
              height: 20,
            ),
            Text(
              'Progress: ${(_progress * 100).toInt()}%',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个名为ProgressLineDemo的页面，该页面包含一个进度条和一个显示当前进度的文本。进度条使用了ProgressLine组件，并通过Timer.periodic方法模拟进度的增加。

  • percentage属性用于设置进度条的当前进度。
  • lineHeight属性用于设置进度条的高度。
  • lineColor属性用于设置进度条的颜色。
  • backgroundColor属性用于设置进度条背景的颜色。
  • padding属性用于设置进度条的内边距。
  • borderRadius属性用于设置进度条的圆角。

你可以根据需要调整这些属性以适应你的应用设计。

回到顶部