본문 바로가기
반응형

전체 글51

[Flutter로 iOS 앱 개발하기] 이미지 크기가 큰 경우 해결법 - Expanded 위젯 Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 참고 문서 : Flutter 개발자 문서 - Expanded 위젯 이미지의 크기가 기기의 너비보다 큰 경우, 아래 이미지와 같이 검정색+노란색 줄이 표시된다. 이를 해결할 수 있는 효과적인 방법을 소개하고자 한다. 1. Image의 width를 조정해준다. Image( width: 200.0, image: AssetImage('images/dice1.png'), ), 하지만, width를 직접 조정해주는 것은 하드코딩 방식으로, 기기의 크기에 따라 하나하나 설정해줘야 하는 문제점이 있다. 따라서 두번째 방법을 사용하는 것이 더 좋다. 👍🏻 2. Expanded .. 2020. 10. 11.
[Flutter로 iOS 앱 개발하기] Container 위젯 Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 참고 문서 : Flutter 개발자 문서 - Container 위젯 Container 위젯의 특징 HTML에서의 div와 비슷하다. child가 없을 때는 전체 화면 영역을 차지한다. child가 있을 때는, child의 크기만큼의 영역만을 차지한다. 하나의 child만 포함할 수 있다. Safe Area Container 위젯 내에 Text를 삽입하는 경우, 아래 이미지처럼 베젤 크기만큼 가려지거나, 시간, 배터리 표시와 겹치는 경우가 발생한다. 이런 이슈를 해결할 수 있도록, Flutter에서는 SafeArea 위젯을 제공한다. Container 위젯을 Sa.. 2020. 10. 10.
[Flutter로 iOS 앱 개발하기] Hot Reload(핫 리로드) & Hot Restart(핫 리스타트) Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 🚀Hot reload (핫 리로드) : 앱이 실행되고 있는 상태에서, 앱의 상태를 유지한 채로 변경사항을 적용시켜주는 기능. Hot reload를 통해 빠른 개발 사이클을 경험할 수 있다. 🚀Hot restart ( 핫 리스타트) : 앱이 실행되고 있는 상태에서, 변경사항을 적용시켜주는 기능. 단, 앱의 상태는 초기화 된다. Hot reload보다는 시간이 조금 더 걸리지만, 앱을 재실행하는 것보다는 훨씬 빠르게 변경사항을 확인할 수 있다. Hot reload 또는 Hot restart가 작동하려면, statelss 또는 stateful 위젯 내에 코드를 작성해.. 2020. 10. 10.
[Flutter로 iOS 앱 개발하기] 앱 아이콘 설정하기(커스텀) Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 기본 아이콘 아무것도 설정하지 않은 경우, Flutter App의 아이콘은 아래 이미지와 같다. 아이콘 변경하기 1. 원하는 아이콘 이미지를 제작하거나 다운 받는다. 2. 아래 사이트를 통해 이미지를 다양한 사이즈로 생성할 수 있다. - 원하는 이미지를 드래그 하여 업로드한 후, - 원하는 기기에 체크하고 Generate 버튼을 클릭해준다. appicon.co App Icon Generator Generate icons and images for mobile apps, android and iOS. No need to upload or download. Work.. 2020. 10. 7.
[Flutter로 iOS 앱 개발하기] Asset & Pubspec 파일 사용하기 Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 이미지 파일 선언하기 pubspec.yaml 파일을 열고 스크롤을 조금 내리다 보면 아래와 같은 설명을 확인할 수 있다. image를 asset으로 가져와서 사용하는 방법이다. # To add assets to your application, add an assets section, like this: # assets: # - images/a_dot_burr.jpeg # - images/a_dot_ham.jpeg 주석으로 처리되어 있는 부분을 Cmd + / 단축키를 사용하여 주석처리를 해제해주고, 예시로 적혀 있는 a_dot_burr.jpeg 대신 원하는 이미지.. 2020. 10. 6.
[Flutter로 iOS 앱 개발하기] 첫번째 플러터 앱 시작하기 Udemy 사이트에서Flutter 강좌 를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. * Material 디자인이란? iOS의 감성을 따라잡고자, 모바일 뿐만 아니라 다른 기기에서도 통일성 있는 사용자 경험을 제공하고자 Google에 의해 개발되었다. 플랫 디자인의 가이드라인이라고 생각할 수 있다. 참고 : material.io Material Design Build beautiful, usable products faster. Material Design is an adaptable system—backed by open-source code—that helps teams build high quality digital experiences. .. 2020. 10. 5.
[Flutter로 iOS 앱 개발하기] Flutter 개발 환경 설정 - Android Studio 설정 추천 Udemy 사이트에서 Flutter 강좌 를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 1. Appearance 색상 테마 설정하기 기본 테마는 Light 테마로 되어 있다. 코딩 시 눈이 아플 수 있으니 Dark 테마로 수정하는 것이 좋다. - Configure - Preferences - Appearance & Behavior - Appearance 에서 Theme를 수정한다. - 하단의 Apply 클릭 후 OK 를 클릭해주면 끝! 폰트 사이즈 조정 폰트 사이즈도 사용자의 편의에 따라 수정이 가능하다. - Editor - Font 2. Behavior - Languages & Frameworks - Flutter 에서 아래의 두가지 사항에 대.. 2020. 10. 4.
[Flutter로 iOS 앱 개발하기] Flutter란? Udemy 사이트에서 Flutter 강좌 를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. Flutter란? 플러터(Flutter)는 구글이 개발한 오픈 소스 모바일 애플리케이션 개발 프레임워크이다. 안드로이드, iOS용 애플리케이션 개발을 위해, 또 구글 푸크시아용 애플리케이션 개발의 주된 방식으로 사용된다. (출처 : 위키백과) Flutter를 왜 사용할까? iOS 앱을 Android로 전환하기 위해서는 많은 시간과 공수가 들어간다. 처음 개발할 때 뿐만 아니라 지속적인 버그 픽스와 업데이트가 필요하기 때문에 그때마다 또 시간과 공수가 많이 들어간다. 또한,, 화면 비율이나 크기가 달라질 때마다 디자인을 조정해야 하는 것은 개발자에겐 너무나 큰 고통,,,,😭 Flutter는 .. 2020. 10. 3.
[배경화면] 오마이걸 아린 에스콰이어 화보 촬영 현장 진짜,, WM ㅠㅠㅠㅠ 가을 무드 아린이 사진 대방출 해줘서 너무너무 감사해요 ㅠㅠㅠㅠ (사진 출처 : 네이버 포스트 - [오마이걸] 가을의 여신♥ '아린' 에스콰이어 화보 촬영 현장) 사진을 여러 장 올려주셨는데 그 중에 제 픽을 골라서 배경화면을 만들어 보았습니다~! * 이미지 사이즈는 아이폰 xs에 최적화되어 있습니다. 배경화면 적용 미리 보기 배경화면 2020. 10. 2.
반응형

티스토리툴바