[英]How to make a small rounded rectangle in Flutter
我的小部件的紅色矩形中心太大,對寬度和高度參數沒有響應。
我已經更新了 flutter 和 android studio。 我從一個圓形的容器開始,然后我使用了一個扁平按鈕並給了它一個形狀。 但是當它變成矩形時,它的大小與它調整大小的圓的大小相同。 _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),
),
);
它的外觀和功能應該類似於語音備忘錄的錄音按鈕。 它應該是一個帶有紅色中心的白色圓圈筆划,按下時會變成一個較小的圓角矩形。
您可以在Padding
使用您的 Widget
考試:
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.