CODEWITHSUNDEEP
androidflutterdart
Prianca
Prianca

Reputation: 1165

How to make circle on corners of box in flutter?

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 : enter image description here

and this is my output:

enter image description here

Upvotes: 1

Views: 1127

Answers (1)

CopsOnRoad
CopsOnRoad

Reputation: 267734

enter image description here

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

Upvotes: 1

Related Questions