Flutter 그려진 모든 원들이 연결 되도록 만들기 (Make all drawn circles connect)공부방/Flutter2023. 6. 23. 17:35
Table of Contents
그려진 모든 원들은 서로 연결 될수 있게 만들어진 코드이다.
가작 작은원을 child Node라 할때 바로 위의 부모가 가지는 child node 의 개수에 따라
다양한 모양이 나온다.
chil node 노드 개수에 따른 모양은 아래와 같다.
1. child node = 1
2. child node = 2
3. child node = 3
4. child node = 4
5. child node = 5
6. child node = 6
7. child node = 7
8. child node = 8
9. child node = 9
10. child node = 10
11. child node = 11
11. child node = 15
11. child node = 30
child node의 개수가 늘어날수록 점점 원이 되어간다.
그리고 이제 숫자를 더 높이면 폰이 멈춘다.....
도형 코드
import 'dart:math';
import 'package:flutter/material.dart';
class BubbleTree extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
child: LayoutBuilder(
builder: (context, constraints) {
return CustomPaint(
painter: BubbleTreePainter(constraints: constraints),
);
},
),
);
}
}
class BubbleTreePainter extends CustomPainter {
static const childNode = 30;
final BoxConstraints constraints;
BubbleTreePainter({required this.constraints});
@override
void paint(Canvas canvas, Size size) {
double radius = constraints.maxWidth/5;
Offset center = Offset(constraints.maxWidth/2 ,constraints.maxHeight/2);
Paint bubblePaint = Paint()
..color = Colors.blue
..style = PaintingStyle.stroke
..strokeWidth = 2.0;
drawBubble(canvas, center, radius, bubblePaint);
}
void drawBubble(Canvas canvas, Offset center, double radius, Paint paint) {
canvas.drawCircle(center, radius, paint);
if (radius > 10) {
double childRadius = radius / 2;
double angle = 0.0;
double increment = 2 * 3.14159 / childNode; // 4개의 자식 노드를 가정
for (int i = 0; i < childNode; i++) {
double childCenterX = center.dx + radius * cos(angle);
double childCenterY = center.dy + radius * sin(angle);
Offset childCenter = Offset(childCenterX, childCenterY);
drawBubble(canvas, childCenter, childRadius, paint);
angle += increment;
}
}
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}
반응형
'공부방 > Flutter' 카테고리의 다른 글
Flutter web 에서 Flutter app event call (0) | 2023.07.04 |
---|---|
Flutter web build command (0) | 2023.07.04 |
Flutter 원으로 피라미드 그리기 (flutter Draw a Pyramid with Circles) (0) | 2023.06.23 |
dart extends, implements, with, mixin, abstract 키워드 정리 (0) | 2023.03.28 |
Bloc vs Cubit (0) | 2023.03.27 |
@soycrab :: 꿀맛코딩
행복한 코딩을 위하여!
포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!