[Flutter] Stack의 Widgets를 원형으로 배치하기 (Circle Layout)

개요

---

얼마 전에 플러터로 동글동글한 UI를 개발하던 중 Stack 구조에 자식위젯들을 원형으로 배치해야 되는 일이 생겼다.

가장 효율적인 원형배치를 하기 위해서는 dart:math 패키지에 있는 삼각함수 기능들 (sin, cos) 등을 사용할 필요가 있었고, 깔끔한 방법으로 구현을 하게 되어서 공유를 하고 싶었다.

아래의 사진은 내가 구현한 원형 스택 구조의 모습이다.

 

 

 

과일의 이름들을 따서 각 개수만큼 자동으로 원형 배치가 이뤄지는 구조다.

이를 구현하기 위해서는 우선 삼각비에 대해 이해할 필요가 있다.

중학교 때 배웠던 내용이지만 시간이 지나면서 거의 기억이 나지 않았는데, 원형 좌표를 구현하기 위해 원 방정식을 이용하다 더 쉬운 방법인 삼각비를 기억해 내게 되었다.

 

 

삼각비를 통한 계산 공식

---

 

 

자, 복습을 해보자.

 

여기서 우리가 사용할 것은 sin, cos이다

 

Stack의 Positioined는 흡사 x, y 좌표계를 보는 것 같다.

이를 통해 우리가 알고 있는 값인 빗변의 길이 (원의 반지름)을 이용해서

x 값과 y값을 구할 수 있다.

 

원의 반지름인 distance = c

x = b

y = a

라고 가정할 때,

 

x = distance * cos(A)

y = distance * sin(A)

가 된다.

 

 

여기서 우리는 A 값도 구해야 하는데 수학에서 A는 radian이라는 단위를 사용한다.

하지만 우리는 radian 보단 각도(degree)를 이용하는 게 계산하기 더 쉽기 때문에 해당 값도 구하는 공식을 찾아봐야 한다.

 

 

각도(degree)를 통해 얻고자 하는 radian의 공식은 다음과 같다.

 

 

1 라디안 = (pi/180) * degree

 

 

그렇다면 원중심과의 거리가 10이고 각도가 30도일 때 x, y 좌표를 구하는 공식은 다음과 같다

 

x = 10 * cos( (3.14/180) * 30 )

y = 10 * sin( (3.14/180) * 30 ) 

 

x = 9.99...

y = 0.09...

 

코드로 변형

---

이제 공식을 통해 코드를 구현해 보자

 

아래의 코드는 라디안 값으로 변환하기 위한 메서드이다.

 

  //라디안값으로 변환하는 메서드
  double getRadian(double degree) {
    return (pi / 180) * degree;
  }

 

 

그리고 아래의 코드는 각도와 거리에 따른 x, y 좌표를 구하는 메서드이다.

  //각도와 거리에 따른 x,y 좌표값 구하기
  Offset getPosition({required double degree, required double distance}) {
    final double radian = getRadian(degree); //각도를 라디안 단위로 변경
    final double dx = distance * cos(radian);
    final double dy = distance * sin(radian);
    return Offset(dx, dy);
  }

 

 

 

그러면 나는 어떤 식으로 Stack에 Positioned를 이용하여 원형으로 배치를 했을까?

아래의 전체코드를 통해 살펴볼 수 있다.

 

 

전체 코드 <main.dart>

import 'dart:math';

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Cirlcle Stack Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Cirlcle Stack Example'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  MyHomePage({super.key, required this.title});

  final String title;

  final double stackSize = 700;
  final double childSize = 60;

  final List<String> fruits = [
    '사과',
    '바나나',
    '딸기',
    '포도',
    '수박',
    '멜론',
    '오렌지',
    '감',
    '레몬',
    '참외',
    '배',
  ];

  @override
  Widget build(BuildContext context) {

    //자식위젯의 기준점이 좌측 상단이기 때문에
    //중심점의 위치는 스택의 사이즈/2를 한 값에 자식위젯의 사이즈/2 를 뺀다
    final Offset centerOffset = Offset(stackSize / 2 - (childSize / 2), stackSize / 2 - (childSize / 2));
    const double distance = 250; //중심점에서 떨어질 거리
    final double degreeInterval = 360 / fruits.length; //원의 각도 360도를 과일들의 개수만큼 나눠서 간격 구하기

    final List<Widget> fruitWidgets = [];

    for (int i = 0; i < fruits.length; i++) {
      final double degree = (i * degreeInterval) + 90; //12시 방향에서 시작하기 위해 각도 90도를 더함
      final Offset position = getPosition(degree: degree, distance: distance) + centerOffset;

      fruitWidgets.add(Positioned(
        left: position.dx,
        bottom: position.dy,
        child: Container(
          color: Colors.orangeAccent.withOpacity(0.8),
          width: childSize,
          height: childSize,
          child: Center(
              child: Text(
            fruits[i],
            style: const TextStyle(fontWeight: FontWeight.bold),
          )),
        ),
      ));
    }

    return Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        body: Center(
          child: Container(
            height: stackSize,
            width: stackSize,
            decoration: BoxDecoration(border: Border.all(color: Colors.black)),
            child: Stack(
              children: fruitWidgets,
            ),
          ),
        ));
  }

  //각도와 거리에 따른 x,y 좌표값 구하기
  Offset getPosition({required double degree, required double distance}) {
    final double radian = getRadian(degree); //각도를 라디안 단위로 변경
    final double dx = distance * cos(radian);
    final double dy = distance * sin(radian);
    return Offset(dx, dy);
  }

  //라디안값으로 변환하는 메서드
  double getRadian(double degree) {
    return (pi / 180) * degree;
  }
}

 

1. 스택의 중앙위치를 구하도록 한다. 여기서 나는 스택의 전체크기를 알고 있기 때문에 중앙의 좌표는 크기/2가 된다.

하지만 자식 위젯 좌측 상단이 기준점이 되므로 자식위젯의 크기/2를 더 빼주면 자식위젯이 배치 됐을 때 정확한 중앙 위치로 배치되는 것처럼 보이게 할 수 있다.

 

2. 원의 각도인 360도를 과일의 개수만큼 나눠서 과일 간의 간격을 일정하게 두기 위한 각도를 구했다.

 

3. 과일의 개수만큼 반복하여 여태껏 복습한 수학공식을 적용해 좌표를 적용한다.

 

 

만약 여기서 stack의 사이즈가 바뀌게 된다면 distance의 값도 바꿔줘야 하는데 distance의 값을 아예 stackSize/1.5로 두면 stackSize가 바뀌어도 원의 크기랑 배치는 유지할 수 있다. (자식 위젯의 크기도 나눠야 stackSize 가 줄어들어도 자식 크기가 줄어들 거다)

 

 

내 포트폴리오 웹에서도 이를 적용해서 원형 레이아웃을 완성한 모습이다.

나의 경우엔 MediaQuery.sizeOf(context)를 통해 창의 사이즈에 따라 stackSize, iconsSize들이 변하도록 만들었다.