Flutter渐变UI组件插件gradient_ui_widgets的使用
Flutter渐变UI组件插件gradient_ui_widgets的使用
gradient_ui_widgets 是一个为 Flutter 提供渐变效果的 UI 组件库。通过这个库，开发者可以轻松地在应用中添加各种具有渐变效果的按钮、进度条、卡片等组件。
使用示例
以下是一个完整的示例代码，展示了如何使用 gradient_ui_widgets 库来创建一个具有渐变效果的应用界面。
import 'package:flutter/material.dart';
import 'package:gradient_ui_widgets/gradient_ui_widgets.dart' as a;
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// 这个widget是你的应用的根
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
accentColor: Color(0xff7f00ff),
backgroundColor: Colors.grey[200],
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
[@override](/user/override)
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
Gradient g1 = LinearGradient(
colors: [
Color(0xFF7F00FF),
Color(0xFFE100FF),
],
);
Gradient g2 = LinearGradient(colors: [
Color(0xfff12711),
Color(0xfff5af19),
]);
[@override](/user/override)
Widget build(BuildContext context) {
Widget space = SizedBox(height: 80);
Widget space2 = SizedBox(height: 20);
Widget space2_w = SizedBox(width: 20);
return Scaffold(
floatingActionButton: Column(
children: [
Spacer(),
a.GradientFloatingActionButton.extended(
onPressed: () {},
label: Text("这是扩展的FAB"),
icon: Icon(Icons.add),
shape: StadiumBorder(),
gradient: g1,
),
space2,
a.GradientFloatingActionButton.extended(
onPressed: () {},
label: Text("这是扩展的FAB"),
icon: Icon(Icons.add),
shape: StadiumBorder(),
gradient: g2,
),
],
),
body: SingleChildScrollView(
child: Column(
children: [
space,
Row(
children: [
Spacer(),
Flexible(
child: Column(
children: [
a.GradientLinearProgressIndicator(
valueGradient: g1,
backgroundColor: Colors.grey[200],
),
space2,
a.GradientLinearProgressIndicator(
valueGradient: g2,
backgroundColor: Colors.grey[200],
),
],
),
),
Spacer(),
Flexible(
child: Row(
children: [
a.GradientCircularProgressIndicator(
valueGradient: g1,
backgroundColor: Colors.grey[200],
),
space2_w,
a.GradientCircularProgressIndicator(
valueGradient: g2,
backgroundColor: Colors.grey[200],
),
],
),
),
Spacer(),
],
),
space,
Row(
children: [
Spacer(),
Flexible(
child: Column(
children: [
a.GradientLinearProgressIndicator(
valueGradient: g1,
value: 0.8,
backgroundColor: Colors.grey[200],
),
space2,
a.GradientLinearProgressIndicator(
valueGradient: g2,
value: 0.8,
backgroundColor: Colors.grey[200],
),
],
),
),
Spacer(),
Flexible(
child: Row(
children: [
a.GradientCircularProgressIndicator(
valueGradient: g1,
value: 0.8,
backgroundColor: Colors.grey[200],
),
space2_w,
a.GradientCircularProgressIndicator(
valueGradient: g2,
value: 0.8,
backgroundColor: Colors.grey[200],
),
],
),
),
Spacer(),
],
),
space,
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
children: [
a.GradientElevatedButton(
onPressed: () {},
gradient: g1,
child: Text("这是一个按钮"),
),
space2,
a.GradientElevatedButton.icon(
onPressed: () {},
gradient: g2,
icon: Icon(Icons.add),
label: Text("这也是一个按钮"),
),
space2,
],
),
Column(
children: [
a.GradientTextButton(
onPressed: () {},
gradient: g1,
child: Text("这是一个文本按钮"),
),
space2,
a.GradientTextButton.icon(
onPressed: () {},
icon: Icon(Icons.ac_unit),
label: Text("下雪了"),
gradient: g2,
),
],
),
Row(
children: [
a.GradientFloatingActionButton(
onPressed: () {},
child: Icon(Icons.wysiwyg),
shape: StadiumBorder(),
gradient: g1,
),
space2_w,
a.GradientFloatingActionButton(
onPressed: () {},
child: Icon(Icons.wysiwyg),
shape: StadiumBorder(),
gradient: g2,
),
],
),
],
),
space,
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
a.GradientSelectableText(
"这是可选择的",
gradient: g1,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
a.GradientSelectableText(
"渐变文本",
gradient: g2,
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
Column(
children: [
a.GradientCard(
gradient: g1,
padding: EdgeInsets.all(12),
child: Column(
children: [
Text(
"这是一个渐变卡片",
style: TextStyle(color: Colors.white),
),
Text(
"它非常酷",
style: TextStyle(color: Colors.white),
),
],
),
),
a.GradientCard(
gradient: g2,
padding: EdgeInsets.all(12),
child: Column(
children: [
Text(
"这是一个渐变卡片",
style: TextStyle(color: Colors.white),
),
Text(
"它非常酷",
style: TextStyle(color: Colors.white),
),
],
),
),
],
),
],
),
space,
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Flexible(
child: Column(
children: [
a.GradientIcon(
Icons.add_box,
gradient: g1,
size: 70,
),
a.GradientIcon(
Icons.add_box,
gradient: g2,
size: 70,
),
],
),
),
Flexible(
child: Column(
children: [
a.GradientIconButton(
icon: Icon(Icons.wrong_location),
gradient: g1,
iconSize: 70,
onPressed: () {},
),
a.GradientIconButton(
icon: Icon(Icons.wrong_location),
gradient: g2,
iconSize: 70,
onPressed: () {},
),
],
),
),
Flexible(
child: Column(
children: [
a.GradientIcon(
Icons.cloud,
gradient: g1,
size: 70,
),
a.GradientIcon(
Icons.cloud,
gradient: g2,
size: 70,
),
],
),
),
],
),
],
),
),
);
}
}
更多关于Flutter渐变UI组件插件gradient_ui_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter渐变UI组件插件gradient_ui_widgets的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，下面是一个关于如何使用Flutter的gradient_ui_widgets插件来创建渐变UI组件的代码示例。这个插件允许你轻松地在Flutter应用中实现各种渐变效果。
首先，确保你已经在pubspec.yaml文件中添加了gradient_ui_widgets依赖：
dependencies:
flutter:
sdk: flutter
gradient_ui_widgets: ^最新版本号 # 请替换为当前最新版本号
然后，运行flutter pub get来安装依赖。
以下是一个简单的示例，展示如何使用gradient_ui_widgets来创建一个带有渐变背景的按钮：
import 'package:flutter/material.dart';
import 'package:gradient_ui_widgets/gradient_ui_widgets.dart'; // 导入插件
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gradient UI Widgets Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Gradient UI Widgets Demo'),
),
body: Center(
child: GradientButton(
// 配置按钮的渐变颜色
linearGradient: LinearGradient(
colors: [Colors.blue, Colors.lightBlueAccent],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
// 按钮文本
text: 'Gradient Button',
// 按钮点击事件
onPressed: () {
print('Button pressed!');
},
// 按钮文本样式
textStyle: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
// 按钮圆角
borderRadius: BorderRadius.circular(20),
// 按钮高度
height: 50,
// 按钮宽度（可选，默认会根据文本内容自适应）
width: 200,
// 按钮内边距
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
// 按钮阴影（可选）
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
),
],
),
),
);
}
}
在这个示例中，我们创建了一个GradientButton，它使用了线性渐变背景。你可以通过调整LinearGradient中的colors、begin和end属性来改变渐变效果。同时，你还可以自定义按钮的文本、点击事件、文本样式、圆角、高度、宽度和内边距等属性。
gradient_ui_widgets插件还提供了其他渐变组件，比如GradientContainer、GradientText等，你可以根据需要使用它们来创建更复杂的渐变UI。具体的用法可以参考插件的官方文档或示例代码。
