본문 바로가기

Flutter34

[TIL-5][Flutter 숙련] 마켓 앱 만들기 GPS 설정 및 VWORLD API [Flutter 숙련] 마켓 앱 만들기 Part 02 :: GPS 설정 및 VWORLD API🎯 오늘 배운 것Geolocator 패키지를 사용해 GPS 센서에서 위치 정보를 가져오는 방법Dio를 활용한 VWORLD API 연동위도/경도를 행정동 주소로 변환하는 실습📌 VWORLD API 사용 준비vworld.kr 회원가입 및 로그인오픈API 메뉴 → 인증키 발급 → 키 복사주요 API 문서:2D 데이터 API - 읍면동검색 API예시 요청 URLhttps://api.vworld.kr/req/data?request=GetFeature&data=LT_C_ADEMD_INFO&key=발급받은_키&geomfilter=point(경도 위도)&geometry=false&size=100https://api.vwor.. 2025. 4. 16.
[TIL-4] PopupMenuButton, bottomsheet Flutter 중고마켓 앱 정리 📱 Flutter 중고마켓 앱 TIL 정리1. MyTab UI 구현사용자 프로필 박스를 Row로 구성하고, 우측에 버튼 배치각 항목을 GestureDetector로 감싸고, SnackBar로 피드백 처리Row( children: [ UserProfileImage(dimension: 50, imgSrc: 'https://...'), SizedBox(width: 10), Expanded(child: Text('오상구님')), GestureDetector( onTap: () {}, // 프로필수정 child: Container( padding: EdgeInsets.symmetric(horizontal: 12, vertical: 8), colo.. 2025. 4. 15.
[Flutter 트랙] 앱개발 종합반 2-16 - 스레드 위젯 구성해보기 이번 시간에는 스레드 앱의 위젯을 구성하는 방법을 학습합니다. 지난 시간에 구상한 대로 화면을 구성하고, 레이아웃을 조정하면서 원하는 UI를 완성합니다.1. 프로젝트 생성 및 초기화터미널을 사용하여 프로젝트 생성.lib 폴더 내에 home.dart 파일을 추가하고, 홈 화면을 구성할 준비.필요한 이미지 파일을 assets 폴더에 추가하고 pubspec.yaml에 등록.flutter create thread_appcd thread_appcode .2. 테마 및 에뮬레이터 설정전체적인 스타일을 설정하기 위해 ThemeData를 적용.다크 모드를 기본값으로 설정.MaterialApp( theme: ThemeData( scaffoldBackgroundColor: Colors.black, textTh.. 2025. 3. 5.
[Flutter 트랙] 앱개발 종합반 2-15 - 대표적인 알람 위젯 화면 구성해보기 이번 시간에는 알람 앱의 대표적인 위젯을 이용하여 화면을 구성해보겠습니다.지난 시간에 기획한 UI를 기반으로 실제 플러터 코드를 작성하고, 레이아웃을 조정하면서 화면을 완성하는 과정입니다.1. 프로젝트 파일 생성 및 초기화main.dart 파일을 초기화하고, 홈 화면을 호출하는 Home 위젯을 생성합니다.lib 폴더 내에 home.dart 파일을 새로 만들고, 기본적인 위젯 구조를 설정합니다.2. 에뮬레이터 실행 및 디버깅 설정플러터 에뮬레이터 또는 실제 디바이스를 연결하여 앱을 실행합니다.디버깅 실행 방법: Start Debugging 또는 Run Without Debugging 중 선택하여 실행.디버깅을 통해 실시간 코드 변경을 반영하고, 레이아웃 조정이 가능.3. 테마 설정플러터 앱의 전체적인 스타.. 2025. 3. 5.
[Flutter 트랙] 앱개발 종합반 2-14 - 대표적인 앱 위젯을 통해 화면 구성해보기 이번 시간부터 대표적인 앱 화면을 직접 플러터 위젯을 이용해 구성하는 실습을 진행합니다.우리가 선택한 앱은 알람 앱과 스레드 앱입니다. 지난 시간에 분석했던 UI 구조를 바탕으로 화면을 구현해보겠습니다.중요한 점은 클론 코딩이 아니라는 점입니다. 기능을 완전히 구현하는 것이 아니라 위젯을 배치하여 비슷한 화면을 구성하는 것이 목표입니다.1. 프로젝트 생성하기플러터 프로젝트를 생성하는 방법은 두 가지가 있습니다:터미널을 이용한 방법VS Code(또는 다른 IDE)를 이용한 방법1-1. 터미널을 이용한 방법# 터미널을 열고 아래 명령어 실행flutter create alarm_app_samplecd alarm_app_sample이 명령어를 실행하면 alarm_app_sample이라는 폴더에 플러터 프로젝트가.. 2025. 3. 5.
[Flutter 트랙] 앱개발 종합반 2-13 - 대표적인 위젯 분석 이번 시간에는 대표적인 앱 화면을 플러터 위젯으로 해석하는 방법에 대해 살펴보겠습니다.대중적인 앱들은 사용자 경험(UX)과 UI 설계에 많은 고민이 반영된 결과물입니다. 이러한 앱의 화면을 플러터로 구현할 수 있도록 분석하는 연습을 진행하겠습니다.1. 틱톡(TikTok) UI 분석틱톡의 메인 화면은 다음과 같은 요소로 구성됩니다:페이지 뷰(PageView): 위아래로 스와이프하여 동영상을 전환.AppBar: 상단의 고정된 팔로잉/추천 탭과 검색 아이콘.Row: 상단의 팔로잉과 추천 메뉴는 가로 정렬.GestureDetector: 탭 메뉴를 클릭할 수 있도록 설정.Stack & Positioned: 화면 위에 겹쳐진 요소(좋아요, 댓글, 공유 버튼 등).Column: 동영상 설명과 사용자 정보 정렬.Pag.. 2025. 3. 5.

티스토리툴바