如何在Flutter中制作一个小的圆形矩形 [英] 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.

我已经更新了flutter和android studio。我先从一个圆形的容器开始，然后我使用了扁平按钮并给了它一个形状。但是，当它变成矩形时，它的大小与它调整大小的圆形的大小相同。_isRecord是一个布尔值，当按下按钮时会对其进行切换。

I have updated flutter, and 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.

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.

推荐答案

您可以使用填充

考试中的小部件：

    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,
              ),
            ),
          ),
        ),
      ),
    )

这篇关于如何在Flutter中制作一个小的圆形矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！