我在项目中是想实现如图带圆角的Container，使用chatGPT生成步骤如下。
首先，生成渐变色的Container
生成的Container代码如下：
Container(
margin: EdgeInsets.fromLTRB(30, 0, 30, 0),
height: 200.0,
width: double.infinity,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF3238C5),
Color(0xFF6953E9),
],
),
),
)
此时，并没有圆角，所以再告诉AI“再给他左上，右下，左下5个像素的圆角，右上80像素。”
Container(
margin: EdgeInsets.fromLTRB(30, 0, 30, 0),
height: 200.0,
width: double.infinity,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0),
topRight: Radius.circular(80.0),
),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF3238C5),
Color(0xFF6953E9),
],
),
),
)
此时我因为做了一些其他的事情，所以我重新打开一个一个窗口，并问
我需要对它的内容增加文字，从左至右，从上至下，写上标题：当前佣金，正文：字号比较大的数字，然后右边有一个提现的按钮。
Container(
margin: EdgeInsets.fromLTRB(30, 0, 30, 0),
height: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0),
topRight: Radius.circular(80.0),
),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF3238C5),
Color(0xFF6953E9),
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 20),
child: Text(
'当前佣金',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
Padding(
padding: const EdgeInsets.only(left: 20, top: 10),
child: Text(
'¥ 200.00',
style: TextStyle(
fontSize: 40,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
],
),
alignment: Alignment.centerLeft,
),
可以将这个代码放在最外层的 widget 中，并且将提现按钮放置在 Container 外面。因为它说将按钮放置在Container外面，所以并没有写按钮。
不，提现的按钮需要放在Container里面，你可以将它改为一个提现的图标，但是必须在Container里面。
Container(
margin: EdgeInsets.fromLTRB(30, 0, 30, 0),
height: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0),
topRight: Radius.circular(80.0),
),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF3238C5),
Color(0xFF6953E9),
],
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 0, 10),
child: Text(
"当前佣金",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w800,
color: Colors.white,
),
),
),
Text(
"123456789.00",
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.w800,
color: Colors.white,
),
),
Spacer(),
IconButton(
icon: Icon(Icons.input, color: Colors.white),
onPressed: () {
// Your code here
},
),
],
),
),
此时样式已经乱了，终于明白为什么它要说建议将按钮放在外面，但是原因我还没有去查找，我就将按钮改成了图标，并继续询问：将按钮改成可以点击的图标。
Container(
margin: EdgeInsets.fromLTRB(30, 0, 30, 0),
height: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0),
topRight: Radius.circular(80.0),
),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF3238C5),
Color(0xFF6953E9),
],
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 0, 10),
child: Text(
"当前佣金",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 10, 0, 10),
child: Text(
"100.0",
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.w800,
color: Colors.white,
),
),
),
],
),
GestureDetector(
onTap: () {
// Perform the withdrawal action
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 60, 20, 0),
child: Icon(
Icons.arrow_forward_ios,
color: Colors.white,
size: 48,
),
),
),
],
),
);
最后的图标为需要再自己修改一下，加个阴影，看看是不是还挺像的。
对了，忘记给Container加上阴影，所以最后再来一下：
Container(
margin: EdgeInsets.fromLTRB(30, 0, 30, 0),
height: 180,
decoration: BoxDecoration(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(5.0),
bottomLeft: Radius.circular(5.0),
bottomRight: Radius.circular(5.0),
topRight: Radius.circular(80.0),
),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomRight,
colors: [
Color(0xFF3238C5),
Color(0xFF6953E9),
],
),
boxShadow: [
BoxShadow(
color: Colors.black26,
offset: Offset(0, 7),
blurRadius: 6.0,
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 30, 0, 10),
child: Text(
"当前佣金",
style: TextStyle(
fontSize: 20.0,
fontWeight: FontWeight.w500,
color: Colors.white,
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(20, 10, 0, 10),
child: Text(
"100.0",
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.w800,
color: Colors.white,
),
),
),
],
),
GestureDetector(
onTap: () {
// Perform the withdrawal action
},
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 60, 20, 0),
child: Icon(
Icons.arrow_forward_ios,
color: Colors.white,
size: 48,
),
),
),
],
),
);
最后对比一下，是不是还蛮像的？