https://github.com/mr-won/pedometer
Flutter Pedometer Project
https://github.com/mr-won/pedometer
flutter flutter-project pedometer
Last synced: 9 months ago
JSON representation
Flutter Pedometer Project
- Host: GitHub
- URL: https://github.com/mr-won/pedometer
- Owner: mr-won
- Created: 2023-02-22T15:56:35.000Z (almost 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-01T03:52:26.000Z (almost 3 years ago)
- Last Synced: 2025-03-18T02:27:13.173Z (10 months ago)
- Topics: flutter, flutter-project, pedometer
- Language: Dart
- Homepage:
- Size: 808 KB
- Stars: 3
- Watchers: 1
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
WalkingHealth
```
개발 툴 : Flutter
개발 언어 : Dart
개발 일시 : 2023-02-23 ~ 2023-03-01(개강 : 2023-03-02)
개발자 : Won Chi Hyeon
```
## 최종 클론코딩 앱 구현 화면
### [홈 화면 HomeScreen]
### [쇼핑 화면 ShoppingScreen]
### [쿠폰 화면 CouponScreen]
### [설정 화면 SettingScreen]
## 앱 개요
```
기능 : Sensor_plus 패키지를 활용한 만보기(스텝 트래커) 기능
자주 사용되는 UI를 학습하기 위한 프로젝트
```
## 클론코딩할 앱 '캐시워크'
```
1월부터 지금까지 학습한 플러터 지식으로 앱을 따라만들면서 내가 부족한 점이 무엇인지를 아는 데
중점을 두고 프로젝트를 진행하였습니다.
```
## 앱 바 클론코딩
```
앱 바의 색상과 텍스트, 아이콘을 넣는 작업을 하였습니다.
아이콘을 넣을 때 왼쪽으로 넣으려면 leading, 오른쪽으로 넣으려면 action 프로퍼티에 넣어야 한다는 것을 배웠습니다.
또한 앱 바의 다양한 속성값 elevation(양각), toolbarHeight 등을 사용해서 최대한 클론코딩하고자 하는 앱과 비슷하게 설정하였습니다.
```
## 탭 바 클론코딩
```
AppBar 안에 TabBar를 사용해서 앱 바 바로 밑에 탭 바를 생성하였습니다.
앱 바와 탭 바의 색상을 구분하기 위해 PreferredSize와 Material을 이용하였습니다.
랜덤 주사위 앱 프로젝트에서 진행한 BottomNavigationBar의 구현법과 크게 다르지 않아 컨트롤러를 등록하고 삭제하는 부분을
복습할 수 있었고 탭 바 역시 Color 프로퍼티의 조작을 통해서 다양한 기능을 구현하였습니다.
```
## TabBarView로 화면 분리하기
```
탭이 4개니까 controller의 length 프로퍼티의 값을 4로 수정한 후에 body에 TabBarView로
Widget 4개를 생성하였습니다. 각 탭은 메인, 쇼핑, 쿠폰, 설정 화면으로 이루어져 있으며
탭바 앱의 텍스트가 화면마다 달라지도록 수정하였습니다.
```
## MainScreen Top 위젯 구현
```
MainScreen을 Top, Middle, Bottom 위젯으로 크게 나누고 Top에 둥근 이미지, 텍스트, 아이콘들을 넣어주었습니다.
둥근이미지는 CircleAvatar로 구현하였습니다. ListTile로 구현할 수도 있었지만 Container 안에 위젯들을 넣어서 UI만 구현했습니다.
```
## MainScreen Middle 이미지 위젯 구현
```
Middle에는 사진과 걸음 수, 갤러리, 사진 촬영 기능 아이콘과 측정 시간, 거리, 칼로리 소모량 텍스트가 있습니다.
이중 UI는 구현하되 기능은 추후에 추가하였습니다.
위젯을 봤을 때 Stack을 사용해서 위젯들을 이미지 위젯 위로 쌓아야 할 필요성이 있었습니다.
따라서 Stack을 사용해서 스택 : (선입후출 FILO) 제일 아래에 이미지 위젯을 넣어주었습니다.
```
## MainScreen Middle 아이콘 위젯 구현
```
상단 오른쪽에 3개의 아이콘 버튼 위젯이 위치하도록 하였습니다. 사진 촬영, 갤러리 등 기능은 추후에 구현하기로 하고
UI를 구현하였습니다.
```
## MainScreen Middle의 가운데 위젯 구현
```
가운데에는 Opacity가 적용된 둥근 Container안에 만보기 횟수 카운트 텍스트를 배치하였습니다.
Position와 Align 위젯으로 위젯들의 위치를 적절하게 위치시키는 데 노력을 기울였습니다.
```
## MainScreen Middle의 아래 위젯 구현
```
맨 아래에는 가운데 구현한 Opacity Container와 텍스트를 복사해서 3개를 가로로 배치하고
padding값을 주어 간격을 두고 배치하였습니다.
```
## MainScreen Bottom 위젯 구현
```
Bottom은 리스트 형태로 탭을 하면 다른 페이지로 이동하는 형태로 InkWell을 사용하여 Tap했을 때 애니메이션을 주고
라우팅 기능은 나중에 구현, Container안에 텍스트와 아이콘을 적절하게 배치하여 완성하였습니다.
```
## ShoppingScreen 화면 분리
```
쇼핑 스크린 화면 역시 프로필Top, 중간에 Slider와 베스트상, 하단에 리스트형태의 컨테이너를 각각 클래스로 분리하여
구현하겠습니다.
```
### 클론 코딩할 쇼핑 스크린
## ShoppingScreen Top 위젯 구현
```
Top은 프로필 사진, 화면, 캐시등을 보여주는 UI로 MainScreen의 Top 클래스를 복사하여 붙여넣었습니다.(코드의 재활용)
```
## ShoppingScreen Middle Carousel Slider위젯 구현
```
Middle은 이미지가 3개 들어가 있는 Carousel Slider와 베스트 상품을 나열하는 Container로 이루어져있습니다.
그 중에 Carousel Slider를 자동으로 넘어가도록 구현하고 페이지의 index를 보여주는 indicator를 추가하였습니다.
```
## ShoppingScreen Middle 베스트 상품 위젯 구현
```
베스트 상품 위젯은 Container안에 여러 위젯들이 Stack으로 이루어져있고
InkWell로 탭을 했을 때 상품 구매 페이지, 더보기 페이지로 이동하도록 이벤트를 넣어주었습니다.
```
## ShoppingScreen Bottom 위젯 구현
```
Bottom 위젯에는 Container가 리스트식으로 배열되어 있습니다.
MainScreen의 InkWell을 재활용하여 height만 변경하고 사용하였습니다.
```
## CouponScreen Top 위젯 구현
```
CouponScreen의 Top 부분은 ShoppingScreen Coursel Slider의 scrollDirection을 Axis.vertical 수직으로 이동하도록 수정한 후에
재활용하고 안에 당첨된 상품과 당첨된 사람의 이름을 받아와서 출력합니다.
```
## CouponScreen Middle 미사용 쿠폰 위젯 구현
```
미사용 쿠폰들을 보여주는 위젯으로 ListView.separated를 사용해서 Divider로 구분하고
각 품목의 이름과 사용기한을 각각 List에 저장하고 ListView Builder의 index를 사용해서
build 해주었습니다. 향후에 통신쪽에서 받은 데이터를 Future타입으로 선언한 후에 FutureBuilder의 형태로
수정하면 API에 따른 쿠폰들을 보여줄 수 있을 것으로 예상합니다.
```
## CouponScreen Middle 사용완료 및 유효기간 만료 쿠폰 위젯 구현
```
사용완료 및 유효기간 만료 쿠폰 위젯 역시 미사용 쿠폰과 마찬가지로 ListView.separated를 사용하되
List의 변수이름을 미사용 쿠폰과 다르게 하여 이를 구분, 역시 데이터 통신을 해오면 Future 타입으로
받아서 수정할 예정입니다.
```
## SettingScreen Top 위젯 구현
```
SettingScreen(설정)페이지는 버전 정보, 내정보, 잠금화면 관리, 알림, 앱정보의 리스트들로 구성되어 있습니다.
Top 위젯에 버전 정보 Container를 구현하였습니다.
```
## SettingScreen Middle 위젯 내정보 구현
```
Middle의 내정보를 Container로 구현하였습니다. 마지막에 Switch 클래스를 사용해서 스위치를 구현하였습니다.
```
## SettingScreen Middle 위젯 스위치 기능 상세 구현
```
스위치의 onChanged로 스위치의 bool 값을 변화시킬 수도 있어야 하지만 그 주위의 InkWell을 클릭해도
스위치가 작동하도록 하기 위해서 onTap 옵션의 setState에 Boolean 반대값을 주는 알고리즘을 사용하여
InkWell을 눌렀을 때도 스위치가 작동하도록 하였습니다.
```
## SettingScreen Middle 위젯 잠금화면관리 위젯 구현
```
잠금화면관리 위젯 역시 내 정보 위젯과 비슷하지만 여러 스위치를 구현하는 작업 도중에
value 값이 모두 isCert로 같아서 이중인중 스위치를 건들였을 때 다른 스위치들이 같이 작동하는 문제가 발생,
이를 해결하기 위해서 value값을 잠금화면사용하기(isLock), 효과음(isSound), 진동(isVib), 뉴스컨텐츠보기(isNews)로 따로
분리해서 선언하여 스위치들이 따로 작동하고 return값을 내도록 설정하였습니다.
```
## SettingScreen Middle 알림, 앱정보 위젯 구현
```
SettingScreen의 알림, 앱정보 Container도 위의 내정보 코드를 재활용하여 쉽게 구현하였습니다.
```
