Flutter 拟态风格进度条插件 material_neumorphic_progress 的使用

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

Flutter 拟态风格进度条插件 material_neumorphic_progress 的使用

Material Neumorphic Progress 是 Material Neumorphic 组件套件的一部分。

使用

NeumorphicProgress 是一种确定性进度条。确定性进度条在每个时间点都有一个具体的值，并且该值应该从 0.0 单调增加到 1.0，在该点时进度条完成。要创建一个确定性进度条，可以使用一个介于 0.0 和 1.0 之间的非空值。

NeumorphicProgress(
    height: 15, // 进度条的高度
    percent: 0.55, // 进度百分比，取值范围为 0.0 到 1.0
);

NeumorphicProgressIndeterminate 是一种不确定性进度条。不确定性进度条在每个时间点都没有具体的值，而是表示正在发生进度，但不表示剩余多少进度。要创建一个不确定性进度条，可以使用一个空值。

NeumorphicProgressIndeterminate(
    height: 15, // 进度条的高度
);

完整示例

以下是一个完整的 Flutter 应用程序示例，展示了如何使用 NeumorphicProgress 和 NeumorphicProgressIndeterminate：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Neumorphic Progress 示例'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // 确定性进度条
              NeumorphicProgress(
                height: 15,
                percent: 0.55, // 设置进度百分比
              ),
              SizedBox(height: 20), // 添加间距
              // 不确定性进度条
              NeumorphicProgressIndeterminate(
                height: 15,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

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

1 回复

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


当然，以下是如何在Flutter项目中使用material_neumorphic_progress插件来创建一个拟态风格进度条的示例代码。

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

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

然后，运行flutter pub get来获取依赖。

接下来，你可以在你的Flutter项目中使用NeuProgress组件来创建拟态风格的进度条。以下是一个完整的示例：

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

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

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

class NeuProgressDemo extends StatefulWidget {
  @override
  _NeuProgressDemoState createState() => _NeuProgressDemoState();
}

class _NeuProgressDemoState extends State<NeuProgressDemo> with SingleTickerProviderStateMixin {
  double _progress = 0.5;

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        NeuProgress(
          progress: _progress,
          color: Colors.blue,
          backgroundColor: Colors.grey.withOpacity(0.2),
          height: 20,
          borderRadius: BorderRadius.circular(10),
          isNeumorphic: true,
          neumorphicDepth: 4,
        ),
        SizedBox(height: 20),
        Slider(
          value: _progress,
          onChanged: (newValue) {
            setState(() {
              _progress = newValue;
            });
          },
          min: 0,
          max: 1,
        ),
      ],
    );
  }
}

解释

  1. 依赖添加：在pubspec.yaml文件中添加material_neumorphic_progress依赖。
  2. 导入包：在需要使用NeuProgress的Dart文件中导入material_neumorphic_progress包。
  3. 创建UI：
    • 使用NeuProgress组件来显示拟态风格的进度条。
    • 设置进度条的属性，如progress、color、backgroundColor、height、borderRadius、isNeumorphic和neumorphicDepth。
    • 使用Slider组件来动态改变进度条的进度值，并通过setState方法更新UI。

这个示例展示了如何创建并动态更新一个拟态风格的进度条。你可以根据需求调整进度条的样式和属性。

回到顶部