在Flutter中实现这种类型的Button可以通过自定义按钮样式和交互来实现。以下是一种可能的实现方式:
下面是一个示例代码,演示了如何实现一个自定义的按钮:
import 'package:flutter/material.dart';
class CustomButton extends StatelessWidget {
final String text;
final IconData icon;
final VoidCallback onPressed;
const CustomButton({Key key, this.text, this.icon, this.onPressed})
: super(key: key);
@override
Widget build(BuildContext context) {
return InkWell(
onTap: onPressed,
child: Container(
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(icon, color: Colors.white),
SizedBox(width: 8),
Text(
text,
style: TextStyle(color: Colors.white),
),
],
),
),
);
}
}
使用这个自定义按钮的示例代码如下:
CustomButton(
text: 'Submit',
icon: Icons.check,
onPressed: () {
// 处理按钮点击事件
},
)
这个示例中的自定义按钮具有蓝色背景、圆角边框、白色图标和文字。你可以根据需要自行调整样式和交互效果。
腾讯云相关产品和产品介绍链接地址:
领取专属 10元无门槛券
手把手带您无忧上云