Flutter炫酷指示器插件fancy_indicator的使用

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

Flutter炫酷指示器插件fancy_indicator的使用

1. 插件简介

FancyIndicator 是一个可自定义的Flutter小部件,用作带有渐变颜色、标签和动态动画的视觉指示器。它非常适合创建用户可以通过点击或拖动来操作的交互式指示器,提供直观的界面以选择值。

2. 展示效果

以下是 FancyIndicator 的两个示例效果:

Fancy Indicator Example 1 Fancy Indicator Example 2

3. 使用示例

3.1 添加依赖

pubspec.yaml 文件中添加以下依赖:

dependencies:
  fancy_indicator: ^1.0.0
3.2 导入包并使用

在 Dart 文件中导入 fancy_indicator 包,并使用 FancyIndicator 小部件。以下是一个完整的示例代码:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: FancyIndicatorExample(),
      debugShowCheckedModeBanner: false,
    );
  }
}

/// Example of how FancyIndicator works
class FancyIndicatorExample extends StatelessWidget {
  /// Current humidity for triggering ValueListenableBuilder and updating the value
  final ValueNotifier<int> currentHumidity = ValueNotifier(0);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black, // 设置背景颜色为黑色
      body: SafeArea(
        child: SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          child: Row(
            children: [
              // 使用 FancyIndicator 小部件
              FancyIndicator(
                numberAppendix: "%", // 数字后缀,默认为 "%"
                gradientColors: const [
                  Color(0xFFD00D7E), // 渐变颜色1
                  Color(0xFF02B3E2), // 渐变颜色2
                  Color(0xFFD00D7E), // 渐变颜色3
                ],
                gradientColorsStops: const [
                  0.2, // 渐变颜色停止点1
                  0.7, // 渐变颜色停止点2
                  0.9, // 渐变颜色停止点3
                ],
                width: MediaQuery.of(context).size.width / 1.8, // 指示器宽度
                height: MediaQuery.of(context).size.height, // 指示器高度
                marker: const [20, 30, 50], // 标记点
                onSelectedNumber: (number) {
                  // 当用户选择某个数值时触发的回调函数
                  currentHumidity.value = number;
                },
                labelTextColor: Colors.white, // 标签文字颜色
                selectedTextColor: Colors.green, // 选中标签文字颜色
                measureItemColor: Colors.yellow, // 测量项颜色
                draggableButtonColor: Colors.white, // 可拖动按钮颜色
                draggableButtonIconsColor: Colors.red, // 可拖动按钮图标颜色
                draggableButtonCircleColor: Colors.grey, // 可拖动按钮圆圈颜色
                draggableButtonCircleAnimateColor: Colors.blue, // 可拖动按钮圆圈动画颜色
                labelTextSize: 18, // 标签文字大小
                selectedTextSize: 24, // 选中标签文字大小
              ),
              Expanded(
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    const Text(
                      "RETURN TEMPERATURE",
                      style: TextStyle(
                          color: Colors.grey, // 返回温度文字颜色
                          fontWeight: FontWeight.w500,
                          fontSize: 14),
                    ),
                    const SizedBox(height: 10),
                    const Text("20°C",
                        style: TextStyle(
                            color: Colors.white, // 返回温度值颜色
                            fontWeight: FontWeight.w500,
                            fontSize: 20)),
                    const SizedBox(height: 30),
                    const Text(
                      "CURRENT HUMIDITY",
                      style: TextStyle(
                          color: Colors.grey, // 当前湿度文字颜色
                          fontWeight: FontWeight.w500,
                          fontSize: 14),
                    ),
                    ValueListenableBuilder(
                        valueListenable: currentHumidity,
                        builder: (context, value, child) {
                          return Text(
                            "$value%", // 显示当前湿度值
                            style: const TextStyle(
                                color: Colors.white, // 当前湿度值颜色
                                fontWeight: FontWeight.w500,
                                fontSize: 60),
                            textAlign: TextAlign.center,
                          );
                        }),
                    const SizedBox(height: 10),
                    const SizedBox(height: 20),
                    const Text(
                      "ABSOLUTE HUMIDITY",
                      style: TextStyle(
                          color: Colors.grey, // 绝对湿度文字颜色
                          fontWeight: FontWeight.w500,
                          fontSize: 14),
                    ),
                    const SizedBox(height: 10),
                    const Text("4gr/ft3",
                        style: TextStyle(
                            color: Colors.white, // 绝对湿度值颜色
                            fontWeight: FontWeight.w500,
                            fontSize: 20)),
                    const SizedBox(height: 20),
                    SvgPicture.asset(
                      "assets/icons/alert.svg", // 替换为实际的SVG文件路径
                      width: 40,
                      height: 40,
                      colorFilter: const ColorFilter.mode(
                          Colors.yellow, BlendMode.srcIn), // 图标颜色过滤
                    ),
                    const SizedBox(height: 20),
                    Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: RichText(
                        text: const TextSpan(
                            text: "\u{1F7E1}", // 黄色警告符号
                            style: TextStyle(
                                color: Colors.white, // 警告符号颜色
                                fontSize: 10,
                                height: 1.5),
                            children: [
                              TextSpan(
                                text:
                                "- extreme humidity level.\nUse precaution for set-points outside of 20%-55%", // 提示信息
                                style: TextStyle(
                                    color: Colors.white, // 提示信息颜色
                                    fontSize: 14),
                              )
                            ]),
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter炫酷指示器插件fancy_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter炫酷指示器插件fancy_indicator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用Flutter中的fancy_indicator插件来创建炫酷指示器的代码示例。fancy_indicator是一个功能强大的Flutter包,可以用于创建各种动画效果和样式的指示器。

首先,确保你已经在pubspec.yaml文件中添加了fancy_indicator依赖:

dependencies:
  flutter:
    sdk: flutter
  fancy_indicator: ^2.0.0  # 请检查最新版本号

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

接下来是一个完整的示例代码,展示如何使用fancy_indicator来创建一个炫酷的轮播指示器:

import 'package:flutter/material.dart';
import 'package:fancy_indicator/fancy_indicator.dart';
import 'package:carousel_slider/carousel_slider.dart';

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

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

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

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

  final List<String> imgList = [
    'https://via.placeholder.com/600x300.png?text=Image+1',
    'https://via.placeholder.com/600x300.png?text=Image+2',
    'https://via.placeholder.com/600x300.png?text=Image+3',
    'https://via.placeholder.com/600x300.png?text=Image+4',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Fancy Indicator Demo'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: CarouselSlider.builder(
              itemCount: imgList.length,
              itemBuilder: (BuildContext context, int index, int realIndex) {
                final imageUrl = imgList[index];
                return Container(
                  child: Center(
                    child: Image.network(imageUrl, fit: BoxFit.cover, width: 1000),
                  ),
                );
              },
              options: CarouselOptions(
                height: 400.0,
                enlargeCenterPage: true,
                autoPlay: true,
                aspectRatio: 16 / 9,
                autoPlayInterval: Duration(seconds: 3),
                autoPlayAnimationDuration: Duration(milliseconds: 800),
                autoPlayCurve: Curves.fastOutSlowIn,
                pauseAutoPlayOnTouch: true,
              ),
            ),
          ),
          FancyIndicator(
            controller: _controller,
            count: imgList.length,
            effect: 'jumpingDot', // 你可以选择其他效果,例如 'wave', 'expand', 'fade', 'scale', 'slide', 'worm'
            duration: 1000,
            itemBuilder: (index, color, isActive) {
              return Container(
                width: isActive ? 12.0 : 8.0,
                height: isActive ? 12.0 : 8.0,
                margin: EdgeInsets.symmetric(horizontal: 4.0),
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: isActive ? Colors.blue : Colors.grey[400]!,
                ),
              );
            },
          ),
        ],
      ),
    );
  }
}

解释

  1. 依赖引入:我们在pubspec.yaml中引入了fancy_indicatorcarousel_slider(用于轮播图)。
  2. 动画控制器:在_MyHomePageState中,我们创建了一个AnimationController来控制指示器的动画。
  3. 轮播图:使用CarouselSlider.builder来构建轮播图,并设置了一些基本的轮播选项。
  4. 炫酷指示器:使用FancyIndicator来创建指示器,并设置了一些参数,如effect(动画效果),count(指示器的数量),以及itemBuilder(用于构建每个指示器项的回调)。

这个示例展示了如何将fancy_indicatorcarousel_slider结合使用来创建一个带有炫酷指示器的轮播图。你可以根据需要调整动画效果、颜色和样式。

回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!