Flutter发光效果插件glow_container的使用
Flutter发光效果插件glow_container的使用
Glow Container
Glow Container 是一个Flutter包，提供了一个高度可定制的容器小部件，带有迷人的动态发光效果。该包通过为矩形容器添加动画、发光边框来增强应用UI的视觉吸引力。非常适合创建引人注目的按钮、卡片或任何需要额外优雅和交互性的组件。
Features
- 可定制的发光颜色
- 可调整的发光半径和扩散
- 支持矩形容器形状
- 带有可控时长的动画发光效果
- 与现有Flutter小部件轻松集成
- 支持渐变发光效果
- 可定制的边框属性（宽度、颜色、半径）
Installation
在你的 pubspec.yaml 文件中添加：
dependencies:
glow_container: ^0.0.4
Usage
以下是一个包含发光容器的小部件示例：
import 'package:flutter/material.dart';
import 'package:glow_container/glow_container.dart';
class ExampleWidget extends StatelessWidget {
const ExampleWidget({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: GlowContainer(
glowRadius: 20,
gradientColors: [Colors.blue, Colors.purple, Colors.pink],
rotationDuration: Duration(seconds: 3),
containerOptions: ContainerOptions(
width: 200,
height: 200,
borderRadius: 15,
backgroundColor: Colors.black,
),
transitionDuration: Duration(milliseconds: 300),
showAnimatedBorder: true,
child: Center(
child: Text(
'Glowing Container',
style: TextStyle(color: Colors.white),
),
),
),
),
);
}
}
这个例子来自 ExampleWidget 文件。
完整示例Demo
为了更全面地展示如何使用 glow_container 插件，下面提供一个完整的示例代码，包括用户界面的控制选项，如发光颜色数量、过渡速度、边框宽度等。
import 'package:flutter/material.dart';
import 'package:glow_container/glow_container.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: '[DEMO] Glow Container',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.amber),
useMaterial3: true,
),
home: const MyHomePage(title: 'Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
bool _showGlowingBorder = true;
double _borderWidth = 1;
double _borderRadius = 0;
double _glowRadius = 4;
Duration _rotationDuration = const Duration(milliseconds: 2000);
Duration _transitionDuration = const Duration(milliseconds: 300);
int _numberOfColors = 3;
static const _glowColors = [
Colors.red,
Colors.green,
Colors.blue,
Colors.red,
Colors.blue,
Colors.yellow,
Colors.green,
Colors.purple,
Colors.orange,
Colors.pink,
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text(widget.title),
),
body: SafeArea(
child: Column(
children: [
Expanded(
child: Container(
margin: const EdgeInsets.only(top: 8.0, left: 8.0, right: 8.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
border: Border.all(
color: Theme.of(context).colorScheme.outline,
width: 2,
),
),
child: Center(
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 24.0),
child: Center(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: GlowContainer(
containerOptions: ContainerOptions(
borderColor: Colors.black,
borderRadius: _borderRadius,
borderWidth: _borderWidth,
padding: const EdgeInsets.all(8.0),
),
gradientColors:
_glowColors.take(_numberOfColors).toList(),
glowRadius: _glowRadius,
showAnimatedBorder: _showGlowingBorder,
rotationDuration: _rotationDuration,
transitionDuration: _transitionDuration,
child: Text(
'Glow Container',
style: TextStyle(
fontSize: 24,
),
),
),
),
),
),
),
),
),
Expanded(
flex: 2,
child: ListView(
padding: const EdgeInsets.all(8.0),
children: [
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainer,
borderRadius: BorderRadius.circular(8),
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
"Glow Colors",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20,
),
),
Row(
children: [
Text(
"Enable glowing border",
style: TextStyle(
fontWeight: FontWeight.w400, fontSize: 18),
),
Spacer(),
Switch(
value: _showGlowingBorder,
onChanged: (value) {
setState(() {
_showGlowingBorder = value;
});
},
),
],
),
Row(
children: [
Expanded(
flex: 2,
child: Text(
"N. colors",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
Expanded(
flex: 5,
child: Slider(
value: _numberOfColors.toDouble(),
min: 1,
max: 10,
onChanged: (value) {
setState(() {
_numberOfColors = value.toInt();
});
},
),
),
Expanded(
flex: 1,
child: Text(
_numberOfColors.toString(),
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
textAlign: TextAlign.right,
),
),
],
),
Row(
children: [
Expanded(
flex: 2,
child: Text(
"Transition speed (ms)",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
Expanded(
flex: 5,
child: Slider(
value: _transitionDuration.inMilliseconds
.toDouble(),
min: 100,
max: 2000,
onChanged: (value) {
setState(() {
_transitionDuration =
Duration(milliseconds: value.toInt());
});
},
),
),
Expanded(
flex: 1,
child: Text(
_transitionDuration.inMilliseconds.toString(),
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
textAlign: TextAlign.right,
),
),
],
),
],
),
),
SizedBox(
height: 8,
),
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainer,
borderRadius: BorderRadius.circular(8),
),
child: Column(
children: [
Text(
"Border Options",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20,
),
),
Row(
children: [
Expanded(
flex: 2,
child: Text(
"Width",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
textAlign: TextAlign.left,
),
),
Expanded(
flex: 5,
child: Slider(
value: _borderWidth,
min: 1,
max: 20,
onChanged: (value) {
setState(() {
_borderWidth = value;
});
},
),
),
Expanded(
flex: 1,
child: Text(
_borderWidth.toStringAsFixed(1),
textAlign: TextAlign.right,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
],
),
Row(
children: [
Expanded(
flex: 2,
child: Text(
"Radius",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
Expanded(
flex: 5,
child: Slider(
value: _borderRadius,
min: 0,
max: 40,
onChanged: (value) {
setState(() {
_borderRadius = value;
});
},
label: 'Border Width',
),
),
Expanded(
flex: 1,
child: Text(
_borderRadius.toStringAsFixed(1),
textAlign: TextAlign.right,
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
],
),
],
),
),
SizedBox(
height: 8,
),
Container(
padding: const EdgeInsets.all(8.0),
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.surfaceContainer,
borderRadius: BorderRadius.circular(8),
),
child: Column(
children: [
Text(
"Glow Options",
style: TextStyle(
fontWeight: FontWeight.w600,
fontSize: 20,
),
),
Row(
children: [
Expanded(
flex: 2,
child: Text(
"Radius",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
Expanded(
flex: 5,
child: Slider(
value: _glowRadius,
min: 0,
max: 40,
onChanged: (value) {
setState(() {
_glowRadius = value;
});
},
),
),
Expanded(
flex: 1,
child: Text(
_glowRadius.toStringAsFixed(1),
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
textAlign: TextAlign.right,
),
),
],
),
Row(
children: [
Expanded(
flex: 2,
child: Text(
"Rotation speed (ms)",
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
),
),
Expanded(
flex: 5,
child: Slider(
value:
_rotationDuration.inMilliseconds.toDouble(),
min: 100,
max: 5000,
onChanged: (value) {
setState(() {
_rotationDuration =
Duration(milliseconds: value.toInt());
});
},
),
),
Expanded(
flex: 1,
child: Text(
_rotationDuration.inMilliseconds.toString(),
style: TextStyle(
fontWeight: FontWeight.w400,
fontSize: 18,
),
textAlign: TextAlign.right,
),
),
],
),
],
),
),
],
),
)
],
),
),
);
}
}
此完整示例展示了如何使用 glow_container 插件创建一个具有发光效果的容器，并提供了多个用户界面控件以实时调整发光效果的各项参数，如发光颜色数量、过渡速度、边框宽度等。这使得开发者能够更灵活地自定义发光容器的效果，满足不同场景的需求。
更多关于Flutter发光效果插件glow_container的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter发光效果插件glow_container的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是如何在Flutter中使用glow_container插件来实现发光效果的代码示例。glow_container是一个流行的Flutter插件，可以为容器添加发光效果。
首先，你需要在你的pubspec.yaml文件中添加glow_container依赖：
dependencies:
flutter:
sdk: flutter
glow_container: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get来安装依赖。
接下来是一个完整的示例代码，展示如何使用GlowContainer来实现发光效果：
import 'package:flutter/material.dart';
import 'package:glow_container/glow_container.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Glow Container Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GlowContainerDemo(),
);
}
}
class GlowContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Glow Container Demo'),
),
body: Center(
child: GlowContainer(
color: Colors.deepOrange,
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
child: Text(
'Glow',
style: TextStyle(color: Colors.white, fontSize: 24),
),
),
blurRadius: 20.0,
spreadRadius: 0.0,
glowColor: Colors.yellow,
borderRadius: BorderRadius.circular(15.0),
),
),
);
}
}
代码说明：
- 依赖添加：在
pubspec.yaml中添加glow_container依赖。 - 导入包：在Dart文件中导入
glow_container包。 - GlowContainer：
color：设置容器的背景颜色。child：容器内部的子组件，这里是一个带有文本的Container。blurRadius：发光的模糊半径。spreadRadius：发光的扩展半径，这里设置为0.0表示不扩展。glowColor：发光的颜色。borderRadius：容器的圆角半径。
运行这段代码后，你会看到一个带有发光效果的容器，其中显示着“Glow”文本。你可以根据需要调整GlowContainer的参数，以实现不同的发光效果。
希望这个示例对你有帮助！如果你有任何其他问题，请随时提问。
