Flutter自定义按钮插件d_button的使用
Flutter自定义按钮插件d_button的使用
d_button 是一个自定义按钮插件，允许你创建并重新设置样式。它可用于一个或多个小部件。按钮的子组件可以填充任何小部件，只要空间足够。对于 DButton.circle()，仅用于布局圆形。
你可以修改上述所有按钮以适应你的喜好，并尽可能发挥创意。
使用方法
1. Circle
DButtonCircle(
mainColor: Colors.blue, // 主颜色
onClick: () {}, // 点击事件
diameter: 40, // 直径
child: Icon(
Icons.favorite, // 图标
color: Colors.white, // 图标颜色
),
),
2. Shadow
DButtonShadow(
mainColor: Colors.blue, // 主颜色
splashColor: Colors.cyan, // 溅起颜色
onClick: () => {}, // 点击事件
radius: 30, // 圆角半径
height: 50, // 高度
child: Text(
"D'Button Shadow 1", // 文本
style: TextStyle(color: Colors.white), // 文本颜色
),
),
3. Flat
DButtonFlat(
mainColor: Colors.blue, // 主颜色
onClick: () {}, // 点击事件
child: Text(
"D'Button Flat 1", // 文本
style: TextStyle(color: Colors.white), // 文本颜色
),
),
4. Elevation
DButtonElevation(
mainColor: Colors.blue, // 主颜色
onClick: () {}, // 点击事件
child: Text(
"D'Button Elevation 1", // 文本
style: TextStyle(color: Colors.white), // 文本颜色
),
),
5. Border
DButtonBorder(
borderColor: Colors.pink, // 边框颜色
mainColor: Colors.blue, // 主颜色
radius: 0, // 圆角半径
onClick: () {}, // 点击事件
child: Text(
"D'Button Border 1", // 文本
style: TextStyle(color: Colors.white), // 文本颜色
),
),
6. Custom Child
DButtonShadow(
radius: 8, // 圆角半径
padding: EdgeInsets.only(right: 8), // 内边距
shadowColor: Colors.grey, // 阴影颜色
onClick: () {}, // 点击事件
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
),
child: Image.network(
'https://images.unsplash.com/photo-1590829197118-b0609523669d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80',
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Title',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
Text(
"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
完整示例
以下是完整的示例代码，展示如何在应用中使用这些按钮。
import 'package:d_button/d_button.dart';
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('D\'Button')),
backgroundColor: Colors.white,
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
ListTile(title: Text('Circle', style: TextStyle(fontSize: 18))),
DButtonCircle(
mainColor: Colors.blue,
onClick: () {},
diameter: 40,
child: Icon(
Icons.favorite,
color: Colors.white,
),
),
SizedBox(height: 16),
FittedBox(
child: DButtonCircle(
mainColor: Colors.white,
onClick: () {},
padding: EdgeInsets.all(8),
shadowColor: Colors.cyan,
child: Icon(
Icons.bookmark,
color: Colors.blue,
size: 15,
),
),
),
SizedBox(height: 16),
DButtonCircle(
mainColor: Colors.amber,
onClick: () {},
diameter: 30,
child: Text('1'),
),
SizedBox(height: 16),
ListTile(title: Text('Shadow', style: TextStyle(fontSize: 18))),
DButtonShadow(
mainColor: Colors.blue,
splashColor: Colors.cyan,
onClick: () => {},
radius: 30,
height: 50,
child: Text(
"D'Button Shadow 1",
style: TextStyle(color: Colors.white),
),
),
SizedBox(height: 16),
FittedBox(
child: DButtonShadow(
mainColor: Colors.white,
shadowColor: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 16),
onClick: () => print('asasasasas'),
radius: 8,
child: Text("D'Button Shadow 2"),
),
),
SizedBox(height: 16),
DButtonShadow(
mainColor: Colors.amber,
shadowColor: Colors.blue,
splashColor: Colors.yellow,
onClick: () => print('asasasasas'),
radius: 30,
height: 30,
width: 150,
child: Text("D'Button Shadow 3"),
),
SizedBox(height: 16),
DButtonShadow(
mainColor: Colors.amber,
shadowColor: Colors.grey,
splashColor: Colors.yellow,
onClick: null,
disableColor: Colors.grey[300]!,
radius: 30,
height: 30,
width: 150,
child: Text("D'Button Shadow 4"),
),
SizedBox(height: 16),
DButtonShadow(
mainColor: Colors.white,
shadowColor: Colors.blue,
splashColor: Colors.yellow,
onClick: () => {},
radius: 30,
height: 30,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("D'Button Shadow 5"),
SizedBox(width: 16),
Icon(Icons.arrow_forward),
],
),
),
SizedBox(height: 16),
FittedBox(
child: DButtonShadow(
mainColor: Colors.blue,
splashColor: Colors.yellow,
onClick: () => {},
padding: EdgeInsets.symmetric(horizontal: 30),
radius: 30,
height: 30,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("D'Button Shadow 6"),
SizedBox(width: 16),
Icon(Icons.arrow_forward),
],
),
),
),
SizedBox(height: 16),
DButtonShadow(
mainColor: Colors.amber,
splashColor: Colors.amberAccent,
onClick: () => {},
padding: EdgeInsets.symmetric(horizontal: 16),
radius: 4,
height: 40,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("D'Button Shadow 7"),
Icon(Icons.arrow_forward),
],
),
),
SizedBox(height: 16),
DButtonShadow(
mainColor: Colors.cyan,
splashColor: Colors.blue,
onClick: () => {},
radius: 4,
height: 40,
width: 40,
child: Icon(Icons.filter),
),
SizedBox(height: 10),
Divider(),
ListTile(title: Text('Flat', style: TextStyle(fontSize: 18))),
DButtonFlat(
mainColor: Colors.blue,
onClick: () {},
child: Text(
"D'Button Flat 1",
style: TextStyle(color: Colors.white),
),
),
SizedBox(height: 16),
DButtonFlat(
width: 150,
radius: 150,
mainColor: Colors.amber,
onClick: () {},
child: Text("D'Button Flat 2"),
),
SizedBox(height: 16),
FittedBox(
child: DButtonFlat(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
mainColor: Colors.white,
onClick: () {},
child: Text("D'Button Flat 3"),
),
),
SizedBox(height: 16),
FittedBox(
child: DButtonFlat(
mainColor: Colors.blue,
onClick: null,
child: Text("D'Button Flat 4"),
),
),
SizedBox(height: 16),
DButtonFlat(
mainColor: Colors.amber,
onClick: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("D'Button Flat 5"),
Icon(Icons.arrow_forward),
],
),
),
SizedBox(height: 16),
FittedBox(
child: DButtonFlat(
radius: 150,
height: 50,
mainColor: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 16),
onClick: () {},
child: Row(
children: [
Text("D'Button Flat 6"),
SizedBox(width: 16),
Icon(Icons.arrow_forward),
],
),
),
),
SizedBox(height: 16),
DButtonFlat(
mainColor: Colors.cyan,
onClick: () => {},
radius: 4,
height: 30,
width: 30,
child: Icon(Icons.search),
),
SizedBox(height: 10),
Divider(),
ListTile(
title: Text('Elevation', style: TextStyle(fontSize: 18))),
DButtonElevation(
mainColor: Colors.blue,
onClick: () {},
child: Text(
"D'Button Elevation 1",
style: TextStyle(color: Colors.white),
),
),
SizedBox(height: 16),
DButtonElevation(
elevation: 8,
width: 150,
radius: 150,
mainColor: Colors.amber,
onClick: () {},
child: Text("D'Button Elevation 2"),
),
SizedBox(height: 16),
FittedBox(
child: DButtonElevation(
elevation: 20,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
mainColor: Colors.white,
onClick: () {},
child: Text("D'Button Elevation 3"),
),
),
SizedBox(height: 16),
FittedBox(
child: DButtonElevation(
mainColor: Colors.blue,
onClick: null,
child: Text("D'Button Elevation 4"),
),
),
SizedBox(height: 16),
DButtonElevation(
mainColor: Colors.amber,
onClick: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("D'Button Elevation 5"),
Icon(Icons.arrow_forward),
],
),
),
SizedBox(height: 16),
FittedBox(
child: DButtonElevation(
radius: 150,
height: 50,
elevation: 30,
mainColor: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 16),
onClick: () {},
child: Row(
children: [
Text("D'Button Elevation 6"),
SizedBox(width: 16),
Icon(Icons.arrow_forward),
],
),
),
),
SizedBox(height: 16),
DButtonElevation(
mainColor: Colors.white,
shadowColor: Colors.blue,
onClick: () => {},
elevation: 40,
radius: 16,
height: 50,
width: 50,
child: Icon(Icons.menu),
),
SizedBox(height: 10),
Divider(),
ListTile(title: Text('Border', style: TextStyle(fontSize: 18))),
DButtonBorder(
borderColor: Colors.pink,
mainColor: Colors.blue,
radius: 0,
onClick: () {},
child: Text(
"D'Button Border 1",
style: TextStyle(color: Colors.white),
),
),
SizedBox(height: 16),
DButtonBorder(
borderColor: Colors.blue,
width: 150,
radius: 150,
mainColor: Colors.amber,
onClick: () {},
child: Text("D'Button Border 2"),
),
SizedBox(height: 16),
FittedBox(
child: DButtonBorder(
borderColor: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 8),
mainColor: Colors.white,
onClick: () {},
radius: 0,
child: Text("D'Button Border 3"),
),
),
SizedBox(height: 16),
FittedBox(
child: DButtonBorder(
borderColor: Colors.amber,
mainColor: Colors.blue,
onClick: null,
child: Text("D'Button Border 4"),
),
),
SizedBox(height: 16),
DButtonBorder(
borderColor: Colors.blue,
mainColor: Colors.amber,
onClick: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("D'Button Border 5"),
Icon(Icons.arrow_forward),
],
),
),
SizedBox(height: 16),
FittedBox(
child: DButtonBorder(
borderColor: Colors.blue,
radius: 150,
height: 50,
mainColor: Colors.blue,
padding: EdgeInsets.symmetric(horizontal: 16),
onClick: () {},
child: Row(
children: [
Text("D'Button Border 6"),
SizedBox(width: 16),
Icon(Icons.arrow_forward),
],
),
),
),
SizedBox(height: 16),
DButtonBorder(
borderColor: Colors.blue,
mainColor: Colors.white,
onClick: () => {},
radius: 16,
height: 50,
width: 50,
child: Icon(Icons.filter),
),
SizedBox(height: 10),
Divider(),
ListTile(
title: Text('Custom Child', style: TextStyle(fontSize: 18))),
DButtonShadow(
radius: 8,
padding: EdgeInsets.only(right: 8),
shadowColor: Colors.grey,
onClick: () {},
child: Row(
children: [
ClipRRect(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(8),
bottomLeft: Radius.circular(8),
),
child: Image.network(
'https://images.unsplash.com/photo-1590829197118-b0609523669d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=400&q=80',
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
SizedBox(width: 8),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Title',
style: TextStyle(fontWeight: FontWeight.bold),
),
SizedBox(height: 8),
Text(
"Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.",
maxLines: 2,
overflow: TextOverflow.ellipsis,
),
],
),
),
],
),
),
],
),
),
),
);
}
}
更多关于Flutter自定义按钮插件d_button的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter自定义按钮插件d_button的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
d_button 是 Flutter 中一个常用的自定义按钮插件，它可以帮助开发者快速创建各种样式的按钮。使用 d_button，你可以轻松地自定义按钮的样式、形状、大小、颜色等属性，以满足不同的 UI 设计需求。
以下是如何使用 d_button 插件的基本步骤：
1. 添加依赖
首先，你需要在 pubspec.yaml 文件中添加 d_button 插件的依赖：
dependencies:
flutter:
sdk: flutter
d_button: ^1.0.0 # 请使用最新版本
然后运行 flutter pub get 以安装依赖。
2. 导入包
在需要使用 d_button 的 Dart 文件中，导入插件：
import 'package:d_button/d_button.dart';
3. 使用 DButton
DButton 提供了多种构造函数来创建不同类型的按钮。以下是一些常见的用法示例：
基本用法
DButton(
onPressed: () {
// 按钮点击事件
print('Button Pressed!');
},
child: Text('Click Me'),
)
自定义样式
你可以通过 style 参数来自定义按钮的样式：
DButton(
onPressed: () {
print('Button Pressed!');
},
style: ElevatedButton.styleFrom(
primary: Colors.blue, // 背景色
onPrimary: Colors.white, // 文字颜色
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10), // 内边距
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8), // 圆角
),
),
child: Text('Custom Style'),
)
图标按钮
DButton 也支持图标按钮：
DButton.icon(
onPressed: () {
print('Icon Button Pressed!');
},
icon: Icon(Icons.star),
label: Text('Star'),
)
全宽按钮
你可以通过设置 fullWidth 参数来使按钮占据父容器的全部宽度：
DButton(
onPressed: () {
print('Full Width Button Pressed!');
},
fullWidth: true,
child: Text('Full Width Button'),
)
禁用按钮
通过设置 enabled 参数为 false，可以禁用按钮：
DButton(
onPressed: () {
print('This button is disabled.');
},
enabled: false,
child: Text('Disabled Button'),
)