Flutter炫酷指示器插件fancy_indicator的使用
Flutter炫酷指示器插件fancy_indicator的使用
1. 插件简介
FancyIndicator
是一个可自定义的Flutter小部件,用作带有渐变颜色、标签和动态动画的视觉指示器。它非常适合创建用户可以通过点击或拖动来操作的交互式指示器,提供直观的界面以选择值。
2. 展示效果
以下是 FancyIndicator
的两个示例效果:
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
更多关于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]!,
),
);
},
),
],
),
);
}
}
解释
- 依赖引入:我们在
pubspec.yaml
中引入了fancy_indicator
和carousel_slider
(用于轮播图)。 - 动画控制器:在
_MyHomePageState
中,我们创建了一个AnimationController
来控制指示器的动画。 - 轮播图:使用
CarouselSlider.builder
来构建轮播图,并设置了一些基本的轮播选项。 - 炫酷指示器:使用
FancyIndicator
来创建指示器,并设置了一些参数,如effect
(动画效果),count
(指示器的数量),以及itemBuilder
(用于构建每个指示器项的回调)。
这个示例展示了如何将fancy_indicator
与carousel_slider
结合使用来创建一个带有炫酷指示器的轮播图。你可以根据需要调整动画效果、颜色和样式。