본문으로 이동

플러터:VSCode: 두 판 사이의 차이

학교의 모든 지식. SMwiki
편집 취소Sam (토론 | 기여)
봇, 사무관, 인터페이스 관리자, 푸시 구독 관리자, 기록보호자, 관리자, 교사
9,264 편집
시각위키텍스트
새 문서: {{플러터}} == 개요 == VSCode로 플러터를 사용하는 이들을 위한 팁과 지식. {| class="wikitable" ! ! ! |- |VSCode | * 프로젝트 시작. : ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다. * 애뮬레이터. : 우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이터를 고를 수 있다.(안드로이드 스튜디오에서 설치한 에뮬레이터 사용 가능.) * 앱 실행....
 
잔글 →개요
 
(같은 사용자의 중간 판 7개는 보이지 않습니다)
3번째 줄: 3번째 줄:
== 개요 ==
== 개요 ==
VSCode로 플러터를 사용하는 이들을 위한 팁과 지식.
VSCode로 플러터를 사용하는 이들을 위한 팁과 지식.
설치에 대한 것은 [[플러터:개요#기본 양식|플러터:개요 - 학교의 모든 지식. SMwiki]]을 참고하자.
{| class="wikitable"
{| class="wikitable"
!
!
13번째 줄: 15번째 줄:


: ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다.
: ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다.
: 유의: 프로젝트명은 알파벳 소문자로만 구성한다.


* 애뮬레이터.
* 애뮬레이터.


: 우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이터를 고를 수 있다.(안드로이드 스튜디오에서 설치한 에뮬레이터 사용 가능.)
: 우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이터를 고를 수 있다.(아래 참고. 크롬 및 안드로이드 스튜디오에서 설치한 에뮬레이터 사용 가능.)


* 앱 실행. 에뮬레이터 실행 후 크게 3가지 방법이 있다. Run and Debug, main 함수 위에 뜬 Run 클릭, F5 이후 vscode 상단에 앱의 실행과 관련된 버튼들이 나타난다.
* 앱 실행. 에뮬레이터 실행 후 크게 3가지 방법이 있다. Run and Debug, main 함수 위에 뜬 Run 클릭, F5 이후 vscode 상단에 앱의 실행과 관련된 버튼들이 나타난다.
vscode ctrl+shift+p에서 Emulator 선택하면 쓸 수 있다.(세팅에서 항상 top에 있게 하면 보기 편하다.)
|에뮬 켜는 데 시간 좀 걸린다.
|에뮬 켜는 데 시간 좀 걸린다.
|-
|터미널
|터미널은 powershell로 열게 하면 좋다.
|
|}
|}
=== 추천 익스텐션 ===
{| class="wikitable"
{| class="wikitable"
|+
|+
39번째 줄: 49번째 줄:
|
|
|-
|-
|
|Bracket Pair Colorizer 2
|
|괄호가 많이 생기면 헷갈리는데, 색으로 짝이 되는 괄호를 표시해준다.
|
|
|}
|}
59번째 줄: 69번째 줄:
|
|
|}
|}
= 팁 =
=== Refector ===
편집을 하다 보면 Column을 가운데 정렬해야 한다든가, 다른 요소 안에 집어넣어야 할 때가 있다. 그러면 감싸는 위젯을 위에서 작성하고 아래에선 괄호를 닫아주어야 하는데.. Refector 메뉴(ctrl + . ) 을 사용하면 간단하게 할 수 있다.

2025년 12월 31일 (수) 05:24 기준 최신판

틀:플러터 Dart:개요 플러터에 대한 지식 분류

  1. 플러터:개요
    1. 플러터:VSCode
    2. 플러터:안드로이드 스튜디오
  2. 플러터:실행
  3. 플러터:개념 잡기
    1. 플러터:화면 하나 만들기
    2. 플러터:변하는 화면(StatefulWidget)
    3. 플러터:화면 전환(화면 쌓기, 하단 네비게이션 바)
    4. 플러터:화면 전환(Drawer)
    5. 플러터:입력 관련
      1. 플러터:버튼
      2. 플러터:키보드 입력
      3. 플러터:슬라이더
    6. 플러터:그래프 그리기(fl chart)
    7. 플러터:데이터 저장(간단한 데이터)
    8. 플러터:인증(Firebase 인증)(미완)
    9. 플러터:인증(OAuth2)(미완)
  4. 권한 사용
    1. 플러터:마이크 입력
  5. 위젯
    1. 플러터:아이콘
    2. 플러터:레이아웃 계열 위젯
    3. 플러터:네비게이션 계열 위젯
    4. 플러터:버튼
    5. 플러터:상태관리(미완)
  6. 플러터:DB연결
    1. 플러터:Firebase(미완)
    2. 플러터:MySQL(미완)
  7. 디자인
    1. 플러터:테마
    2. 플러터:앱바
  8. 플러터:배포
  9. 플러터:참고자료
  10. 플러터:위젯
    1. 플러터:공간배치용 위젯
  11. 플러터:라이브러리
    1. 플러터:logger

개요

[편집 | 원본 편집]

VSCode로 플러터를 사용하는 이들을 위한 팁과 지식.

설치에 대한 것은 플러터:개요 - 학교의 모든 지식. SMwiki을 참고하자.

VSCode
  • 프로젝트 시작.
ctrl+shift+p에서 flutter를 기입해 적절한 것을 선택해 시작한다.
유의: 프로젝트명은 알파벳 소문자로만 구성한다.
  • 애뮬레이터.
우측 하단에 자신이 사용하고 있는 OS 이름이 있을 텐데, 이곳에서 에뮬레이터를 고를 수 있다.(아래 참고. 크롬 및 안드로이드 스튜디오에서 설치한 에뮬레이터 사용 가능.)
  • 앱 실행. 에뮬레이터 실행 후 크게 3가지 방법이 있다. Run and Debug, main 함수 위에 뜬 Run 클릭, F5 이후 vscode 상단에 앱의 실행과 관련된 버튼들이 나타난다.

vscode ctrl+shift+p에서 Emulator 선택하면 쓸 수 있다.(세팅에서 항상 top에 있게 하면 보기 편하다.)

에뮬 켜는 데 시간 좀 걸린다.
터미널 터미널은 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로 해주면 저장할 때 자잘한 오류들을 고쳐준다.

팁

[편집 | 원본 편집]

Refector

[편집 | 원본 편집]

편집을 하다 보면 Column을 가운데 정렬해야 한다든가, 다른 요소 안에 집어넣어야 할 때가 있다. 그러면 감싸는 위젯을 위에서 작성하고 아래에선 괄호를 닫아주어야 하는데.. Refector 메뉴(ctrl + . ) 을 사용하면 간단하게 할 수 있다.

원본 주소 "https://smwiki.info/index.php?title=플러터:VSCode&oldid=10854"