Flutter24 Flutter로 멋진 노트 앱을 만들어보자 ④ - 노트 알림 UI 추가하기 지난 글 마지막 말에 앱 출시를 다룬다고 했었습니다. 현재는 앱 출시를 위해 검수 및 비공개 테스트 중입니다. 비공개 테스트의 경우 2주 동안 진행되기 때문에 해당 기간 동안 노트 알림 기능을 추가로 구현해 보겠습니다. 노트 알림 기능은 작성한 노트를 다시 리마인드 하는 기능입니다. 제가 만들고 있는 노트 앱은 단순히 기록하는 것뿐만 아니라 자신의 노트를 다시 발견하고, 과거 아이디어를 재활용할 수 있도록 돕는 것이 목표입니다. (그래야 멋진 노트 앱이죠~😉) 알림 기능은 크게 두 가지 기능을 기획했습니다. 하나는 예약 알림으로 특정 날짜와 시간에 특정 노트를 사용자에게 띄워주는 것입니다. 다른 하나는 반복 알림입니다. 특정 노트를 일정한 간격으로 반복적인 알림을 주는 기능입니다. 예약 알림은 특정 .. 2024. 11. 26. Flutter FloatingActionButton 터치 시 버튼 모양 불일치 해결하기 문제 상황Flutter에서 FloatingActionButton을 사용할 때, 버튼을 터치하면 사각형 모양의 ripple effect(물결 효과)가 보이는 경우가 있습니다. 버튼은 원형인데 터치 효과가 사각형으로 보이면 UI가 어색해 보이죠. 문제의 화면 원인이 현상이 발생하는 이유는 Material Design의 터치 피드백 처리 방식 때문입니다. FloatingActionButton이 Container 안에 직접 들어있을 때는 기본적으로 사각형 영역에 대해 ripple effect가 적용됩니다. 아래 코드는 FloatingActionButton이 Container 안에 직접 들어있을 코드 예제입니다.Container( decoration: BoxDecoration( gradient: Linea.. 2024. 11. 19. Flutter 앱 아이콘과 이름, 스플래시 화면 설정하기 Flutter 앱을 개발했지만 앱의 아이콘이 기본 Flutter 아이콘이거나, 앱을 실행했을 때 기본 Flutter 스플래시 화면이 뜨는 경우가 있습니다. 이것은 아직 앱 아이콘과 스플래시 화면을 설정하기 않았기 때문입니다. 이번 글에서는 앱의 아이콘과 실행 시 나타나는 스플래시 화면을 어떻게 변경하고 커스터마이징할 수 있는지 알아보겠습니다. 1. 준비 단계1.1. 필요한 이미지 준비하기앱 아이콘 이미지: 정사각형 이미지 (권장 크기: 1024x1024 px, PNG 형식)스플래시 이미지: 앱 실행 중 나타나는 이미지를 준비 (배경이 투명한 PNG 추천)1.2. 이미지 경로 지정이미지를 프로젝트 내 assets 디렉터리에 저장합니다. 예제 구조는 다음과 같습니다.root/├── assets/│ └─.. 2024. 11. 18. Flutter 앱을 Google Play 스토어에 출시 해보자 Flutter로 앱을 개발했습니다. 그렇다면 출시를 해야겠죠? 이 글은 Flutter로 개발한 앱을 Google Play 스토어에 출시하는 과정을 정리했습니다. 목차1. 계정 생성2. 앱 빌드하기3. 앱 생성 및 등록정보4. 내부 테스트5. 비공개 테스트6. 프로덕션 검수 1. 계정 생성Google Play 개발자 계정 생성- Google Play Console에 접속합니다.- Google Play 개발자 계정 등록합니다. - 계정 등록비는 25 달러 인데, 한 번만 결제하면 됩니다. - 결제 후 본인 확인 및 계정 활성화 과정을 진행합니다. 본인 확인이 완료되면 이메일로 알림을 받는데요. 이 과정이 며칠 걸린다고 합니다. 본인 확인을 기다리면서 앱 빌드를 준비합니다. 2. 앱 빌드하기키스.. 2024. 11. 17. Flutter로 간단한 노트 앱을 만들어보자 ④ - 노트 수정 기능 구현 이번 글에서는 이전까지 개발한 Flutter 노트 앱에 노트 수정 기능을 추가하는 과정을 보여드리겠습니다. 기존 노트 앱에서는 수정 기능이 따로 없이 쓰기와 조회, 삭제 기능만 있었습니다. 이번에는 수정 페이지를 추가하고 수정 로직까지 구현해 보도록 하겠습니다. 수정 기능의 결과는 다음과 같습니다. - 수정 버튼을 누르면 노트 수정 화면으로 이동합니다.- 노트 수정 화면에서 내용을 수정한 후 우측 상단의 저장 버튼을 누릅니다.- 노트를 저장하면 노트 목록 화면으로 되돌아가며 내용이 수정된 노트가 보여집니다. 주요 구현 내용1. Enums: 수정 페이지 이름을 정의하는 PageName Enum 을 추가합니다.2. NoteModel: 노트 수정 시간을 나타내는 updatedAt 필드를 추가합니다.3. N.. 2024. 11. 6. Flutter로 간단한 노트 앱을 만들어보자 ③ - GoRouter로 네비게이션 바 리팩터링 이번 글에서는 기존의 인덱스 방식의 화면 전환을 Enum 과 GoRouter 를 사용하여 리팩터링 해보겠습니다. GoRouter란?GoRouter는 Flutter의 네비게이션을 간편하게 관리할 수 있도록 도와주는 패키지입니다. URL 기반의 라우팅을 지원하며 화면 전환과 관련된 복잡한 과정을 간단히 처리할 수 있습니다. 리팩터링 이유기존의 탭 전환 방식에서는 네비게이션을 인덱스로 관리했는데, 이렇게 인덱스로 화면 전환을 관리하면 화면이 추가되거나 순서가 변경될 때 수정이 번거롭습니다. 배열 안에 정의된 화면의 순서를 모두 외우고 있어야 개발이 가능하죠. 그렇기 때문에 이번 글에서는 Enum 과 GoRouter 를 이용하여 각 화면을 명확히 구분하고, 경로 기반의 전환으로 더 명확하고 유지보수하기 쉬운.. 2024. 10. 31. 이전 1 2 3 4 다음
