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

Question

I want to make a circle on each vertex of boxes(sqaure) and lines on each edge. How can I achieve that in flutter?

I have used Box Decoration to make those boxes. Below is the code:

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

Please suggest how can I achieve this.

Below is expected for circle + I want to add lines on edges too :

and this is my output:

Answer 1

Here is the full solution ( h donates Horizontal, and v Vertical)

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