하몬드의 개발블로그

개요  해당 사진은 운동시작 버튼을 눌렀을 때 출력할 운동화면들이다. 항목1 > 휴식 페이지 > 항목2 > 휴식 페이지 > (반복) > 완료 페이지 순으로 화면이 라우팅 된다.항목1과 항목2 운동페이지는 운동항목 설정 다이얼로그에서 설정한 종목으로 화면이 출력된다.   운동파트 구현 라우팅 설정 exercise폴더에 필요한 파일들을 만들어주고  class ExerciseScreen1 extends StatefulWidget { const ExerciseScreen1( {super.key, required this.exerciseController, required this.homeController}); final ExerciseController exerciseContro..

개요  운동항목은 풀업, 친업, 푸쉬업, 너클 푸쉬업 이렇게 총 4개이다.풀업과 친업은 항목1에 해당하고 푸쉬업과 너클 푸쉬업은 항목2에 해당한다. 원래는 운동항목 설정 없이 풀업과 푸쉬업 기록만 추가하려고 했는데 그립을 살짝 바꿔서 다른 부분도 단련할 수 있는 종목도 추가하면 좋겠단 생각이 들어총 4개의 항목을 중 2개의 항목을 선택하는 다이얼로그를 구현할 것이다.  운동항목 설정 다이얼로그 구현 CommonDialogimport 'package:escape_anchovy/res/text/colors.dart';import 'package:escape_anchovy/res/text/styles.dart';import 'package:escape_anchovy/src/common/common_button..

개요  모종의 이유로 운동을 오랫동안 하지 않게 된다면수행능력이 퇴하하게 되고 이는 의욕상실 이어지게 된다. 몸을 만드려면 꾸준하게 운동을 하여점진적 과부화의 원리를 적용해 수행능력을 늘려나가야 한다. 그런 의미에서 운동을 하지 않게 될 때 나 자신에게 경각심을 주기 위해일정 시간이 지나면 일지를 초기화시키는 타이머를 홈화면에 배치할 것이다. 원래는 일지 초기화까지의 시간을 3일로 하려고 했는데여행을 가거나 아플 때도 있다는 걸 고려해서 1주일로 하기로 했다.  운동기록 초기화 타이머 구현 일지 데이터에 필요한 키값 추가 _controller.addData({ 'time': DateTime.now().toString(), 'day': _controller.dataList.length + 1, 'ex..

전체 일지 확인 화면 구현하기 라우팅 설정 좌측 버튼을 통해 전체 일지를 확인할 수 있는 페이지로 넘어가게 할 것이다.  CommonOutlineButton( width: 65, height: 18, onPressed: () { Navigator.pushNamed(context, NoteScreen.routeName); }, text: '전체 일지 확인', textStyle: TextStyles.caption2.copyWith(height: 0.01))버튼을 눌렀을 때 해당 화면으로 라우팅 하도록 설정   데이터 불러오기import 'package:escape_anchovy/src/util/shared_preferences_util.dart';import 'package:flutter/material.d..

데이터 추가 및 삭제하기 SharedPreference 함수 추가하기 // 키값을 통해 Json 리스트 불러오기 static List> getJsonList(String key) { List? dataList = _prefs?.getStringList(key); return dataList ?.map((value) => json.decode(value) as Map) .toList() ?? []; } // Json 리스트 키에 저장하기 static Future setJsonList(String key, List> list) { List dataList = list.map((map) => json.encode(map)).toList(); ..

홈 화면 레이아웃 그리기 그릴 화면 일단 그려야 할 홈 화면의 레이아웃이다. 라우팅은 버튼을 통해서 이루어지며, 도전과제 클리어 여부, 운동기록의 여부에 따라 다른 화면을 출력할 것이다. 단색으로 이루어진 아이콘이 아닌 경우 라이트모드와 다크모드에서 출력할 svg파일 2개를 프로젝트에 추가해줘야 한다.  common_outline_button.dartimport 'package:escape_anchovy/res/text/colors.dart';import 'package:flutter/material.dart';class CommonOutlineButton extends StatefulWidget { const CommonOutlineButton( {super.key, this.wid..

개요 이름 입력 페이지를 구현할 것이다. 이 페이지는 스플래쉬 화면에서 라우팅이 되는데이름입력을 한 상태라면 홈화면으로 라우팅이 되도록 할 것이다.   Common 위젯 저 페이지를 구현하는데 3개의 Common위젯들이 필요하다.버튼, 텍스트필드, 유효성 검사 메시지 이렇게 3개 만들어주면 된다.  common_button.dartclass CommonButton extends StatefulWidget { const CommonButton({ super.key, required this.text, this.width = double.maxFinite, this.height = 50, this.onPressed, this.textColor, this.backgrou..

앱바 레이아웃 구현  앱바 우측에 위치한 아이콘을 누르면테마가 변경되도록 구현할 것이다.   모든 화면에서 공통적으로 사용할 앱바를 하나 만들어주자  extension ThemeExtension on BuildContext { bool get isLight => Theme.of(this).brightness == Brightness.light;}colors.dart에 이걸 추가하면 'context.isLight'로 현재테마가 무슨 테마인지 감지할 수 있다. context.isLight는 현재 테마가 라이트테마이면 true를 반환하고그렇지 않다면 false를 반환한다.  import 'package:escape_anchovy/res/text/styles.dart';import 'package:flutte..