[英]How to make a small rounded rectangle in Flutter
The red rectangle center of my widget is too big and is not responsive to width and height arguments.我的小部件的红色矩形中心太大,对宽度和高度参数没有响应。
I have updated flutter, and android studio.我已经更新了 flutter 和 android studio。 I started with a container in the shape of a circle then, I used a flatbutton and gave it a shape.我从一个圆形的容器开始,然后我使用了一个扁平按钮并给了它一个形状。 but when it becomes the rectangle it is the same size as the circle it resizes in. _isRecord is a boolean that is toggled when the button is pressed.但是当它变成矩形时,它的大小与它调整大小的圆的大小相同。 _isRecord 是一个布尔值,在按下按钮时会切换。
return Container(
width: 80.0,
height: 80.0,
child: Container(
child: FlatButton(
onPressed: _press,
),
decoration: new BoxDecoration(
color: Colors.red,
shape: _isRecording ? BoxShape.rectangle : BoxShape.circle,
borderRadius: _isRecording ? BorderRadius.all(Radius.circular(8.0)) : null,
),
),
decoration: new BoxDecoration(
color: Colors.black,
shape: BoxShape.circle,
border: Border.all(width: 5.0, color: Colors.white),
),
);
It should look and function like the Voice Memos' record button.它的外观和功能应该类似于语音备忘录的录音按钮。 It should be a white circle stroke with a red center that when pressed becomes a smaller, rounded rectangle.它应该是一个带有红色中心的白色圆圈笔划,按下时会变成一个较小的圆角矩形。
You can use your Widget inside Padding
您可以在Padding
使用您的 Widget
exam:考试:
InkWell(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
onTap: () {
setState(() {
_isRecording = !_isRecording;
});
},
child: DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,
border: Border.all(width: 5.0, color: Colors.white),
),
child: Padding(
padding: EdgeInsets.all(32.0),
child: Container(
width: 40.0,
height: 40.0,
child: Container(
decoration: new BoxDecoration(
color: Colors.red,
shape:
_isRecording ? BoxShape.rectangle : BoxShape.circle,
borderRadius: _isRecording
? BorderRadius.all(Radius.circular(8.0))
: null,
),
),
),
),
),
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.