Flutter渐变高亮按钮插件gradient_elevated_button的使用
Flutter渐变高亮按钮插件gradient_elevated_button的使用
GradientElevatedButton
GradientElevatedButton 是一个为Flutter应用程序提供可自定义渐变背景的高亮按钮插件。该插件允许创建带有渐变背景、自定义前景色和其他属性的按钮。
Features
- Gradient Background: 轻松应用渐变到按钮背景。
- Customizable Style: 自定义文本颜色、形状、填充等。
- Integration with Theme: 使用
GradientButtonThemeData在整个应用程序中应用一致的样式。
Usage
1. Using GradientButtonThemeData
GradientButtonThemeData 允许您在整个应用程序中定义一致的按钮样式。以下是如何使用它：
main() {
return GradientButtonThemeData(
data: GradientElevatedButton.styleFrom(
gradient: const LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
foregroundColor: Colors.black,
),
child: const MaterialApp(
// Your app code
),
);
}
2. Using GradientElevatedButton with Theme
一旦定义了主题，您可以直接使用 GradientElevatedButton 并继承来自 GradientButtonThemeData 的渐变特性。
Widget gradientButton = GradientElevatedButton(
onPressed: () {},
child: const Text("This is Gradient Elevated Button From Theme"),
);
3. Using GradientElevatedButton.styleFrom
或者，您可以直接使用 GradientElevatedButton.styleFrom 来定义按钮的渐变、形状和其他属性：
Widget gradientWidget = GradientElevatedButton(
onPressed: () {},
style: GradientElevatedButton.styleFrom(
gradient: const LinearGradient(colors: [
Color.fromARGB(255, 166, 206, 57),
Color.fromARGB(255, 0, 175, 173),
]),
disabledGradient: const LinearGradient(colors: [
Colors.grey.withAlpha(200),
Colors.grey,
Colors.grey.withAlpha(200),
],
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
),
),
child: const Text("This is Gradient Elevated Button"),
);
Customization
您可以完全自定义 GradientElevatedButton，使用以下属性：
- backgroundGradient: 定义背景渐变的
LinearGradient（或其他类型）。 - foregroundColor: 按钮上的文本和图标的颜色。
- disabledBackgroundGradient: 定义禁用状态下的背景渐变的
LinearGradient（或其他类型）。 - disabledForegroundColor: 禁用状态下按钮上的文本和图标的颜色。
- padding: 按钮内部的填充。
- shape: 使用
ShapeBorder（如RoundedRectangleBorder或StadiumBorder）定义按钮的形状。 - elevation: 控制按钮的阴影高度（默认：2）。
- onPressed: 按钮被按下时调用的回调函数。
Example
完整的示例代码如下：
import 'package:flutter/material.dart';
import 'package:gradient_elevated_button/gradient_elevated_button.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
// Setup GradientButtonThemeData for simplify the code
return GradientButtonThemeData(
data: GradientElevatedButton.styleFrom(
backgroundGradient: const LinearGradient(
colors: [Colors.blue, Colors.green],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
foregroundColor: Colors.black,
),
child: MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Gradient Elevated Button',
theme: ThemeData(
primarySwatch: Colors.blue,
colorScheme: const ColorScheme.light(
primary: Color(0xED1313F1),
secondary: Color.fromARGB(255, 0, 175, 173)),
),
home: const MyHomePage(),
),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key,
});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Gradient Elevated Button'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Sample(
title: "USE from `GradientButtonThemeData`",
child: GradientElevatedButton(
onPressed: () {},
child:
const Text("This is Gradient Elevated Button From Theme"),
),
),
const SizedBox(
height: 20,
),
Sample(
title: "USE `GradientElevatedButton.styleFrom`",
child: GradientElevatedButton(
iconAlignment: IconAlignment.start,
onPressed: () {},
style: GradientElevatedButton.styleFrom(
backgroundGradient: const LinearGradient(
colors: [
Color(0xFFF84040),
Color(0xFF73A331),
],
begin: Alignment.centerRight,
end: Alignment.centerLeft,
),
iconColor: Colors.white,
foregroundColor: Colors.white,
),
child: const Text(
"This is GradientElevatedButton using styleFrom"),
),
),
const SizedBox(
height: 20,
),
Sample(
title: "USE `GradientElevatedButton.icon`",
child: GradientElevatedButton.icon(
iconAlignment: IconAlignment.start,
onPressed: () {},
style: GradientElevatedButton.styleFrom(
shadowColor: Colors.blue,
backgroundGradient: const LinearGradient(
colors: [
Color(0xFFF84040),
Color(0xFF73A331),
],
begin: Alignment.centerRight,
end: Alignment.centerLeft,
),
iconColor: Colors.white,
foregroundColor: Colors.white,
),
icon: Icon(Icons.add),
label: Text("Add"),
),
),
const SizedBox(
height: 20,
),
Sample(
title: "USE disabled `GradientElevatedButton`",
child: GradientElevatedButton(
onPressed: null,
style: GradientElevatedButton.styleFrom(
shadowColor: Colors.red,
disabledBackgroundGradient: LinearGradient(
colors: [
Colors.grey.withAlpha(200),
Colors.grey,
Colors.grey.withAlpha(200),
],
begin: Alignment.centerRight,
end: Alignment.centerLeft,
),
iconColor: Colors.white,
foregroundColor: Colors.white,
),
child: const Text(
"This is GradientElevatedButton using styleFrom"),
),
),
],
),
),
);
}
}
class Sample extends StatelessWidget {
final String title;
final Widget child;
const Sample({super.key, required this.title, required this.child});
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Align(
alignment: Alignment.centerLeft,
child: Text(
title,
style: TextTheme.of(context).titleMedium,
),
),
SizedBox(
height: 10,
),
child,
],
),
);
}
}
Issues and Feedback
如果您有任何问题或建议，请访问 Issues and Feedback 提交反馈。您也可以发送邮件至 chegz.dev@gmail.com，我们期待您的宝贵意见！
更多关于Flutter渐变高亮按钮插件gradient_elevated_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
