개발 툴 : Flutter
개발 언어 : Dart
개발 일시 : 2023-02-21 ~ 2023-02-22
개발자 : Won Chi Hyeon

기능 : 2개의 BottomNavigation을 가지는 탭 형태의 UI
       가속도계를 사용해서 흔들기 기능을 구현
       Slider를 이용해서 흔들기 민감도를 설정하는 기능 구현

조작법 : 첫 번째 탭에서 핸드폰을 흔들면 주사위의 숫자가 랜덤하게 바뀝니다.
         두 번째 탭에서 슬라이더를 움직이면 흔들기의 민감도를 정할 수 있습니다.

사용한 플러그인 : shake, sensors_plus

만난 지 며칠 프로젝트 앱에서 폰트와 폰트색상 등 테마를 설정해주었던 것처럼 상수를 이용해서
슬라이더, BottomNavigation 위젯 등에 테마를 미리 설정하였습니다.

TabBarView 위젯은 TabController가 필수입니다. TabController는 한 번만 초기화되어야 하므로
initState안에서 초기화해주고 초기화할 때는 vsync 기능이 필수인데 이는 State위젯에 TickerProviderMixin을 mixin으로 제공해주어야만
사용가능합니다.

TickerProviderMixin와 SingleTrickerProviderMixin은 애니메이션의 효율을 올려주는 역할을 합니다.
length 매개변수의 2는 탭의 개수를 의미합니다.

하단 탭바의 2개의 버튼을 각각 구현하였습니다. label과 icon을 주어서 UI를 구성하였습니다.

TabBarView가 잘 작동하는 지 알아보기 위해 Widget List에 텍스트 2개를 각각 넣고 좌우로 슬라이드하여
잘 작동하는 것을 확인하였습니다.

TabBarView를 스와이프할 때는 화면 전환이 이루어지지만 BottomNavigationBar의 탭을 누르면 이동되지 않습니다.
그 이유는 BottomNavigationBar를 누를 때마다 TabBaraView와 연동을 해야 하기 때문입니다.

TabController을 연동하여 BottomNavigationBar를 눌러도 화면전환이 잘 이루어지도록 하였습니다.

첫 번째 인덱스 화면(HomeScreen)에 주사위 이미지를 추가하였습니다.
향후에 생성자로 number를 넘겨줘서 이미지를 변경할 수 있도록 설계하였습니다.

주사위 값에 해당되는 숫자(number) 텍스트를 주사위 이미지 하단에 추가하였습니다.

두 번째 인덱스 화면(SettingScreen)에 슬라이더를 추가하였습니다.
슬라이더의 주요 설정값은 threshold(민감도)로 기본 민감도 값과 슬라이더가 변경될 때마다 실행되는 함수를 생성자로 등록하였습니다.
슬라이더가 변경될 때마다 실행되는 함수는 변경된 값을 민감도 값으로 변경해주는 역할을 합니다.

주사위 번호(number)를 상태관리를 하기위해서 선언을 해준다음 setState를 사용하여
흔들기가 감지되었을 때 number를 rand().nextInt + 1 (0~6까지의 난수)로 변경하도록 하여
최종적으로 주사위 번호를 변경과 더불어 주사위에 해당하는 이미지로 수정하도록 하는 기능을 추가하였습니다.

저작권 상 문제로 주사위 이미지 변경
주사위 개수를 늘리는 옵션 추가
흔들었을 때 주사위 이미지가 애니메이션 되도록 수정
특정 숫자가 더 높은 확률로 나오도록 확률 조작 기능 추가

이번 프로젝트에 사용된 Shake 플러그인은 x, y, 축으로의 직선 움직임만을 측정할 수 있습니다.
자이로스코프(Gyroscope)는 이 단점을 보완해서 x, y, z 축으로의 회전을 측정할 수 있습니다.

센서의 데이터를 정규화하는 작업을 진행하고(움직임 수치를 계산해서 핸드폰을 흔든 정도를 수치화하는 작업)
헬스케어의 대표 앱 중에 하나인 만보기 앱을 개발하기로 하였습니다.