Flutter霓虹灯效果插件simple_neon的使用
Flutter霓虹灯效果插件simple_neon的使用
Simple Neon 2.0.0
一个包含一系列霓虹灯风格小部件和动态星空背景的Flutter包，旨在创建未来感十足且视觉冲击力强的用户界面。
✨ 特性
- 霓虹灯风格小部件：按钮、文本字段、卡片、容器、滑块、进度条和带有发光效果的文本。
- 星空背景：包括动画星星和流星，以增强视觉吸引力。
- 可定制设计：调整发光强度、颜色和其他属性。
- 即用型组件：预构建的小部件可以无缝集成。
- 跨平台：适用于Android、iOS、Web和桌面。
🛠 安装
在pubspec.yaml文件中添加包：
dependencies:
simple_neon: ^2.0.0
使用Flutter命令安装：
flutter pub get
将包导入到你的项目中：
import 'package:simple_neon/simple_neon.dart';
🧩 包含的小部件
1. NeonButton
一个带有自定义图标、大小和颜色的发光按钮。
NeonButton(
icon: Icons.star,
onPressed: () {
print("Neon Button Pressed!");
},
neonColor: Colors.cyanAccent,
size: 60.0,
);
2. NeonCard
一个带有霓虹灯发光边框的容器，用于组合小部件。
NeonCard(
neonColor: Colors.pinkAccent,
children: [
NeonText(text: "Welcome to Neon World!", neonColor: Colors.greenAccent),
NeonTextButton(
text: "Get Started",
onPressed: () {},
neonColor: Colors.blueAccent,
),
],
);
3. NeonContainer
一个完全可自定义的霓虹灯容器，具有可调节的宽度、高度、发光半径和圆角。
NeonContainer(
width: 200.0,
height: 100.0,
neonColor: Colors.cyanAccent,
glowRadius: 20.0,
child: Center(
child: NeonText(text: "Inside NeonContainer"),
),
);
4. NeonProgressBar
一个进度指示器，可以分段并发出霓虹灯光。
NeonProgressBar(
progress: 0.5, // 值介于0和1之间
neonColor: Colors.greenAccent,
height: 20.0,
);
5. NeonSlider
一个带有可选分段的霓虹灯风格滑块，非常适合用于音量或亮度控制。
NeonSlider(
value: 0.3, // 值介于0和1之间
neonColor: Colors.orangeAccent,
onChanged: (newValue) {
print("Slider value: $newValue");
},
);
6. NeonText
带有自定义字体大小、样式和可选动画的发光文本。
NeonText(
text: "Futuristic Text",
fontSize: 30,
neonColor: Colors.greenAccent,
);
7. NeonTextButton
一个带有按压动画和悬停效果的霓虹灯风格按钮。
NeonTextButton(
text: "Click Me",
onPressed: () {
print("Neon Text Button Clicked!");
},
neonColor: Colors.orangeAccent,
);
8. NeonTextField
一个带有霓虹灯风格边框并可调节发光强度的文本输入框。
NeonTextField(
textValue: _emailController,
hintText: "Enter your email",
neonColor: Colors.pinkAccent,
);
9. PulsingStarsBackground
一个动态背景，包含脉动的星星和偶尔出现的流星，为环境增添未来感。
PulsingStarsBackground(
maxStars: 100,
spawnDuration: const Duration(milliseconds: 500),
spawnShootingStarDuration: const Duration(seconds: 10),
);
🚀 示例用法
认证页面使用霓虹灯小部件
此包包含一个示例AuthPage小部件，演示了在登录/注册表单中集成霓虹灯风格组件的方法。
import 'package:flutter/material.dart';
import 'package:simple_neon/simple_neon.dart';
class AuthPage extends StatefulWidget {
const AuthPage({super.key});
@override
State<AuthPage> createState() => _AuthPageState();
}
class _AuthPageState extends State<AuthPage> {
// 状态变量跟踪用户是在登录还是注册表单
bool _isLogin = true;
// 文本字段控制器（可选但推荐）
final ValueNotifier<String> _email = ValueNotifier("");
final ValueNotifier<String> _password = ValueNotifier("");
final ValueNotifier<String> _username = ValueNotifier("");
final ValueNotifier<String> _confirmPassword = ValueNotifier("");
@override
void dispose() {
// 在移除小部件时释放控制器
_email.dispose();
_password.dispose();
_username.dispose();
_confirmPassword.dispose();
super.dispose();
}
// 切换登录和注册表单的功能
void _toggleForm() {
setState(() {
_isLogin = !_isLogin;
});
}
// 处理表单提交（登录/注册）的功能
Future<void> _handleSubmit() async {
if (_isLogin) {
// 处理登录逻辑
// 在此处添加你的登录逻辑
} else {
// 处理注册逻辑
String password = _password.value.trim();
String confirmPassword = _confirmPassword.value.trim();
if (password != confirmPassword) {
// 如果密码不匹配则显示错误
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Passwords do not match!"),
backgroundColor: Colors.red,
),
);
return;
}
// 在此处添加你的注册逻辑
}
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.black,
body: Stack(
children: [
PulsingStarsBackground(
spawnDuration: const Duration(milliseconds: 50),
maxStars: 50,
),
Center(
child: SingleChildScrollView(
child: Container(
width: 400,
padding: const EdgeInsets.all(20.0),
child: NeonCard(
neonColor: Colors.pinkAccent,
children: [
// 标题文本
NeonText(
text: _isLogin ? "Welcome back!" : "Create Account",
fontSize: 30,
neonColor: Colors.greenAccent,
),
const SizedBox(height: 20),
// 如果是注册表单，则显示用户名字段
if (!_isLogin) ...[
NeonTextField(
textValue: _username,
hintText: "Username",
neonColor: Colors.greenAccent,
),
const SizedBox(height: 20),
],
// 邮箱字段
NeonTextField(
textValue: _email,
hintText: "Email",
neonColor: Colors.greenAccent,
),
const SizedBox(height: 20),
// 密码字段
NeonTextField(
textValue: _password,
hintText: "Password",
neonColor: Colors.greenAccent,
),
const SizedBox(height: 20),
// 如果是注册表单，则显示确认密码字段
if (!_isLogin) ...[
NeonTextField(
textValue: _confirmPassword,
hintText: "Confirm Password",
neonColor: Colors.greenAccent,
),
const SizedBox(height: 20),
],
// 提交按钮（登录/注册）
NeonTextButton(
text: _isLogin ? "Login" : "Register",
onPressed: _handleSubmit,
neonColor: Colors.greenAccent,
),
const SizedBox(height: 20),
// 在登录和注册之间切换
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
NeonText(
text: _isLogin
? "No account? No problem, make one today: "
: "Already have an account? ",
fontSize: 13,
neonColor: Colors.greenAccent,
fontWeight: FontWeight.w300,
),
NeonTextButton(
text: _isLogin ? "Register" : "Back to Login",
onPressed: _toggleForm,
textStyle: TextStyle(
fontSize: 15,
color: Colors.cyanAccent,
),
),
],
)
],
),
),
),
),
],
),
);
}
}
📸 截图
登录表单
注册表单
星空背景
🛠 可定制性
更改霓虹灯颜色
通过设置neonColor属性轻松更改霓虹灯发光颜色：
NeonText(
text: "Custom Text",
neonColor: Colors.blueAccent,
);
调整发光强度
通过修改blurRadius或glowRadius来获得更柔和或更明亮的效果：
NeonTextField(
textValue: _emailController,
blurRadius: 20.0,
neonColor: Colors.cyanAccent,
);
更多关于Flutter霓虹灯效果插件simple_neon的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter霓虹灯效果插件simple_neon的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
simple_neon 是一个用于在 Flutter 应用中实现霓虹灯效果的插件。它可以帮助你轻松地为文本、图标或其他小部件添加霓虹灯效果。以下是如何使用 simple_neon 的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 simple_neon 插件的依赖：
dependencies:
flutter:
sdk: flutter
simple_neon: ^0.0.1 # 请检查最新版本
然后运行 flutter pub get 来安装依赖。
2. 导入库
在你的 Dart 文件中导入 simple_neon 库：
import 'package:simple_neon/simple_neon.dart';
3. 使用 SimpleNeon 小部件
SimpleNeon 是一个可以包裹任何小部件并为其添加霓虹灯效果的组件。以下是一个简单的示例：
import 'package:flutter/material.dart';
import 'package:simple_neon/simple_neon.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.black,
body: Center(
child: SimpleNeon(
child: Text(
'Hello, Neon!',
style: TextStyle(
color: Colors.white,
fontSize: 40,
),
),
neonColor: Colors.purple,
blurRadius: 20.0,
spreadRadius: 5.0,
),
),
),
);
}
}
4. 参数说明
child: 你想要添加霓虹灯效果的小部件，通常是Text或Icon。neonColor: 霓虹灯的颜色。blurRadius: 霓虹灯效果的模糊半径，值越大效果越模糊。spreadRadius: 霓虹灯效果的扩散半径，值越大效果越扩散。
5. 自定义效果
你可以通过调整 blurRadius 和 spreadRadius 参数来获得不同的霓虹灯效果。例如：
SimpleNeon(
child: Text(
'Custom Neon',
style: TextStyle(
color: Colors.white,
fontSize: 40,
),
),
neonColor: Colors.blue,
blurRadius: 30.0,
spreadRadius: 10.0,
)
6. 应用到其他小部件
你不仅可以将 SimpleNeon 应用到 Text，还可以应用到其他小部件，如 Container、Icon 等。
SimpleNeon(
child: Icon(
Icons.star,
size: 100,
color: Colors.yellow,
),
neonColor: Colors.orange,
blurRadius: 15.0,
spreadRadius: 5.0,
)