틀:플러터
Dart:개요
플러터에 대한 지식 분류
- 플러터:개요
- 플러터:VSCode
- 플러터:안드로이드 스튜디오
- 플러터:실행
- 플러터:개념 잡기
- 플러터:화면 하나 만들기
- 플러터:변하는 화면(StatefulWidget)
- 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
- 플러터:화면 전환(Drawer)
- 플러터:입력 관련
- 플러터:버튼
- 플러터:키보드 입력
- 플러터:슬라이더
- 플러터:그래프 그리기(fl chart)
- 플러터:데이터 저장(간단한 데이터)
- 플러터:인증(Firebase 인증)(미완)
- 플러터:인증(OAuth2)(미완)
- 권한 사용
- 플러터:마이크 입력
- 위젯
- 플러터:아이콘
- 플러터:레이아웃 계열 위젯
- 플러터:네비게이션 계열 위젯
- 플러터:버튼
- 플러터:상태관리(미완)
- 플러터:DB연결
- 플러터:Firebase(미완)
- 플러터:MySQL(미완)
- 디자인
- 플러터:테마
- 플러터:앱바
- 플러터:배포
- 플러터:참고자료
- 플러터:위젯
- 플러터:공간배치용 위젯
- 플러터:라이브러리
- 플러터:logger
개요
VSCode로 플러터를 사용하는 이들을 위한 팁과 지식.
설치에 대한 것은 플러터:개요 - 학교의 모든 지식. SMwiki을 참고하자.
|
|
|
|
| VSCode
|
- ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다.
- 유의: 프로젝트명은 알파벳 소문자로만 구성한다.
- 우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이터를 고를 수 있다.(아래 참고. 크롬 및 안드로이드 스튜디오에서 설치한 에뮬레이터 사용 가능.)
- 앱 실행. 에뮬레이터 실행 후 크게 3가지 방법이 있다. Run and Debug, main 함수 위에 뜬 Run 클릭, F5 이후 vscode 상단에 앱의 실행과 관련된 버튼들이 나타난다.
vscode ctrl+shift+p에서 Emulator 선택하면 쓸 수 있다.(세팅에서 항상 top에 있게 하면 보기 편하다.)
|
에뮬 켜는 데 시간 좀 걸린다.
|
| 에뮬레이터 사용하기
|
안드로이드 SDK를 지정해주어야 한다.
- 안드로이드 스튜디오에서 SDK Manager > Android SDK Location 경로를 복사해 환경변수로 설정해야 한다. 파워쉘을 관리자권한으로 실행하여 아래를 진행하자.
- flutter config --android-sdk "D:\code\Android\SDK"
- 터미널에서 flutter doctor --android-licenses 진행, 다 yes 처리해주면 된다.
- 이후 vscode를 재시작해주면 코드 실행으로 사용 가능.
|
|
| 터미널
|
터미널은 powershell로 열게 하면 좋다.
|
|
추천 익스텐션
| extention
|
설명
|
비고
|
| Flutter Riverpos Snippets
|
상태관리, 관련 코드를 불러와준다.
|
|
| Dart Data Class Generator
|
데이터클래스 생성 시 ctrl+. 을 통해 중복코딩 피하게 도움.
|
|
| Error Lens
|
에러나 실수를 라인별로 알려준다.
|
|
| Bracket Pair Colorizer 2
|
괄호가 많이 생기면 헷갈리는데, 색으로 짝이 되는 괄호를 표시해준다.
|
|
setting.json 옵션
보통은 다 True로 되어 있어 사용하고 있을 것이다.
| extention
|
설명
|
비고
|
| editor.formatOnSav
|
내부의 editor.formatOnSave 값을 True로 해주면 저장할 때 자동으로 줄맞춤을 해주어 가독성을 높여준다.
|
|
| source.fixAll
|
True로 해주면 저장할 때 자잘한 오류들을 고쳐준다.
|
|
