토스 앱을 보면 우측 상단에 새로운 알림이 있을 경우 종 아이콘 우측 상단에 빨간 동그라미를 보여준다.
이걸 플러터로 구현하려면 어떻게 구현할 수 있을까?
먼저, 종 모양의 아이콘은 asset/images/icon/notification.png에 담겨있다고 가정해보자.
나는 아직까지 UI를 보면 위치에 대한 감을 잡기가 어렵다. 그래서 사고 과정부터 나열해보려고 한다. (ㅋㅋ 약간 연애를 글로 배우는 느낌)
먼저, 종을 어딘가에 위치시킨 뒤, 종을 기준으로 topRight의 위치에 빨간 동그라미를 그려서 얹으면 될 것 같다.
이 때, Positioned.Fill과 Align에 대해서 알아두면 좋다.
Positioned.Fill
Positioned.fill은 Stack 위젯 내에서 사용된다. 스택은 자식 위젯들을 쌓아 올릴 수 있게 해주는데, 이 때 Positioned.fill을 사용하면 자식 위젯이 Stack이 차지하는 전체 공간을 채우도록 할 수 있다.
기본적으로 Positioned 위젯은 자식 위젯의 위치를 Stack 내에서 좌표를 사용하여 정확히 제어할 수 있게 한다.
Align
Align은 자식 위젯을 컨테이너 내에서 특정 위치에 정렬시키는 데에 사용된다.
즉, Stack을 활용하여 위젯들을 쌓고 특히 레드닷을 우측 상단에 쌓기 위해 Align과 Positioned를 사용할 수 있다.
(흠.. 아직도 어렵긴 함.)
Stack(
children: [
Image.asset(
"$basePath/icon/notification.png",
height: 30,
),
Positioned.fill(
child: Align(
alignment: Alignment.topRight,
child: Container(
width: 6,
height: 6,
decoration: const BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
),
))
],
),위 코드에 대해 chatgpt에게 설명해달라고 해본 결과
-
Image.asset 위젯:
이 위젯은 앱의 자산(asset) 폴더에서 "notification.png" 이미지를 불러와서 표시합니다. "$basePath/icon/notification.png"는 이미지 파일의 경로를 나타냅니다. 여기서 $basePath는 이미지가 위치한 기본 경로를 나타내는 변수일 수 있습니다. height: 30 속성은 이미지의 높이를 30픽셀로 설정합니다. -
Positioned.fill 위젯:
이 위젯은 Stack의 전체 공간을 채우도록 자식 위젯을 확장시키지만, 여기서는 그 안에 Align 위젯을 포함하고 있어서, 실제로 채워지는 것은 아닙니다. Align 위젯을 사용하여, Positioned.fill의 자식인 Container를 Stack의 오른쪽 상단에 배치합니다. (alignment: Alignment.topRight)
Container는 너비와 높이가 각각 6픽셀인데, BoxDecoration을 사용하여 원형(BoxShape.circle)이고 색상이 빨간색인 배경을 가지고 있습니다.
결론적으로, 이 코드는 높이 30픽셀의 알림 아이콘 이미지를 표시하고, 그 이미지의 오른쪽 상단에 빨간색 원형 마커를 오버레이합니다. 이러한 구조는 일반적으로 애플리케이션에서 새로운 알림이 있음을 나타내는 UI 요소에 사용됩니다. Positioned.fill은 이 경우 Align과 함께 사용되어 정확한 위치에 원을 배치하는데 사용됩니다, 그러나 실제로 전체를 채우는 역할은 하지 않습니다; 그것은 단지 Align 위젯을 Stack의 전체 공간에 맞추기 위해 사용됩니다.
