플러터13 Flutter 앱 개발 7 : Contents 뷰 - Drawer 추가 Flutter 앱 개발 6 : Contents 뷰 - Scaffold, AppBar 추가 포스팅에 이어 Contents 뷰에 Drawer를 추가해 보자. 1. Drawer 추가 Drawer는 좌에서 우로 슬라이딩 되며 나오는 메뉴인데, '앱 평가하기' 메뉴를 drawer 에 추가해 보자. 지난 포스트에 작성해둔 Contents 클래스에 drawer를 추가해 보자. 뷰의 기본 틀을 만들어주는 Scaffold 위젯의 drawer 속성을 구현해 주면 된다. 참고로 구현 방법은 Drawer 위젯의 child 로 원하는 UI를 구성해 주면 된다. 일반적으로 Column 에 제목인 DrawerHeader 를 넣고 필요한 메뉴를 ListTile로 추가한다. 자세한 내용은 아래 코드의 주석을 참고하길 바란다. @ove.. 2021. 1. 3. Flutter 앱 개발 3 : 앱 아이콘 추가 아이콘을 1024 x 1024 크기로 준비한다. InkScape 로 공돌이 갬성으로 그려서 PNG 파일로 export 했다. 안드로이드 앱 아이콘은 폰 해상도별로 다양한 크기로 준비해 줘야 한다. 직접 만들기 귀찮아서 App Icon Generator 라는 사이트를 활용했다. 사이트에 만들어둔 이미지를 추가 한후 'Generate' 라고 적혀있는 파란색 버튼을 누르면 AppIcons.zip 파일이 다운로드 된다. 파일의 압축을 풀고 AppIcons > android 아래에 있는 모든 디렉토리를 프로젝트의 android > app > src > main > res 아래에 복사하면 아이콘 준비가 끝난다. :) # 다운로드 폴더 에서 unzip AppIcons.zip cd AppIcons cp -r AppIc.. 2021. 1. 2. Flutter 앱 개발 2 : 프로젝트 생성 패키지 ID를 com.drogrammer.apod 로 하는 프로젝트를 생성해보자. flutter create --org com.drogrammer apod 결과적으로, 아래와 같은 디렉토리 구조가 생성된다. 시작은 쉽다. ㅎㅎ; . └── apod ├── android │ ├── app │ │ └── src │ │ ├── debug │ │ ├── main │ │ │ ├── java │ │ │ │ └── io │ │ │ │ └── flutter │ │ │ │ └── plugins │ │ │ ├── kotlin │ │ │ │ └── com │ │ │ │ └── drogrammer │ │ │ │ └── apod │ │ │ └── res │ │ │ ├── drawable │ │ │ ├── mipmap-hdpi .. 2021. 1. 2. Flutter 앱 개발 1 : 기획 (Space Daily) 최근 취미로 천문 사진 관련 안드로이드 앱 'Space Daily' 를 출시 했다. 이 앱을 기반으로 플러터 개발 및 출시 과정에 대해서 공유하고자 한다. Space Daily - Apps on Google Play Every day, you can see stunning photos of the universe with brief descriptions from astronomers. In addition, you can save high-quality photos to your phone's gallery. All photos and information are provided through the NASA Astronomy Picture of the Day (A play.google.com 1. 목.. 2021. 1. 2. Flutter 는 왜 Declarative UI 를? Flutter 공식 페이지에도 소개되는 내용이지만 한번 더 소화해서 정리해 보자. Introduction to declarative UI Explains the difference between a declarative and imperative programming style. flutter.dev Imperative vs. Declarative 일단 Imperative 와 Declarative 의 차이부터 알아보자. Imperative는 명령형 Declarative는 선언형 을 의미한다. 뭔 말이지? 아래 Flutter 공식 사이트에 나오는 예제로 이야기해 보자. 배경색을 노란색에서 빨간색으로 변경하고 ViewB 타입의 b에 있는 ViewC 타입의 c1과 c2를 없애고 대신 ViewC 타입의 c3 를.. 2020. 12. 31. Flutter 첫 어플리케이션 뭔지 몰라도 일단 한번 만들어보자! 1. 패키지 생성 커맨드 라인 상에서 com.mycompany.hello_flutter 패키지를 생성해 보자. 참고로 --org 옵션을 사용하지 않으면 패키지 이름이 com.example.hello_flutter 가 되어 나중에 출시 시점에 귀찮아 지므로 미리미리 설정해 두자. flutter create --org com.mycompany hello_flutter 참고로 VS Code 에서 Ctrl + Shift +p 로 command pallete 를 열고 "Flutter: New Application Project" 를 실행하여 GUI 상에서 프로젝트를 생성할 수도 있다. 하지만, 패키지 이름 prefix가 com.example 로 하드 코딩 되므로 추후 귀찮게 바.. 2020. 12. 31. 이전 1 2 3 다음
