플러터 프로젝트 생성(Create flutter project), Scaffold, Assets & pubspec.yaml, App icon
[ko]
*** 플러터 프로젝트 생성(Create flutter project) 및 프로젝트 기본 구조
[en]
Create flutter project, scaffold, assets & pubspec.yaml, app icon
[ko]
1) 신규 프로젝트 생성
- android studio 실행 —> Start a new Flutter project —> Flutter Application
- Project name : aaa (프로젝트명은 영문 소문자와 underscore 기호로 만듭니다.)
- 다른 모든 설정은 그대로 둡니다.
- Project location은
/Users/xxx/AndroidStudioProjects
로 되어 있으며, spotlight(맥OS의 경우)에서 AndroidStudioProject를 검색해보면 해당 위치에 새로운 프로젝트가 만들어진 것을 확인할 수 있습니다.
- Set the package name 단계에서는 company domain을 입력합니다. flutter에서는 company name과 project name을 결합하고 좌우를 바꿔서 자동으로 package name을 생성합니다. Company name이 없다면 ‘본인 이름.com' 을 입력해도 됩니다.(즉, 실제로 존재하지 않는 도메인 이름이어도 무방합니다. example.com을 그대로 사용해도 괜찮습니다.) Package name은 app store에서 다른 app과 겹치면 안되며 유일해야 합니다.
- Kotlin이나 Swift를 사용할 계획이 없다면 Platform channel language는 체크하지 않은 상태로 Finish 버튼을 클릭합니다. —> 새로운 flutter project가 만들어집니다.
[en]
1) Create new project -run android studio —> Start a new Flutter project —> Flutter Application
- Project name: aaa (Project name should be lowercase and underscore)
- Leave all other settings as they are.
- Project location / Users / xxx / AndroidStudioProjects If you search AndroidStudioProject in spotlight (Mac OS), you can see that a new project has been created in that location.
- In the Set the package name step, enter your company domain. In flutter, the package name is automatically generated by combining the company name and the project name and swapping them. If you don't have a company name, you can enter 'your name.com' (that is, it can be a domain name that doesn't really exist. You can use example.com as it is.) The package name must not overlap with any other app in the app store. It must be unique. If you do not plan to use Kotlin or Swift, uncheck the Platform channel language and click the Finish button. —> A new flutter project is created.
[ko]
2) 신규 프로젝트 편집 개시
- dart 프로그램은 최초 실행시 main.dart 파일을 실행시키므로 main.dart 파일은 반드시 있어야 하며, 이름도 변경하면 안 됩니다.
- lib 폴더내의 main.dart 파일에서 맨 위 2줄만 남기고 모두 삭제합니다.
[en]
2) Start editing new project
- The dart program executes the main.dart file at the first run, so the main.dart file must be present and the name must not be changed. Delete all but the top two lines from the main.dart file in the lib folder.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
[ko]
- aaa 프로젝트 폴더 내의 test 폴더도 삭제합니다.
- MyApp()은 삭제하고 builtin widget인 MatrialApp()으로 교체합니다.
[en]
Also delete the test folder inside the aaa project folder.
- MyApp () is deleted and replaced with MatrialApp () which is a builtin widget.
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp());
[ko]
- command button을 누른 상태에서 해당 widget을 클릭하면 widget의 source code 파일이 열립니다.
- Android studio auto formatting :
window(ctrl+alt+L), Mac(command+option+L)
또는 메뉴 버튼을 클릭해서 Reformat Code with dartfmt 선택
(autoformat을 하기 위해서는 마지막 argument의 뒤에 콤마를 넣어야 함. 즉, flutter팀은 모든 괄호의 뒤에 콤마를 넣는 것을 제안합니다.)
- Material widget : 네비게이션 기능을 가지는 최상위 위젯이기 때문에 main function의 runApp function에 들어가는 최상위 실행 widget에는 보통 MaterialApp이 들어갑니다. home, routes 등의 property를 입력할 수 있음. home에는 일반적으로 appBar, body property를 넣을 수 있는 Scaffold widget을 사용합니다.
- Text widget : 화면에 보여줄 text를 string 형태의 argument로 받음.
- Center widget : 가운데로 배치시킬 widget을 child로 받음.
- 중괄호를 이용한 code reformat : fat arrow를 삭제하고 code block를 curly brace로 감싸줌.
- 다른 팀원이 자신의 코드를 보거나 나중에 자기 자신이 자신이 작성한 코드를 잘 이해하기 위해서는 // (comment, 주석) 기능을 이용해서 해당 코드에 대한 설명을 달아두는 습관을 들이는게 좋습니다.
[en]
- Hold down the command button and click the widget to open the widget's source code file.
- Android studio auto formatting: window (ctrl + alt + L), Mac (command + option + L) Or click the menu button and select Reformat Code with dartfmt (In order to autoformat, you must put a comma after the last argument, ie the flutter team suggests putting a comma after all parentheses.)
- Material widget: Because this is a top level widget with navigation, the top level execution widget that enters the runApp function of the main function usually contains a MaterialApp. You can enter properties such as home and routes. Home generally uses a Scaffold widget that can contain appBar and body properties.
- Text widget: Receive the text to display as a string argument.
- Center widget: Receive the widget to be centered as a child.
- Code reformat using curly braces: deletes the fat arrow and wraps the code block in curly braces.
- In order for other team members to see your code or to understand your own code later, it is a good idea to use // (comment, comment) to comment on the code.
import 'package:flutter/material.dart';
// The main function is the starting point for all our Flutter apps.
void main() {
runApp(
MaterialApp(
home: Center(
child: Text('Hello World'),
),
),
);
}
[ko]
- editor 화면 바로 왼쪽의 + - 버튼을 누르면 code를 부분별로 펴고 접을 수 있습니다.
- 다른 widget으로 감싸기 : option + enter 또는 에디터 왼편의 전구와 역삼각형 아이콘 클릭 (window : alt+enter)
[en]
- Press the +-button to the left of the editor screen to expand and fold code.
- Wrap it in another widget: option + enter or click the lightbulb and inverted triangle icon on the left side of the editor (window: alt + enter)
*** Scaffold
[ko]
- closing label setup : Android Studio - Preferences - Editor - Appearance - Show closing labels in Dart source code
- Scaffold widget : appBar, body property를 가짐
- appBar에는 AppBar widget을 사용, AppBar widget은 leading, title, actions, flexibleSpaces, bottom 등의 property를 사용 가능합니다.
- device 화면 우측 상단의 DEBUG 표시 없애려면 android studio 우측 Flutter Inspector - More Actions —> Hide Debug Mode Banner 선택
- material design의 color palette(색상별 농도 선택 가능) : https://material.io/design/color/the-color-system.html#tools-for-picking-colors
- AppBar widget과 Scaffold widget은 각각 backgroundColor property를 가지며, ‘Colors.색상’의 방식으로 색상을 지정할 수 있습니다.
- Scaffold의 body에는 Image widget을 사용해서 image를 넣을 수 있습니다.
[en]
-closing label setup: Android Studio-Preferences-Editor-Appearance-Show closing labels in Dart source code
- Scaffold widget with appBar and body properties
- AppBar widget is used for appBar, AppBar widget can use properties such as leading, title, actions, flexibleSpaces, bottom.
- To get rid of the DEBUG display in the upper right corner of the device screen, select Flutter Inspector in Android studio on the right-More Actions —> Hide Debug Mode Banner
- Color palette of material design (selectable density): https://material.io/design/color/the-color-system.html#tools-for-picking-colors
- The AppBar widget and the Scaffold widget each have a backgroundColor property, and you can specify colors in the 'Colors.Color' method.
- Scaffold's body can contain an image using the Image widget.
- final code
import 'package:flutter/material.dart';
// The main function is the starting point for all our Flutter apps.
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(
title: Text('aaa'),
backgroundColor: Colors.blueGrey[900],
),
body: Center(
child: Image(
image: NetworkImage('<image_url>'),
),
),
),
),
);
}
*** Assets, pubspec.yaml
[ko]
- 이미지를 네트워크에서 fetch하는 방법이 아니라 app 자체의 assets에 포함하는 방법을 알아보겠습니다.
- 프로젝트 폴더 바로 밑에 images 폴더를 생성하고, sample.png 파일을 준비해서 image 폴더에 복사해서 넣습니다.
- 추가된 assets를 사용하려면 pubspec.yaml 파일에 내용을 넣어서 등록해 주어야 합니다.
- YAML : YAML Ain’t Markup Language 의 약자이며, human readable type의 language 입니다.
- pubspec.yaml 파일에서의 주석은 // 가 아닌 # 표시를 사용합니다.
- 주석 일괄 처리 및 해제 처리 : command + /
- pubspec.yaml 파일의 assets 부분 주석을 해제하고, 추가하려는 이미지 파일의 경로와 이름으로 변경합니다.
- pubspec.yaml 파일에서 new section은 왼편에 indentation 없이 작성하고, section의 child는 단계별로 2space의 indentation을 주어야 합니다.(주석을 해제하면 3칸의 indentation으로 설정되니 1개를 줄여서 2칸의 indentation으로 변경해 주어야 정상적으로 작동합니다.)
- pubspec.yaml에 기본적으로 작성되어 있는 모든 주석은 헷갈리니 모두 삭제합니다.
[en]
- Let's see how to include images in the assets of the app itself, not how to fetch images from the network.
- Create an images folder directly under the project folder, prepare a sample.png file, and copy it into the image folder.
- In order to use the added assets, you have to register the contents in the pubspec.yaml file.
YAML stands for YAML Ai n’t Markup Language and is a human readable type language.
- Comments in the pubspec.yaml file use the # sign rather than //.
- Batching and uncomment comments: command + /
- Uncomment the assets section of the pubspec.yaml file and change the path and name of the image file to add.
- In the pubspec.yaml file, the new section should be written without indentation on the left side, and the child of the section should be given two space indentation step by step. You need to change it to make it work.)
- All comments written by default in pubspec.yaml are confusing, so delete them all.
flutter:
uses-material-design: true
assets:
- images/sample.png
[ko]
- pubspec.yaml 파일의 내용이 변경되고나면, 항상 editor 상단의 Packages get button을 눌러서 변경된 내용을 flutter에 등록(적용)시켜 주어야 합니다. 이후부터 main.dart 등의 파일에서 등록한 assets를 사용할 수 있게 됩니다.
- 위 code에서 개별 파일이 아닌 특정 폴더의 전체 assets을 가져오고 싶다면 ‘- images/‘ 까지만 입력 후 Packages get button을 눌러서 특정 폴더 전체의 assets를 등록합니다. (폴더내의 파일은 아래 방법으로 인식되지만 폴더내의 폴더는 아래 방법으로는 인식되지 않습니다. 아마도 별도 폴더 경로로 등록하면 될 것 같습니다.)
[en]
- Once the contents of the pubspec.yaml file have been changed, you should always register (apply) the changes with flutter by clicking the Packages get button at the top of the editor. After that, you can use the registered assets in files such as main.dart. - If you want to import all assets in a specific folder instead of individual files in the code above, input only '-images /' and register the entire assets by pressing the Packages get button. (Files in a folder are recognized by the following method, but folders in a folder are not recognized by the method below. Probably registered as a separate folder path.)
flutter:
uses-material-design: true
assets:
- images/
[ko]
- 위에서 먼저 사용했던 NetworkImage widget 대신 AssetImage widget을 사용해서 등록했던 image asset의 위치를 등록합니다.
[en]
- Use the AssetImage widget instead of the NetworkImage widget used earlier to register the location of the image asset you registered.
- final code
import 'package:flutter/material.dart';
// The main function is the starting point for all our Flutter apps.
void main() {
runApp(
MaterialApp(
home: Scaffold(
backgroundColor: Colors.blueGrey,
appBar: AppBar(
title: Text('aaa'),
backgroundColor: Colors.blueGrey[900],
),
body: Center(
child: Image(
image: AssetImage('images/sample.png'),
),
),
),
),
);
}
*** 앱아이콘 만들기(make App Icons)
[ko]
- app의 실행 아이콘을 변경해 봅시다.
- custom app icon 만들기!
- ‘sample.png’ 파일을 준비합니다.
- 아래 사이트에 접속합니다.
- 변환할 png 파일을 위 사이트의 왼편 공간에 drag&drop 하고, 우측에서는 iPhone, Android만 남기고 체크를 해제한 후 Generate 버튼을 클릭해서 iPhone과 Android용 app icon 모음을 생성합니다. 생성된 zip 파일의 압축을 해제하면 다양한 해상도의 파일이 포함된 2개의 폴더(Appicons-android, Assets.xcassets)가 생성됩니다.
[en]
- Let's change the app's launch icon.
- Create a custom app icon!
- Prepare the ‘sample.png’ file.
- Access the site below. https://appicon.co/
- Drag and drop the png file to be converted into the space on the left side of the site above, uncheck it to leave only iPhone and Android on the right side and click the Generate button to create a collection of app icons for iPhone and Android. When you unzip the generated zip file, you will have two folders (Appicons-android, Assets.xcassets) containing files of various resolutions.
[ko]
- editor에서 icon 파일을 넣을 위치를 찾습니다.
1. android : android - app - src - main - res 에서 우클릭 —> Reveal in Finder
(Window : Show in Explorer)
—> res 폴더내의 파일중 Appicons-android 폴더에 있는 5개의 폴더를 교체해줍니다.
2. iPhone : iOS - Runner - Assets.xcassets 에서 우클릭 —> Reveal in Finder
—> 다운로드 받은 Assets.xcassets 폴더로 교체해줍니다.
- 차이점 : iPhone은 icon 폴더를 통채로 교체해주고, android phone은 해당 파일만 교체해줍니다.
[en]
In the editor, browse to the location where you want to put the icon file.
1.Right click on android: android-app-src-main-res —> Reveal in Finder (Window: Show in Explorer) —> Replaces five folders in the Appicons-android folder among the files in the res folder.
2.iPhone: iOS-Runner-Right-click on Assets.xcassets —> Reveal in Finder —> Replace with the downloaded Assets.xcassets folder.
Differences: iPhone replaces the icon folder entirely, and android phone replaces only those files.
[ko]
- 폴더 또는 파일 삭제 : Mac 휴지통으로 끌어놓기 또는 command + backspace
- android studio에서 app을 중지-재실행(rebuild) 시켜서 새로운 app icon이 생성되도록한 후 새로 만들어진 icon을 확인합니다.
- google에서는 최근 아이콘 모양을 다변화 하였습니다. android phone에서 icon 모양을 circle 형태로 바꾸어 봅시다.
: Res - 우클릭 - image asset - Path에서 icon 파일(최초의 icon source file) 선택 —> Resize 기능으로 크기 조정 —> next —> finish —> app rebuilt —> android emulator에서 변경된 icon 확인
(ide error가 발생하는 경우도 있으나 icon은 정상적으로 변경됩니다.)
[en]
- Delete folder or file: Drag and drop it to Mac Trash or command + backspace
- In android studio, stop-rebuild the app so that a new app icon is created and check the newly created icon.
- Google recently diversified the appearance of icons. Let's change the shape of icon to circle on android phone. Res-Right-click-image asset-Select icon file (the first icon source file) in Path —> Resize with Resize function —> next —> finish —> app rebuilt —> Check for changed icon in android emulator (There may be an ide error, but the icon changes normally.)
'플러터(Flutter) > 플러터 일반(Flutter General)' 카테고리의 다른 글
| Random number generator (0) | 2020.03.18 |
|---|---|
| setState 원리 (setState Principle) (0) | 2020.03.18 |
| Custom Fonts in Your Flutter App (0) | 2020.03.18 |
| Hot Reload and Hot Restart - Flutter (0) | 2020.03.18 |
| 플러터와 다트 (Flutter & Dart) (0) | 2020.01.09 |