Flutter渐变效果组件插件gradient_widgets_plus的使用
Flutter渐变效果组件插件gradient_widgets_plus的使用
Gradient Widgets
截至 ^1.0.0 版本,渐变按钮和卡片支持 shadowColor
属性。
这是一组具有精美渐变效果的 Flutter 小部件。
您可以使用它们来吸引用户的注意力,例如登录或发送操作,或者重要的购物项目标题(查看 Gradient Screens 以了解更多信息😉)。
- ☑️ GradientText
- ☑️ GradientCard
- ☑️ GradientButton
- ☑️ CircularGradientButton + Shadow Color
- ☑️ GradientProgressIndicator
- ☑️ CircularGradientProgressIndicator
- ◻️ GradientAppBar
安装
在您的 pubspec.yaml
文件中添加:
dependencies:
gradient_widgets_plus: ^1.0.0
然后,
import 'package:gradient_widgets_plus/gradient_widgets_plus.dart';
使用
Card + Gradient
GradientCard(
gradient: Gradients.tameer,
shadowColor: Gradients.tameer.colors.last.withOpacity(0.25),
elevation: 8,
);
大多数参数与 Card
相同。
Progress Indicator + Gradient
必须满足 gradient.colors.length = 2
不定态
GradientProgressIndicator(gradient: Gradients.rainbowBlue,);
定态
GradientProgressIndicator(
gradient: Gradients.rainbowBlue,
value: 0.65,
);
Circular Progress Indicator + Gradient
必须满足 gradient.colors.length = 2
不定态
GradientCircularProgressIndicator(
gradient: Gradients.aliHussien,
);
定态
GradientCircularProgressIndicator(
gradient: Gradients.aliHussien,
radius: 100,
);
Normal Button + Gradient
GradientButton(
child: Text('Gradient'),
callback: () {},
gradient: Gradients.backToFuture,
shadowColor: Gradients.backToFuture.colors.last.withOpacity(0.25),
),
大多数参数与任何 *Button
相同。
Circular Button + Gradient
CircularGradientButton(
child: Icon(Icons.gradient),
callback: (){},
gradient: Gradients.rainbowBlue,
shadowColor: Gradients.rainbowBlue.colors.last.withOpacity(0.5),
),
大多数参数与 FloatingActionButton
相同。
Text + Gradient
GradientText(
'Hello',
shaderRect: Rect.fromLTWH(0.0, 0.0, 50.0, 50.0),
gradient: Gradients.hotLinear,
style: TextStyle(fontSize: 40.0,),
),
更多关于Flutter渐变效果组件插件gradient_widgets_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter渐变效果组件插件gradient_widgets_plus的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,下面是一个关于如何在Flutter中使用gradient_widgets_plus
插件来实现渐变效果的代码示例。gradient_widgets_plus
是一个扩展库,提供了多种使用渐变效果的组件。
首先,你需要在你的pubspec.yaml
文件中添加该插件的依赖:
dependencies:
flutter:
sdk: flutter
gradient_widgets_plus: ^x.y.z # 请替换为最新版本号
然后,运行flutter pub get
来安装依赖。
以下是一个简单的示例,展示如何使用GradientContainer
来实现一个带有渐变背景的容器:
import 'package:flutter/material.dart';
import 'package:gradient_widgets_plus/gradient_widgets_plus.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Gradient Widgets Plus Example'),
),
body: Center(
child: GradientContainer(
gradient: LinearGradient(
colors: [Colors.blue, Colors.red],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Gradient Container',
style: TextStyle(fontSize: 24, color: Colors.white),
),
SizedBox(height: 16),
Text(
'This is a container with a linear gradient background.',
style: TextStyle(fontSize: 16, color: Colors.white),
),
],
),
),
),
),
),
);
}
}
在这个示例中,我们使用了GradientContainer
组件,并为其设置了一个线性渐变(LinearGradient
)。渐变从左上角(Alignment.topLeft
)到右下角(Alignment.bottomRight
),颜色从蓝色(Colors.blue
)渐变到红色(Colors.red
)。
GradientContainer
的child
属性接受一个子组件,这里我们放置了一个居中的Column
,其中包含了两个文本组件。
此外,gradient_widgets_plus
还提供了其他多种渐变组件,如GradientText
、GradientBoxDecoration
等,你可以根据需要选择使用。
例如,使用GradientText
来创建一个带有渐变效果的文本:
GradientText(
text: 'Gradient Text',
style: TextStyle(fontSize: 24),
gradient: LinearGradient(
colors: [Colors.green, Colors.yellow],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
)
希望这个示例能帮助你理解如何在Flutter中使用gradient_widgets_plus
插件来实现渐变效果。