dot_arround_rectangle.dart

// Copyright (c) 2019, the Dart project authors.  Please see the AUTHORS file
// for details. All rights reserved. Use of this source code is governed by a
// BSD-style license that can be found in the LICENSE file.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    Key? key,
    required this.title,
  }) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CircleList(
              width: 200,
              height: 150,
              radius: 4,
              gap: 4,
              color: Colors.blue,
            )
          ],
        ),
      ),
    );
  }
}
class CircleList extends StatefulWidget {
  final double width;
  final double height;
  final double radius;
  final double gap;
  final Color color;

  CircleList({
    required this.width,
    required this.height,
    required this.radius,
    required this.gap,
    required this.color,
  });

  @override
  _CircleListState createState() => _CircleListState();
}

class _CircleListState extends State<CircleList>
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 1000),
      vsync: this,
    )..repeat(reverse: true);
    _animation = Tween<double>(begin: -widget.radius, end: widget.radius)
        .animate(_controller);
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      size: Size(widget.width, widget.height),
      painter: CirclePainter(radius: widget.radius, gap: widget.gap, color: widget.color),
      child: LayoutBuilder(
        builder: (context, constraints) {
          return Stack(
            children: List.generate(
              ((constraints.maxWidth - widget.radius) / (widget.radius * 2 + widget.gap)).floor(),
              (i) {
                return AnimatedBuilder(
                  animation: _controller,
                  builder: (context, child) {
                    return Transform.translate(
                      offset: Offset(
                        sin(_controller.value * pi * 2 + i * pi / 2) * widget.radius,
                        cos(_controller.value * pi * 2 + i * pi / 2) * widget.radius,
                      ),
                      child: child,
                    );
                  },
                  child: CustomPaint(
                    painter: CirclePainter(
                      radius: widget.radius,
                      gap: widget.gap,
                      color: widget.color,
                    ),
                  ),
                );
              },
            ),
          );
        },
      ),
    );
  }
}

class CirclePainter extends CustomPainter {
  final double radius;
  final double gap;
  final Color color;

  CirclePainter({required this.radius, required this.gap, required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final rect = Rect.fromLTRB(0, 0, size.width, size.height);
    final paint = Paint()..color = color;

    for (double i = radius; i < size.width; i += radius * 2 + gap) {
      if (i == radius || i == size.width - radius) {
        for (double j = radius; j < size.height; j += radius * 2 + gap) {
          canvas.drawCircle(Offset(i, j), radius, paint);
        }
      } else {
        canvas.drawCircle(Offset(i, radius), radius, paint);
        canvas.drawCircle(Offset(i, size.height - radius), radius, paint);
      }
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}