Flutter霓虹效果插件neon_widgets的使用
Flutter霓虹效果插件neon_widgets的使用
简介
neon_widgets 是一个用于Flutter应用的插件，它提供了多种霓虹风格的小部件。这些小部件可以为您的应用程序添加炫酷的视觉效果。
示例图示
安装与导入
安装
在您的 pubspec.yaml 文件中添加以下依赖：
dependencies:
neon_widgets: ^2.0.0
然后运行以下命令以获取依赖：
$ flutter pub get
导入
在您的 Dart 文件中导入该库：
import 'package:neon_widgets/neon_widgets.dart';
常用组件
NeonText 和 FlickerNeonText
// Neon Text
NeonText(
text: "Neon text",
spreadColor: Colors.pink,
blurRadius: 20,
textSize: 74,
textColor: Colors.white,
),
// Flickering Neon Text
FlickerNeonText(
text: "Flicker neon text",
flickerTimeInMilliSeconds: 600,
spreadColor: Colors.blue,
blurRadius: 20,
textSize: 74,
),
NeonSearchBar
NeonSearchBar(hint: "Search here...")
NeonLeftMsgCard 和 NeonRightMsgCard
// Left message card in neon theme
NeonLeftMsgCard(
lightBlurRadius: 20,
lightSpreadRadius: 5,
msg: "Hi all, this is brand new library that provides most used widgets in neon and normal effect",
time: "10:45",
),
// Right message card in neon theme
NeonRightMsgCard(
lightBlurRadius: 20,
lightSpreadRadius: 10,
backgroundColor: Colors.deepPurple,
msg: "Hi all, this is brand new library that provides most used widgets in neon and normal effect",
time: "10:45",
)
NeonAddItemButton
Wrap(
direction: Axis.horizontal,
children: <Widget>[
...(searchedResults.map((e) =>
NeonAddItemButton(
data: e,
borderColor: Colors.deepOrange.shade50,
spreadColor: Colors.deepOrange,
lightSpreadRadius: 3,
lightBlurRadius: 18))),
],
)
NeonPoint 和 NeonLine
// Neon Point
NeonPoint(
pointSize: 10,
pointColor: Colors.red.shade100,
spreadColor: Colors.red,
),
// Neon Line
NeonLine(
spreadColor: Colors.brown,
lightSpreadRadius: 30,
lightBlurRadius: 90,
lineWidth: 400,
lineHeight: 0.02,
lineColor: Colors.brown.shade100,
)
FlickerNeonLine 和 FlickerNeonPoint
// Flickering Neon Line
FlickerNeonLine(
spreadColor: Colors.brown,
lightSpreadRadius: 30,
lightBlurRadius: 60,
lineWidth: 300,
lineHeight: 2,
lineColor: Colors.brown.shade100,
randomFlicker: false,
flickerTimeInMilliSeconds: 1000,
),
// Flickering Neon Point
FlickerNeonPoint(
pointSize: 10,
pointColor: Colors.blue.shade100,
spreadColor: Colors.blue,
)
示例Demo
以下是完整的示例代码，展示了如何使用 neon_widgets 中的各种组件：
import 'package:flutter/material.dart';
import 'package:neon_widgets/neon_widgets.dart';
void main() {
runApp(exampleApp());
}
class exampleApp extends StatefulWidget {
@override
State<exampleApp> createState() => exampleAppState();
}
class exampleAppState extends State<exampleApp> {
@override
Widget build(BuildContext context) {
List<String> searchedResults = [
"Flutter",
"PubDev",
"Package",
"Library",
"Widgets",
"New"
];
return Scaffold(
backgroundColor: Colors.black,
appBar: neonAppBar(
context: context,
heading: "Example App",
iconColor: Colors.white,
backgroundColor: Colors.deepPurple.shade600,
onTap: () {},
appBarShadowColor: Colors.purple),
body: Stack(
children: [
SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(20),
child: Column(
children: [
const SizedBox(height: 20),
NeonSearchBar(hint: "Search here..."),
const SizedBox(height: 20),
NeonContainer(
spreadColor: Colors.teal.shade200,
borderColor: Colors.teal.shade50,
containerColor: Colors.black,
lightBlurRadius: 20,
lightSpreadRadius: 10,
borderRadius: BorderRadius.circular(10),
child: Padding(
padding: const EdgeInsets.all(10),
child: Column(
children: [
NeonLeftMsgCard(
lightBlurRadius: 10,
lightSpreadRadius: 5,
msg:
"Hi all, this is brand new library that provides most used widgets in neon and normal effect",
time: "10:45"),
const SizedBox(height: 20),
NeonRightMsgCard(
lightBlurRadius: 20,
lightSpreadRadius: 10,
backgroundColor: Colors.deepPurple,
msg:
"Hi all, this is brand new library that provides most used widgets in neon and normal effect",
time: "10:45"),
const SizedBox(height: 20),
Wrap(
direction: Axis.horizontal,
children: <Widget>[
...(searchedResults.map((e) =>
NeonAddItemButton(
data: e,
borderColor: Colors.deepOrange.shade50,
spreadColor: Colors.deepOrange,
lightSpreadRadius: 3,
lightBlurRadius: 18))),
],
),
const SizedBox(height: 20),
NeonPoint(
pointSize: 10,
pointColor: Colors.red.shade100,
spreadColor: Colors.red,
),
const SizedBox(height: 86.6),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
NeonPoint(
pointSize: 10,
pointColor: Colors.blue.shade100,
spreadColor: Colors.blue,
),
const SizedBox(width: 100),
NeonPoint(
pointSize: 10,
pointColor: Colors.green.shade100,
spreadColor: Colors.green,
),
],
),
const SizedBox(height: 400),
NeonLine(
spreadColor: Colors.brown,
lightSpreadRadius: 30,
lightBlurRadius: 90,
lineWidth: 400,
lineHeight: 0.02,
lineColor: Colors.brown.shade100,
),
const SizedBox(height: 100),
],
),
)),
],
),
),
),
Container(
padding: const EdgeInsets.all(20),
alignment: Alignment.bottomRight,
child: NeonContainer(
spreadColor: Colors.green.shade700,
child: IconButton(
icon: Icon(Icons.arrow_right_alt_sharp),
onPressed: () {},
color: Colors.green.shade700),
borderRadius: BorderRadius.circular(100),
lightBlurRadius: 100,
lightSpreadRadius: 50,
borderColor: Colors.green.shade100),
),
],
),
);
}
}
通过上述示例，您可以轻松地在自己的Flutter项目中集成并使用 neon_widgets 插件，创建具有霓虹效果的应用界面。希望这对您有所帮助！
更多关于Flutter霓虹效果插件neon_widgets的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter霓虹效果插件neon_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter中使用neon_widgets插件来实现霓虹效果的代码示例。neon_widgets插件可以帮助你轻松地在Flutter应用中添加炫酷的霓虹效果。
首先，你需要在pubspec.yaml文件中添加neon_widgets依赖项：
dependencies:
flutter:
sdk: flutter
neon_widgets: ^x.y.z # 请将x.y.z替换为最新的版本号
然后运行flutter pub get来安装依赖项。
接下来，你可以在你的Flutter应用中使用Neon组件来创建霓虹效果。以下是一个简单的示例，展示了如何使用Neon组件来创建一个带有霓虹效果的按钮：
import 'package:flutter/material.dart';
import 'package:neon_widgets/neon_widgets.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Neon Widgets Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: NeonScreen(),
);
}
}
class NeonScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Neon Widgets Demo'),
),
body: Center(
child: Neon(
color: Colors.lime, // 霓虹颜色
child: ElevatedButton(
onPressed: () {
// 按钮点击事件
print('Neon Button Pressed!');
},
child: Text(
'Neon Button',
style: TextStyle(
color: Colors.black, // 按钮文本颜色
fontSize: 20,
),
),
style: ButtonStyle(
overlayColor: MaterialStateProperty.all(Colors.transparent), // 移除按钮默认背景色
),
),
),
),
);
}
}
在这个示例中，我们创建了一个名为NeonScreen的页面，其中包含一个使用Neon组件包装的ElevatedButton。Neon组件的color属性用于设置霓虹效果的颜色。在这个例子中，我们使用了Colors.lime来创建绿色的霓虹效果。
请注意，Neon组件可以应用于任何Widget，不仅仅是按钮。你可以根据需要将其应用于文本、图标或其他任何UI组件。
这个示例应该能够帮助你快速上手neon_widgets插件的使用。如果你需要更复杂的霓虹效果，可以参考neon_widgets的官方文档或查看其源代码以获取更多信息和自定义选项。
