본문 바로가기
반응형

💻 Programming/Flutter12

[Flutter로 iOS 앱 개발하기] 재사용가능한 위젯 만들기 Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 반복적으로 사용되는 위젯을 함수처럼 정의해놓고 필요할 때마다 가져와서 쓸 수 있는 방법이 존재한다. 예를 들어, 아래 코드와 같은 Container 위젯을 반복적으로 사용해야 한다고 생각해보자. Container( margin: EdgeInsets.all(15.0), decoration: BoxDecoration( borderRadius: BorderRadius.circular(10.0), color: Colors.black, ), ) Container 위에 커서를 위치시켜 놓고, Android Studio 우측에 있는 Flutter Outline을 클릭해준다... 2020. 11. 3.
[Flutter로 iOS 앱 개발하기] Flutter Themes (Flutter 테마) 적용하기 Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 참고 문서 : Flutter 개발자 문서 - Theme 사용법 💡 Flutter Themes : 컬러 팔레트와 앱의 스타일을 커스텀할 수 있는 간단한 방법 MaterailApp 위젯에 ThemeData 위젯을 추가하여 다양한 속성들을 커스텀할 수 있다. 어떤 속성들을 변경할 수 있는지 개발자 문서에서 확인 가능하다. Summary 웹 페이지에서 특정 색상 코드 가져오기(ColorZilla 사용법) 색상을 Hex 코드로 설정하는 방법 배경색, 강조색 등 색상 설정 시, 사전 정의되어 있는 색상이 아닌 색상을 사용하고 싶은 경우, hex 코드로 설정할 수 있다. 범.. 2020. 11. 2.
[Flutter로 iOS 앱 개발하기] Class(클래스) Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. 연관되어 있는 두 개의 리스트가 있을 때, Class를 활용할 수 있다. 예를 들어, 퀴즈 어플을 만드는 경우, 아래와 같이 두 개의 리스트를 만드는 것이 아니라, question, answer 라는 속성을 갖는 클래스를 만드는 것이 좋다. List questions = [ 'You can lead a cow down stairs but not up stairs.', 'Approximately one quarter of human bones are in the feet.', 'A slug\'s blood is green.' ]; List answers = [fa.. 2020. 10. 30.
[Flutter로 iOS 앱 개발하기] Android Studio에서 Show Context Actions / opt + Enter 키가 작동하지 않는 이유 Udemy 사이트에서 Flutter 강좌를 수강 중입니다! 공부하는 내용을 최대한 정리하여 업로드 하려고 합니다. * Mac을 기준으로 합니다. Android Studio에서 작업 시 Show context actions (opt + enter 키)가 작동하지 않는 경우가 종종 있었다. 구글링을 해봐도 원인을 잘 모르겠어서 그럴 때마다 깊은 분노를 느끼면서 Android Studio를 껐다 켰다.. 🤬 그런데 이제 원인을 알게 되어서 기쁜 마음으로 포스팅을 한다!!!!! 🎉 끼야호 첫번째 FlatButton 위젯을 Expanded 위젯으로 감싸고 나서, 두번째 FlatButton 위젯도 동일한 작업을 하려고 했는데 아무리 opt + Enter 키를 누르고 우클릭 후 Show Context actions .. 2020. 10. 18.
[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.
반응형

티스토리툴바