Flutter特效展示插件aura_box的使用
Flutter特效展示插件aura_box的使用
Aura Box
Aura Box 是一个Flutter小部件，它结合了多个径向渐变和模糊效果。
安装
在项目的 pubspec.yaml 文件中添加以下依赖：
dependencies:
aura_box: ^1.0.1
然后在你的文件中导入它：
import 'package:aura_box/aura_box.dart';
使用方法
该包提供了两个小部件：
AuraBox作为一个容器，它可以接收一个child、一个decoration和一个AuraSpot列表。AuraSpot表示生成辐射渐变的点。
示例代码
下面是一个完整的示例demo，展示了如何使用 aura_box 插件来创建带有不同颜色和位置的光晕效果：
import 'package:aura_box/aura_box.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatefulWidget {
const MyApp({
super.key,
});
@override
State<MyApp> createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool brightness = false;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AuraBox example',
themeMode: brightness ? ThemeMode.dark : ThemeMode.light,
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.deepPurple,
),
useMaterial3: true,
),
darkTheme: ThemeData(
colorScheme: ColorScheme.fromSeed(
brightness: Brightness.dark,
seedColor: Colors.deepPurple,
),
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
elevation: 1,
title: const Text('Aura box'),
actions: [
IconButton(
onPressed: () => setState(() => brightness = !brightness),
icon: const Icon(Icons.brightness_4),
),
],
),
body: const HomePage(),
),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({
super.key,
});
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
padding: const EdgeInsets.all(24.0),
child: Column(
children: [
AuraBox(
decoration: const BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(16),
),
),
spots: [
AuraSpot(
color: Colors.purple.shade300,
radius: 500,
alignment: const Alignment(0, 0.9),
blurRadius: 50,
),
AuraSpot(
color: Colors.deepPurple.shade100,
radius: 400,
alignment: const Alignment(-1.2, 1.2),
blurRadius: 50,
),
AuraSpot(
color: Colors.indigo.shade700,
radius: 400,
alignment: const Alignment(-0.5, -1.2),
blurRadius: 50,
),
AuraSpot(
color: Colors.purpleAccent.shade700,
radius: 300,
alignment: const Alignment(1.2, -1.2),
blurRadius: 100,
),
],
child: SizedBox(
height: 400,
child: Center(
child: Text(
'Aura Box',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 48,
color: Theme.of(context).colorScheme.surface,
),
),
),
),
),
const SizedBox(
height: 24,
),
AuraBox(
decoration: const BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(16),
),
),
spots: [
AuraSpot(
color: Colors.green.shade400,
radius: 600,
alignment: const Alignment(-1, 0),
blurRadius: 400,
),
AuraSpot(
color: Colors.green.shade100,
radius: 200,
alignment: const Alignment(0.5, -0.7),
blurRadius: 100,
),
AuraSpot(
color: Colors.blue,
radius: 300,
alignment: const Alignment(0.5, 0.8),
blurRadius: 300,
),
],
child: SizedBox(
height: 400,
child: Center(
child: Text(
'Aura Box',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 48,
color: Theme.of(context).colorScheme.surface,
),
),
),
),
),
const SizedBox(
height: 24,
),
AuraBox(
decoration: const BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(16),
),
),
spots: [
AuraSpot(
color: Colors.red,
radius: 300,
alignment: Alignment.center,
blurRadius: 200,
),
AuraSpot(
color: Colors.amber,
radius: 300,
alignment: const Alignment(0, 1.4),
blurRadius: 30,
),
],
child: SizedBox(
height: 400,
child: Center(
child: Text(
'Aura Box',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 48,
color: Theme.of(context).colorScheme.surface,
),
),
),
),
),
const SizedBox(
height: 24,
),
AuraBox(
decoration: BoxDecoration(
color: Colors.blueGrey.shade100,
borderRadius: const BorderRadius.all(
Radius.circular(16),
),
),
spots: [
AuraSpot(
color: Colors.amber,
radius: 200,
alignment: const Alignment(0.1, 0.1),
blurRadius: 30,
),
AuraSpot(
color: Colors.red.shade400,
radius: 180,
alignment: const Alignment(-0.1, -0.1),
blurRadius: 20,
),
],
child: SizedBox(
height: 400,
child: Center(
child: Text(
'Aura Box',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 48,
color: Theme.of(context).colorScheme.surface,
),
),
),
),
),
const SizedBox(
height: 24,
),
AuraBox(
decoration: const BoxDecoration(
color: Colors.transparent,
borderRadius: BorderRadius.all(
Radius.circular(16),
),
),
spots: [
AuraSpot(
color: Colors.pink.shade600,
radius: 500,
alignment: const Alignment(-0.9, -0.9),
blurRadius: 60,
),
AuraSpot(
color: Colors.deepOrange.shade200,
radius: 200,
alignment: const Alignment(0, -0.9),
blurRadius: 50,
),
AuraSpot(
color: Colors.orange.shade300,
radius: 300,
alignment: const Alignment(0, 0.9),
blurRadius: 60,
),
AuraSpot(
color: Colors.deepOrange.shade100,
radius: 400,
alignment: const Alignment(-0.9, 0.9),
blurRadius: 30,
),
AuraSpot(
color: Colors.pink.shade900,
radius: 400,
alignment: const Alignment(1, -0.3),
blurRadius: 150,
),
],
child: SizedBox(
height: 400,
child: Center(
child: Text(
'Aura Box',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 48,
color: Theme.of(context).colorScheme.surface,
),
),
),
),
),
],
),
);
}
}
Alignment
单个光斑是放置在一个堆栈小部件内。这使得你可以通过 alignment 属性控制它们的位置。有关详细信息，请参阅 Alignment类文档。
示例项目
项目中包含了一个示例项目，可以参考其效果和实现方式。
通过这个示例demo，您可以更直观地了解如何使用 aura_box 插件来创建各种视觉效果。希望这对您有所帮助！
更多关于Flutter特效展示插件aura_box的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter特效展示插件aura_box的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何在Flutter项目中使用aura_box插件来展示特效的示例代码。aura_box是一个用于创建炫酷边框动画效果的Flutter插件。以下是一个简单的示例，展示如何在Flutter应用中集成并使用aura_box。
首先，确保你已经在pubspec.yaml文件中添加了aura_box依赖：
dependencies:
flutter:
sdk: flutter
aura_box: ^最新版本号 # 请替换为实际最新版本号
然后，运行flutter pub get来安装依赖。
接下来，你可以在你的Flutter应用中使用AuraBox组件。以下是一个完整的示例代码，展示如何使用AuraBox来创建一个带有动画边框的按钮：
import 'package:flutter/material.dart';
import 'package:aura_box/aura_box.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Aura Box Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: AuraBoxDemoPage(),
);
}
}
class AuraBoxDemoPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Aura Box Demo'),
),
body: Center(
child: AuraBox(
// AuraBox的child，可以是任何Widget
child: ElevatedButton(
onPressed: () {
// 按钮点击事件
print('Button pressed!');
},
child: Text('Click Me'),
),
// 配置AuraBox的动画效果
boxType: BoxType.circle, // 可以是BoxType.circle或BoxType.rect
borderColor: Colors.blueAccent, // 边框颜色
borderWidth: 4.0, // 边框宽度
spreadRadius: 20.0, // 动画扩散半径
duration: Duration(milliseconds: 1000), // 动画持续时间
spreadColor: Colors.transparent, // 动画扩散颜色（透明）
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // 阴影偏移
),
],
),
),
);
}
}
在这个示例中，我们创建了一个简单的Flutter应用，其中包含一个带有AuraBox特效的按钮。AuraBox组件包裹了一个ElevatedButton，并通过各种参数配置了动画效果，包括：
boxType：指定边框类型，可以是圆形（BoxType.circle）或矩形（BoxType.rect）。borderColor：指定边框颜色。borderWidth：指定边框宽度。spreadRadius：指定动画扩散半径。duration：指定动画持续时间。spreadColor：指定动画扩散颜色（在这个示例中设置为透明）。boxShadow：指定按钮的阴影效果。
你可以根据需要调整这些参数来实现不同的动画效果。运行这个示例代码，你将看到一个带有炫酷边框动画效果的按钮。
