如何在盒子的角上打圆呢？

Question

我想在方格（sqaure）的每个顶点上画一个圆，并在每个边上画线。我该如何在颤抖中实现？

我曾用Box Decoration做那些盒子。下面是代码：

        GridView.builder(
          itemCount: 20,
          itemBuilder: (context, index) =>
              GestureDetector(
                  onTap: (),
                  child: Container(
                      decoration: BoxDecoration(
                          color: Colors.green, shape: BoxShape.rectangle),
                          color: Colors.red, shape: BoxShape.circle);
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 4,
            mainAxisSpacing: 2,
            crossAxisSpacing: 2,
          ),

请提出我该如何实现。

下面的圆圈应该是圆的+我也想在边缘上添加线条：

这是我的输出：

Answer 1

这是完整的解决方案（{h捐赠水平，而v捐赠垂直）

double _hPadding = 72, _vPadding = 20, _dotSize = 20;
int _hBox = 3, _vBox = 4;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(),
    body: Stack(
      children: <Widget>[
        Padding(
          padding: EdgeInsets.symmetric(horizontal: _hPadding, vertical: _vPadding),
          child: _buildBoxLayout(),
        ),
        Padding(
          padding: EdgeInsets.symmetric(horizontal: _hPadding - _dotSize / 2, vertical: _vPadding - _dotSize / 2),
          child: _buildDotLayout(),
        ),
      ],
    ),
  );
}

Widget _buildBoxLayout() {
  return GridView.builder(
    itemCount: _hBox * _vBox,
    itemBuilder: (context, index) => Container(color: Colors.grey[((index % 2) + 2) * 100]),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: _hBox),
  );
}

Widget _buildDotLayout() {
  double spacing = (MediaQuery.of(context).size.width - _hPadding * 2 - _hBox * _dotSize) / _hBox;
  return GridView.builder(
    itemCount: (_hBox + 1) * (_vBox + 1),
    itemBuilder: (context, index) => Container(decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.grey[700])),
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
      crossAxisCount: _hBox + 1,
      crossAxisSpacing: spacing,
      mainAxisSpacing: spacing
    ),
  );
}