본문 바로가기

분류 전체보기824

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로 멋진 노트 앱을 만들어보자 ③ - 컬러 추가와 테마 적용하기 '간단한 노트 앱을 만들자' 시리즈 첫 번째 글에서 우리가 컬러 팔레트를 정의했던 걸 기억하시나요? 당시에는 기본적인 색상 몇 가지만 정의를 했었습니다만, 이제는 다양한 요소들이 추가되었기 때문에 더 상세한 컬러들을 팔레트에 정의하고 테마로서 쉽게 view 화면에 적용할 수 있도록 구현해보겠습니다.  목차1. 컬러 팔레트 정의하기2. 테마 정의하기3. 테마를 앱 전체에 적용하기4. 테마 적용 UI 컴포넌트 예시    1. 컬러 팔레트 정의하기컬러 팔레트는 앱의 색상 설계를 한 곳에서 관리하도록 미리 정의해둔 파일입니다. 이번 글에서는 색상을 카테고리별로 나누어 추가하여 재사용성을 높여보겠습니다. color_palette.dartimport 'package:flutter/material.dart';clas.. 2024. 11. 16.
Flutter로 멋진 노트 앱을 만들어보자 ② - 고객 제안, 앱 정보, 개발자 이야기 추가하기 지난 글까지 노트 앱의 주요 기능들을 모두 구현하였습니다. 이제 실제 앱 출시 전에 마지막으로 설정 메뉴를 구현해 보겠습니다. 설정 메뉴에는 고객 제안과 앱 정보, 개발자 이야기 메뉴를 담아보겠습니다. 이 노트앱은 회원가입이 따로 없기 때문에 개인 정보와 계정 관리에 대한 메뉴는 추가하지 않겠습니다. 먼저 최종 결과를 영상으로 보겠습니다. 참고로, UI 컬러 변경 작업이 함께 진행되어 이전의 어두운 색이 아닌 밝은 색으로 변경되었습니다. 컬러 변경에 대해서는 다음 글에서 다루겠습니다.  목차1. 설정 메뉴 추가하기2. 고객 제안 설문 링크 연결하기3. 앱 정보 페이지 추가 및 오픈소스 명시4. 개발자 이야기 웹뷰 추가하기  1. 설정 메뉴 추가하기기존 설정 메뉴는 아무것도 없는 화면이었습니다. 여기에 L.. 2024. 11. 15.
Flutter로 멋진 노트 앱을 만들어보자 ① - 랜덤 노트 기능 추가하기 더이상 간단하지 않기 때문에 '멋진' 시리즈로 이어서 연재합니다.이번 글에서는 이전 노트 목록을 무작위로 불러오는 랜덤 노트 기능을 추가해 보겠습니다. 이 기능은 이전에 작성한 노트를 랜덤 하게 표시하여 다시 한번 내용을 복기하고 오랫동안 기억하게 도와주는 기능입니다. 랜덤 노트 기능에서 필요한 요구사항은 다음과 같습니다.1. 사용자는 하단 네비게이션 바에 '랜덤 노트' 탭을 통해 랜덤 노트 화면으로 이동할 수 있다.2. 사용자는 랜덤 노트 카드에 있는 중요, 수정, 삭제 버튼을 이용하여 노트를 관리할 수 있다.3. 사용자는 랜덤 노트 카드를 위아래로 슬라이드 하여 다음, 이전 노트를 다시 볼 수 있다. 랜덤 노트 기능을 구현한 결과는 다음과 같습니다. - 랜덤 노트 탭을 누르면 랜덤 노트 화면이 보입니.. 2024. 11. 14.

티스토리툴바