Flutter椭圆形进度条插件elliptical_progress_bar的使用

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

Flutter椭圆形进度条插件elliptical_progress_bar的使用

新特性

  • 进度条现在是Stateful
  • 添加了带有动画的新进度条 AnimatedEllipticalProgressBar

特性

  • 响应式
  • 可定制
  • 简单易用的样式设置

安装

flutter pub add elliptical_progress_bar

注意事项

进度条的宽高比为3:1，请根据需要调整厚度。

使用方法

动画椭圆进度条 (AnimatedEllipticalProgressBar)

import 'package:flutter/material.dart';
import 'package:elliptical_progress_bar/animated_elliptical_progress_bar.dart';

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Elliptical progress bar'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: AnimatedEllipticalProgressBar(
            fillColor: Colors.grey,
            bgColor: Colors.black.withOpacity(0.5),
            thickness: 20,
            progress: 80,
            textColor: Colors.red,
            progressTextStyle: const TextStyle(fontSize: 30),
          ),
        ),
      ),
    );
  }
}

椭圆进度条 (无动画)

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

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Elliptical progress bar'),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: EllipticalProgressBar(
            fillColor: Colors.red,
            bgColor: Colors.red.withOpacity(0.5),
            thickness: 30,
            progress: 70,
            textColor: Colors.blue,
            showCenterProgress: false,
          ),
        ),
      ),
    );
  }
}

属性说明

名称 类型 描述
fillColor Color 进度条的颜色
bgColor Color 背景颜色
progress double 进度值（0 - 100）
textColor Color, optional 中心进度文本的颜色
showCenterProgress bool, 默认 true, optional 是否显示中心进度值，false则隐藏
thickness double, 默认 10, optional 设置进度条的厚度
progressTextStyle TextStyle, optional 自定义中心进度文本样式

完整示例 Demo

import 'package:elliptical_progress_bar/elliptical_progress_bar.dart';
import 'package:elliptical_progress_bar/animated_elliptical_progress_bar.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      darkTheme: ThemeData.light(),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  double progress = 50;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Elliptical progress bar'),
        backgroundColor: Colors.deepOrange,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              const SizedBox(height: 20),
              Row(
                children: [
                  Expanded(
                    child: EllipticalProgressBar(
                      fillColor: Colors.green,
                      bgColor: Colors.green.withOpacity(0.5),
                      progress: 70,
                      thickness: 5,
                      disableAnimation: true,
                      progressTextStyle: const TextStyle(
                        color: Colors.white,
                        fontSize: 22,
                        fontWeight: FontWeight.w800,
                      ),
                      showCenterProgress: true,
                    ),
                  ),
                  const SizedBox(width: 10),
                  Expanded(
                    child: EllipticalProgressBar(
                      fillColor: Colors.blue,
                      bgColor: Colors.blue.withOpacity(0.5),
                      progress: 50,
                      textColor: Colors.black,
                      disableAnimation: true,
                    ),
                  ),
                  const SizedBox(width: 10),
                ],
              ),
              const SizedBox(height: 20),
              EllipticalProgressBar(
                fillColor: Colors.yellow,
                bgColor: Colors.orange.withOpacity(0.5),
                progress: 20,
                disableAnimation: true,
                textColor: Colors.blueAccent,
                progressTextStyle: TextStyle(
                  fontSize: 30,
                  fontWeight: FontWeight.bold,
                  color: Colors.orange.withOpacity(0.5),
                ),
              ),
              const SizedBox(height: 20),
              AnimatedEllipticalProgressBar(
                fillColor: Colors.grey,
                bgColor: Colors.black.withOpacity(0.5),
                thickness: 20,
                progress: progress,
                textColor: Colors.red,
                progressTextStyle: const TextStyle(fontSize: 30),
              ),
              const SizedBox(height: 20),
              EllipticalProgressBar(
                fillColor: Colors.red,
                bgColor: Colors.red.withOpacity(0.5),
                thickness: 30,
                progress: 85,
                disableAnimation: true,
                progressTextStyle: const TextStyle(fontSize: 30, color: Colors.red),
              ),
              const SizedBox(height: 20),
              EllipticalProgressBar(
                fillColor: Colors.purple,
                bgColor: Colors.purple.withOpacity(0.5),
                thickness: 40,
                progress: 100,
                showCenterProgress: false,
                progressTextStyle: const TextStyle(fontSize: 30),
              ),
              const SizedBox(height: 20),
              EllipticalProgressBar(
                fillColor: Colors.grey,
                bgColor: Colors.black.withOpacity(0.5),
                thickness: 20,
                progress: progress,
                textColor: Colors.red,
                progressTextStyle: const TextStyle(fontSize: 30),
              ),
              const SizedBox(height: 20),
              SizedBox(
                height: 40,
                child: TextButton(
                  style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.deepOrange),
                  ),
                  onPressed: () {
                    setState(() {
                      if (progress == 100) {
                        progress = 50;
                      } else {
                        progress = 100;
                      }
                    });
                  },
                  child: const Text(
                    '点击我',
                    style: TextStyle(fontSize: 20, color: Colors.white),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

以上代码展示了如何在Flutter应用中使用elliptical_progress_bar插件，并提供了不同配置下的椭圆形进度条示例。


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

Harmonyos Next教程
1 回复

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


当然，下面是一个关于如何使用Flutter中的elliptical_progress_bar插件来创建椭圆形进度条的示例代码。这个插件允许你轻松地创建一个椭圆形进度条，并且提供了多种自定义选项。

首先，确保你的pubspec.yaml文件中已经添加了elliptical_progress_bar依赖：

dependencies:
  flutter:
    sdk: flutter
  elliptical_progress_bar: ^latest_version  # 请替换为最新版本号

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

接下来，在你的Dart文件中，你可以按照以下方式使用EllipticalProgressBar：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Elliptical Progress Bar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Elliptical Progress Bar Demo'),
        ),
        body: Center(
          child: EllipticalProgressBarDemo(),
        ),
      ),
    );
  }
}

class EllipticalProgressBarDemo extends StatefulWidget {
  @override
  _EllipticalProgressBarDemoState createState() => _EllipticalProgressBarDemoState();
}

class _EllipticalProgressBarDemoState extends State<EllipticalProgressBarDemo> with SingleTickerProviderStateMixin {
  double _progress = 50.0;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        SizedBox(
          height: 200,
          width: 200,
          child: EllipticalProgressBar(
            progress: _progress / 100,
            backgroundColor: Colors.grey[200]!,
            progressColor: Colors.blue,
            strokeWidth: 10.0,
            padding: EdgeInsets.all(10.0),
            direction: Axis.horizontal, // 可以是 Axis.horizontal 或 Axis.vertical
          ),
        ),
        SizedBox(height: 20),
        Slider(
          value: _progress.toDouble(),
          min: 0,
          max: 100,
          onChanged: (value) {
            setState(() {
              _progress = value.toDouble();
            });
          },
        ),
      ],
    );
  }
}

代码解释：

  1. 依赖导入：首先，导入flutter和elliptical_progress_bar包。
  2. 应用入口：MyApp类作为应用的入口，定义了应用的主题和主页。
  3. 演示页面：EllipticalProgressBarDemo是一个有状态的组件，用于演示椭圆形进度条的使用。
  4. 进度条配置：
    • progress：当前进度，值范围在0到1之间。
    • backgroundColor：背景颜色。
    • progressColor：进度条颜色。
    • strokeWidth：进度条的宽度。
    • padding：进度条的内边距。
    • direction：进度条的方向，可以是水平（Axis.horizontal）或垂直（Axis.vertical）。
  5. 滑块控件：用于动态调整进度条的进度，并通过setState方法更新UI。

这个示例展示了如何使用elliptical_progress_bar插件来创建一个简单的椭圆形进度条，并通过滑块控件来动态调整进度。你可以根据需求进一步自定义进度条的样式和行为。

回到顶部