{"id":26833418,"url":"https://github.com/mr-won/random_dice","last_synced_at":"2025-03-30T15:28:55.934Z","repository":{"id":138423033,"uuid":"604441660","full_name":"mr-won/Random_Dice","owner":"mr-won","description":"Flutter Digital Random Dice Project","archived":false,"fork":false,"pushed_at":"2024-06-16T10:03:15.000Z","size":629,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-18T02:27:15.069Z","etag":null,"topics":["flutter","flutter-project","random-dice","shake"],"latest_commit_sha":null,"homepage":"","language":"C++","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mr-won.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-02-21T04:06:52.000Z","updated_at":"2024-09-04T00:23:25.000Z","dependencies_parsed_at":"2024-12-31T05:29:22.142Z","dependency_job_id":"078d6409-4e50-4930-8b61-e4a2ef1e2884","html_url":"https://github.com/mr-won/Random_Dice","commit_stats":null,"previous_names":["wonttan/random_dice","wonchihyeon/random_dice","chihyunwon/random_dice","mr-won/random_dice","chihyeonwon/random_dice"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FRandom_Dice","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FRandom_Dice/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FRandom_Dice/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mr-won%2FRandom_Dice/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mr-won","download_url":"https://codeload.github.com/mr-won/Random_Dice/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246337888,"owners_count":20761286,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","flutter-project","random-dice","shake"],"created_at":"2025-03-30T15:28:55.304Z","updated_at":"2025-03-30T15:28:55.916Z","avatar_url":"https://github.com/mr-won.png","language":"C++","funding_links":[],"categories":[],"sub_categories":[],"readme":"## 구글 플레이스토어에서 랜덤 주사위 앱을 다운로드하세요 ! \n[랜덤 주사위](https://play.google.com/store/apps/details?id=com.wonchihyeon.randomdice)\n![image](https://github.com/chihyeonwon/Random_Dice/assets/58906858/f5082589-a025-4883-8de8-f9ae33e288e9)\n\n\n# Random_Dice\n\n```\n개발 툴 : Flutter\n개발 언어 : Dart\n개발 일시 : 2023-02-21 ~ 2023-02-22\n개발자 : Won Chi Hyeon\n```\n\n## 앱 개요\n```\n기능 : 2개의 BottomNavigation을 가지는 탭 형태의 UI\n       가속도계를 사용해서 흔들기 기능을 구현\n       Slider를 이용해서 흔들기 민감도를 설정하는 기능 구현\n\n조작법 : 첫 번째 탭에서 핸드폰을 흔들면 주사위의 숫자가 랜덤하게 바뀝니다.\n         두 번째 탭에서 슬라이더를 움직이면 흔들기의 민감도를 정할 수 있습니다.\n\n사용한 플러그인 : shake, sensors_plus\n```\n\n### 최종 화면\n![image](https://user-images.githubusercontent.com/58906858/220520031-3745bb6d-f42b-4ad9-a251-80cce259e5bc.png)\n![image](https://user-images.githubusercontent.com/58906858/220520000-f83a16ed-da73-4178-9ed2-88e0a3bc5799.png)\n![image](https://user-images.githubusercontent.com/58906858/220520057-226b6452-cbe2-4217-a06e-be93af1c170e.png)\n\n\n## Theme 설정하기\n```\n만난 지 며칠 프로젝트 앱에서 폰트와 폰트색상 등 테마를 설정해주었던 것처럼 상수를 이용해서\n슬라이더, BottomNavigation 위젯 등에 테마를 미리 설정하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/220250888-223ae87e-e109-4548-bc09-d711bdfb09b2.png)\n\n## TabBarView 작업하기\n```\nTabBarView 위젯은 TabController가 필수입니다. TabController는 한 번만 초기화되어야 하므로\ninitState안에서 초기화해주고 초기화할 때는 vsync 기능이 필수인데 이는 State위젯에 TickerProviderMixin을 mixin으로 제공해주어야만\n사용가능합니다.\n\nTickerProviderMixin와 SingleTrickerProviderMixin은 애니메이션의 효율을 올려주는 역할을 합니다.\nlength 매개변수의 2는 탭의 개수를 의미합니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/220253253-06e2f0b7-fdcf-4665-ac40-9133f8c6826b.png)\n\n## BottomNavigationBar 작업하기\n```\n하단 탭바의 2개의 버튼을 각각 구현하였습니다. label과 icon을 주어서 UI를 구성하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/220254350-001c88da-3ec9-4db0-8431-762690e92d39.png)   \n![image](https://user-images.githubusercontent.com/58906858/220254392-452c63cd-659b-4f2e-9b5e-2e122fcde18f.png)\n\n\n## TabBarView UI 설정\n```\nTabBarView가 잘 작동하는 지 알아보기 위해 Widget List에 텍스트 2개를 각각 넣고 좌우로 슬라이드하여\n잘 작동하는 것을 확인하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/220254856-36b435c2-f137-445d-9b8d-b83d89ae74d6.png)   \n![image](https://user-images.githubusercontent.com/58906858/220254880-29dd274c-4146-4448-83da-da21f22c8eb4.png)\n### [왼쪽으로 슬라이드했을 때]\n![image](https://user-images.githubusercontent.com/58906858/220254913-df569920-9028-4bf3-878b-152fe0c496f5.png)\n\n## BottomNavigationBar와 controller 연동\n```\nTabBarView를 스와이프할 때는 화면 전환이 이루어지지만 BottomNavigationBar의 탭을 누르면 이동되지 않습니다.\n그 이유는 BottomNavigationBar를 누를 때마다 TabBaraView와 연동을 해야 하기 때문입니다.\n\nTabController을 연동하여 BottomNavigationBar를 눌러도 화면전환이 잘 이루어지도록 하였습니다.\n```\n### [컨트롤러 속성이 변경될 때마다 실행할 함수]\n![image](https://user-images.githubusercontent.com/58906858/220511478-f7fd4435-3d62-4735-bb59-9f5a23ea668e.png)\n\n### [위젯이 삭제될 때 등록된 listener도 삭제]\n![image](https://user-images.githubusercontent.com/58906858/220511442-c396d152-1f07-4021-a610-f56a771d7b5d.png)\n\n### [현재 선택된 상태로 표시해야 되는 BottomNavigationBarItem의 인덱스]\n![image](https://user-images.githubusercontent.com/58906858/220511411-d0998b81-6cc2-499a-bcdd-4e32db556aaf.png)\n\n## 첫 번째 인덱스화면에 주사위 이미지 추가\n```\n첫 번째 인덱스 화면(HomeScreen)에 주사위 이미지를 추가하였습니다.\n향후에 생성자로 number를 넘겨줘서 이미지를 변경할 수 있도록 설계하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/220512873-096e3da0-0875-4d2e-bdf4-edf1b16e3c0e.png)   \n![image](https://user-images.githubusercontent.com/58906858/220512929-efcb8df4-82e9-4176-8ace-f0ecba4fc2da.png)   \n![image](https://user-images.githubusercontent.com/58906858/220512856-2f462200-d888-440e-a698-4093e74a93c6.png)\n\n## 주사위 값에 해당되는 숫자 텍스트 추가\n```\n주사위 값에 해당되는 숫자(number) 텍스트를 주사위 이미지 하단에 추가하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/220513717-55a51d8d-84d6-4d1a-a538-cebce7790af0.png)   \n![image](https://user-images.githubusercontent.com/58906858/220513730-d056e896-38a4-4baf-ac84-f576ef636219.png)\n\n## 두 번째 인덱스 화면에 민감도 조절 슬라이더 추가\n```\n두 번째 인덱스 화면(SettingScreen)에 슬라이더를 추가하였습니다.\n슬라이더의 주요 설정값은 threshold(민감도)로 기본 민감도 값과 슬라이더가 변경될 때마다 실행되는 함수를 생성자로 등록하였습니다.\n슬라이더가 변경될 때마다 실행되는 함수는 변경된 값을 민감도 값으로 변경해주는 역할을 합니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/220516679-d26272b4-89e3-4b7b-9e7c-d69238501bb6.png)   \n![image](https://user-images.githubusercontent.com/58906858/220516765-74e784bb-97f6-4013-ad6b-6eefc64ed419.png)   \n![image](https://user-images.githubusercontent.com/58906858/220516609-7c3a21d3-7529-465b-84b1-80413c29f8ea.png)   \n![image](https://user-images.githubusercontent.com/58906858/220516836-b2ebc837-b24c-47a4-b247-fa63c29a6561.png)\n\n\n## 흔들기를 감지하여 주사위 번호를 변경하기\n```\n주사위 번호(number)를 상태관리를 하기위해서 선언을 해준다음 setState를 사용하여\n흔들기가 감지되었을 때 number를 rand().nextInt + 1 (0~6까지의 난수)로 변경하도록 하여\n최종적으로 주사위 번호를 변경과 더불어 주사위에 해당하는 이미지로 수정하도록 하는 기능을 추가하였습니다.\n```\n![image](https://user-images.githubusercontent.com/58906858/220519032-dcc78fcd-de89-415e-a4d6-08d1bb920b41.png)\n![image](https://user-images.githubusercontent.com/58906858/220518998-cc443cc2-cfc8-4461-acf6-7703207b6df0.png)\n\n## 향후 앱 출시 계획\n```\n저작권 상 문제로 주사위 이미지 변경\n주사위 개수를 늘리는 옵션 추가\n흔들었을 때 주사위 이미지가 애니메이션 되도록 수정\n특정 숫자가 더 높은 확률로 나오도록 확률 조작 기능 추가\n```\n\n## 향후 프로젝트 계획\n```\n이번 프로젝트에 사용된 Shake 플러그인은 x, y, 축으로의 직선 움직임만을 측정할 수 있습니다.\n자이로스코프(Gyroscope)는 이 단점을 보완해서 x, y, z 축으로의 회전을 측정할 수 있습니다.\n\n센서의 데이터를 정규화하는 작업을 진행하고(움직임 수치를 계산해서 핸드폰을 흔든 정도를 수치화하는 작업)\n헬스케어의 대표 앱 중에 하나인 만보기 앱을 개발하기로 하였습니다.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-won%2Frandom_dice","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmr-won%2Frandom_dice","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmr-won%2Frandom_dice/lists"}