😄 개요
인도 LG 인턴십에서 Flutter로 앱 개발을 하며 원형 슬라이더 컴포넌트를 만들었습니다. 목표로 하는 UI를 정확히 구현하기 위해 이리저리 찾다가 CustomPaint를 활용해서 여러 도형들을 배치하는 구현 방법을 발견했습니다. 개인적으로 CSS에 비하면 Flutter가 디자인을 구현하는 데는 더 어렵다고 생각하고 있었는데, 그런 면에서 CustomPaint는 참신했습니다.
☕ 상황
조명을 밝기를 제어하는 360도 원형 슬라이더를 구현하고, 중앙에 조명 아이콘과 on/off 버튼도 배치해야 했습니다.
그 외에도 inner shadow 등의 디테일과 컴포넌트 내부에 요소들이 많았기에 여러 부분들로 쪼개어 차근차근 구현했습니다.
🎯 구현 목표
1. 테두리의 원형 슬라이더
12시 방향부터 핸들이 지나온 부분은 노란색, 지나가지 않은 부분은 흰색으로 표시
inner shadow 넣기
2. 중앙의 Angular 그라데이션
슬라이더의 핸들이 위치한 부분을 기준으로 Angular 그라데이션 넣기
3. 중앙의 아이콘 및 on/off 버튼
부가적으로 아이콘과 on/off 토글 버튼 넣기👨💻기술
Flutter
