[플러터] 앱 기본 세팅 (VSCODE 사용)

프로젝트 생성

 

! 먼저 플러터 개발환경 세팅을 완료해야 된다.

 

 

 

vscode를 실행시킨 후 ctrl + shift + p > Flutter New Project > Aplication 누르고

 

 

 

프로젝트의 위치를 선택해준다.

나같은 경우는 찾기 쉽도록 바탕화면으로 설정해줬다.

 

이렇게 생성한 프로젝트는 폴더형식의 파일이다.

 

 

 

프로젝트 이름(폴더명)을 지어주고 'Enter' 키를 누르면

 

 

 

이렇게 프로젝트가 생성된다.

다시 프로젝트를 열 때는 파일 > 폴더열기 > 생성한 프로젝트 폴더 선택 순으로 하면 된다.

 

 

 

폴더구조 세팅

 

 

프로젝트를 생성하면 위와같은 기본 폴더구조가 보일텐데

여기서 프로젝트에 필요한 폴더나 파일을 추가할 것이다.

 

아래 빈 곳을 클릭한 후 폴더 생성버튼을 눌러 'asset' 이라는 폴더를 생성해준다.

그러면 프로젝트 폴더(ESCAPE_ANCHOVY)안에 폴더가 생성될 것이다.

 

 

 

asset 폴더 안에는 폰트나 이미지 같은 다운로드 파일들이 들어갈 것이다.

 

 

 

라이브러리 폴더안에 이런식으로 폴더구조를 세팅해줬다.

 

대략적으로 설명을하자면

res폴더 안에는 리소스 파일들이 들어가고

src폴더 안에는 소스 파일들이 들어간다.

 

 

 

기기 연결

 

프로젝트를 빌드시키는 방법에는 두 가지 방법이 있다.

 

1. 애뮬레이터 실행 후 실행하기

2. 스마트폰과 컴퓨터 연결해서 스마트폰에서 실행하기  

 

더블 모니터를 쓴다면 1번의 방법을 써도 상관없겠지만

본인같이 화면 하나로 개발을 진행한다면 2번 방법을 추천한다.

 

개발하면서 검색 같은 거 하면 화면전환을 계속 하게 되는데

그럴 떄 1번 방법을 쓰면 굉장히 불편하다.

 

준비물

 

집에 usb커넥터만 있으면 되는데

만약 없다면 가까운 다이소 같은 데 가서 하나 사면 된다.

 

컴퓨터 usb포트 찾아서 휴대폰과 연결해주면 준비 완료

 

 

USB 디버깅 설정

Flutter - 내가 만든 앱, 내 휴대폰으로 디버깅 하기 (안드로이드)

핸드폰에 프로젝트를 빌드시키려면 USB 디버깅을 허용해줘야 하는데

'Flutter VSCode 핸드폰 연결' 이라고 검색하면 어떻게 하는지 나온다.

 

 

장점

기기 연결해두는 걸 추천하는게

애뮬레이터로 빌드시키면 보통 자잘한 렉같은게 계속 걸리는데

기기에서 빌드시키면 잔렉같은게 싹 사라진다.

 

 

 

폰트 설정

Pretendard

여기 들어가서 폰트를 다운로드 해야한다.

무스마에서 쓰던 폰튼데 깔끔하고 상업적 사용도 허가라서 이걸 쓰기로 했다.

 

 

 

압축풀고

 

 

 

압축 폰 폴더 > public > static > alternative 경로로 들어가

Bold, Medium, Light 이렇게 3개의 파일을 font 폴더에다가 추가해준다.

 

ctrl 누르고 원하는 파일 선택한 다음 드래그 하면 된다.

 

 

 

그 다음 pubsepc.yaml 파일에서 폰트추가 설정을 해줘야 하는데

 주석이 너무 많아 코드 읽기가 힘들어서 일단 주석을 다 지워줬다.

 

 

 

uses-material-design: true 라는 문구 바로 밑에 작성해준다.

 

assets에는 asset폴더의 경로를 작성해주면 된다.

 

fonts에서 family에는 폰트의 이름을 쓰면되고

그 밑에는 weight(폰트 굵기)값에 맞는 ttf파일을

assets에 각각 할당해주면 된다.

 

개행이나 칸 잘못 맞추면 오류 뜨면서 실행이 안되니 잘보고 작성해주자

참고로 각 탭마다 2칸씩 띄워야 한다.

(회색선 사이의 간격이 2칸이다.)

 

 

 

다른 폰트 굵기도 추가하고 싶다면 이걸 참고해서 하면 된다.

'font weight in css' 라고 검색하면 나온다.

 

 

변경사항 적용

vscode에선 ctrl + s 눌러 저장한 번 하면 알아서 반영이 된다.

 

 

 

적용이 안된 거 같으면 터미널에 flutter pub get이라고 쳐보자

그러면 파일을 잘못 입력 했을 때 뭐가 잘못됬는지 알려준다.

 

 

 

bash창에서 커맨드를 실행시키면 된다. 

 

 

 

디자인 시스템 적용

Figma

작성한 디자인 시스템이다.

 

디자인 시스템을 사용하면 색상이나 글꼴을 일괄적으로 바꾸기 굉장히 편리하다.

물론 설정할 떈 좀 많이 귀찮다;;

 

 

 

text 폴더 안에 colors.dart와 styles.dart를 추가

 

 

colors.dart

import 'package:flutter/material.dart';

class LightModeColors {
  static const Color background = Color(0xFFF9F9F9);
  static const Color blue = Color(0xFF5B84FF);
  static const Color red = Color(0xFFFE3F2F);
  static const Color green = Color(0xFF009300);
  static const Color gold = Color(0xFFCDA500);
  static const Color yellow = Color(0xFFCDA500);
  static const Color dark1 = Color(0xFF202020);
  static const Color dark2 = Color(0xFF3E3E3E);
  static const Color dark3 = Color(0xFF8A848D);
  static const Color dark4 = Color(0xFFE1E1E1);
}

class DarkModeColors {
  static const Color background = Color(0xFF121212);
  static const Color blue = Color(0xFF79A2FF);
  static const Color red = Color(0xFFFF5D4D);
  static const Color green = Color(0xFF1EB11E);
  static const Color yellow = Color(0xFFE9C332);
  static const Color dark1 = Color(0xFFF2F2F2);
  static const Color dark2 = Color(0xFFCDCDCD);
  static const Color dark3 = Color(0xFFA8A2AB);
  static const Color dark4 = Color(0xFF2A2A2A);
}

extension ThemeExtension on BuildContext {
  bool get isLight => Theme.of(this).brightness == Brightness.light;
}

 

색상이 정의되어 있는 파일이다.

 

테마 설정을 위해 라이트모드와 다크모드의 색상을 각각 설정해주었다.

맨 밑의 isLight는 현재 앱의 테마가 라이트 테마라면 true를 아니라면 false를 반환하는 변수이다.

 

 

styles.dart

import 'package:flutter/material.dart';

class TextStyles {
  static const String fontName = 'Pretendard';

  static const TextStyle title = TextStyle(
    fontSize: 40,
    fontWeight: FontWeight.w700,
    fontFamily: fontName,
    height: 1.2,
  );

  static const TextStyle h1Bold = TextStyle(
      fontSize: 28, fontWeight: FontWeight.w700, fontFamily: fontName);

  static const TextStyle h1Medium = TextStyle(
      fontSize: 28, fontWeight: FontWeight.w500, fontFamily: fontName);

  static const TextStyle h1Regular = TextStyle(
      fontSize: 28, fontWeight: FontWeight.w400, fontFamily: fontName);
      
   // 중략..

 

TextStyle들이 정의되어 있는 파일이다.

 

 

사용법

Text('이런 식으로 쓰면 됩니다.', style: TextStyles.h1Regular.copyWith(color: LightModeColors.dark1))

 

Text 위젯의 style 프로퍼티에 정의해둔 스타일을 적용하고

copywith의 color프로퍼티로 글자의 색상을 정의하면 된다.

 

글꼴과 색상을 클래스에서 갖다쓰는 형식이다.

 

 

 

잘 나오는 모습

 

 

 

const 자동으로 붙이기

 

 

상태변화가 없는 위젯앞에 const를 안 붙이면

성능향상을 위해 앞에 const를 붙이라고 파란줄이 뜨게 되는데

 

그래서 찾아보니까 저장 한 번 누르면 일괄적으로 붙여주는 설정이 있었다.

 

Flutter - VS Code에서 자동으로 const 붙여주는 기능 설정하기, const를 왜 붙여야할까?

이거보고 따라해주자

 

 

 

깃허브 연동

 

레파지토리 하나 만들어서 'code' 버튼 누르고 저장소 주소 복사

 

 

 

git 저장소를 초기화 해준다.

 

 

 

하고 나면 이렇게 파일들이 초록색으로 변하게 되는데

이는 기존 저장소에 없는 새로 생성된 파일이란 뜻이다.

 

 

 

프로젝트 폴더에 원격 저장소를 연결해준다.

'git remote add origin 저장소 주소' 를 치면 된다.

 

 

 

저장소가 제데로 연결됬는지 확인해준다.

 

 

 

브랜치명을 main으로 변경해준다.

 

왜나하면 깃허브의 branch명이 main으로 되어있기 떄문이다.

이걸 하지 않고 그대로 푸쉬를 하면 브랜치명이 다르다고 오류가 나게된다.

 

 

 

'git add .' 변경 사항이 있는 모든 파일들을 스테이징 시켜놓는 커맨드이다.

'git add 파일명' 으로 특정 파일만 스테이징 시켜놓을 수 있다.

 

 

 

vscode 좌측 탭에서 소스제어를 선택하면

스테이징된 변경 사항을 확인할 수 있는데 스테이징을 취소할 수도 있다.

 

 

 

파일이 스테이징 되지 않은 상태라면

잘못 변경한 파일은 변경 내용 취소도 가능하다. 

 

 

 

git commit -m "커밋메시지" 커맨드로 커밋메시지를 등록할 수 있다.

git에서 버전 관리를 하며 바뀐 부분들에 대한 새로운 버전을 메시지와 함께 저장하는 명령어이다.

 

 

 

'git push origin 현재저장소' 커맨드로 스테이징된 파일들을

원격저장소에 푸쉬할 수 있다.

 

 

 

main 브랜치에 프로젝트가 잘 올라온 모습이다.

 

 

 

푸쉬오류 해결

 

 

만약 레파지토리를 생성했을 때

리드미 파일이 추가한 상태로 생성을 했다면 

 

 

 

푸쉬하려고 할 때 이런 오류가 뜰 것이다.

 

 

 

이는 플러터 기본구조에 있는 리드미 파일과 원격저장소의 리드미 파일이 달라

충돌이 일어나는 현상인데 해결법은 간단하다.

 

 

 

깃허브에서 리드미 파일을 수정하는 것이 아닌

폴더 내의 리드미 파일을 수정하고 커밋을 하면 된다.

 

 

 

깃허브

GitHub - hamond12/EscapeAnchovy: 운동일지 앱