Flutter材质霓虹风格指示器插件material_neumorphic_indicator的使用

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

Flutter 材质霓虹风格指示器插件 material_neumorphic_indicator 的使用

简介

material_neumorphic_indicator 是 Material Neumorphic 组件套件的一部分。它用于创建水平或垂直的霓虹风格进度条。

使用方法

一个指示器是一个可以显示百分比的水平或垂直条形图。类似于 ProgressBar，但它提供了 orientation 属性来指定方向。orientation 可以设置为 horizontal 或 vertical。

enum NeumorphicIndicatorOrientation { vertical, horizontal }

指示器接受以下参数：

  • padding: 指示器周围的间距。
  • width: 指示器的宽度。
  • height: 指示器的高度。
  • percent: 当前进度百分比（范围从 0 到 1）。

示例代码

以下是一个简单的示例，展示如何使用 NeumorphicIndicator 创建多个水平指示器：

import 'package:flutter/material.dart';
import 'package:material_neumorphic/material_neumorphic.dart'; // 导入 material_neumorphic 包

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('材料霓虹风格指示器示例'),
        ),
        body: Center(
          child: _buildIndicators(),
        ),
      ),
    );
  }

  Widget _buildIndicators() {
    final width = 14.0; // 设置指示器的宽度

    return SizedBox(
      height: 130, // 设置整个组件的高度
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center, // 水平居中对齐
        children: <Widget>[
          NeumorphicIndicator(
            width: width,
            percent: 0.4, // 第一个指示器的进度为 40%
          ),
          SizedBox(width: 10), // 添加间距
          NeumorphicIndicator(
            width: width,
            percent: 0.2, // 第二个指示器的进度为 20%
          ),
          SizedBox(width: 10),
          NeumorphicIndicator(
            width: width,
            percent: 0.5, // 第三个指示器的进度为 50%
          ),
          SizedBox(width: 10),
          NeumorphicIndicator(
            width: width,
            percent: 1, // 第四个指示器的进度为 100%
          ),
        ],
      ),
    );
  }
}

更多关于Flutter材质霓虹风格指示器插件material_neumorphic_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter材质霓虹风格指示器插件material_neumorphic_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用material_neumorphic_indicator插件的一个基本示例。这个插件允许你创建具有霓虹风格的指示器，非常适合为UI增添一些现代和动感的效果。

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

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

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

接下来，在你的Flutter应用中，你可以使用MaterialNeumorphicIndicator来创建霓虹风格的指示器。下面是一个简单的例子，展示了如何在一个页面上使用它：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Material Neumorphic Indicator Demo'),
        ),
        body: Center(
          child: NeumorphicIndicatorDemo(),
        ),
      ),
    );
  }
}

class NeumorphicIndicatorDemo extends StatefulWidget {
  @override
  _NeumorphicIndicatorDemoState createState() => _NeumorphicIndicatorDemoState();
}

class _NeumorphicIndicatorDemoState extends State<NeumorphicIndicatorDemo> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<int> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 5),
      vsync: this,
    )..repeat(reverse: true);

    _animation = IntTween(begin: 0, end: 4).animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        MaterialNeumorphicIndicator(
          count: 5,
          activeIndex: _animation.value,
          indicatorColor: Colors.blueAccent.withOpacity(0.8),
          indicatorSize: 20.0,
          indicatorSpacing: 10.0,
          dotWidth: 10.0,
          dotHeight: 10.0,
          indicatorStyle: NeumorphicIndicatorStyle.flat,
          borderRadius: BorderRadius.circular(20.0),
          neumorphicDepth: 5.0,
          neumorphicIntensity: 0.3,
        ),
        SizedBox(height: 20.0),
        Text('Active Index: ${_animation.value.toInt()}'),
      ],
    );
  }
}

代码说明：

  1. 依赖导入：首先，在pubspec.yaml中添加material_neumorphic_indicator依赖。

  2. 主应用：MyApp类是我们的主应用，它包含一个Scaffold，其中包含一个AppBar和一个居中的NeumorphicIndicatorDemo。

  3. 指示器演示：NeumorphicIndicatorDemo是一个有状态的组件，它使用SingleTickerProviderStateMixin来管理动画。

  4. 动画控制：在initState方法中，我们初始化了一个AnimationController来控制动画，并使用IntTween来在0到4之间动画化一个整数值，这个值表示当前激活的指示器索引。

  5. 指示器构建：在build方法中，我们构建了一个MaterialNeumorphicIndicator，并设置了它的各种属性，如指示器的颜色、大小、间距、样式、边框半径、霓虹深度和强度。

  6. 显示当前索引：我们还添加了一个Text组件来显示当前激活的指示器索引。

这个示例演示了如何创建一个循环动画的霓虹风格指示器，并实时更新其激活索引。你可以根据需要调整属性来定制指示器的外观。

回到顶部