[Flutter] 프로젝트 만들기 - (week 1)

프로젝트 생성

우선 바탕화면에 sparta 폴더 안에 flutter로 구분해서 생성한다.

이 폴더에 앱 개발에 관련된 리소스를 저장하고 관리할 것이다.

 

그리고 VSCode를 실행시킨 후 Flutter 프로젝트를 생성한다.

View > Pallete에서 Flutter를 검색하면 자동완성이 되는데 VSCode 확장 프로그램인 Flutter를 설치해야만 볼 수 있다.

Flutter:New Project를 선택하고

 

Application을 선택한다.

 

그러면 경로를 선택하는 창이 뜨게 되는데 여기서 아까 생성해 둔 폴더를 선택해 주고 프로젝트의 이름을 작성해 주면 Flutter로 개발할 수 있는 기본세팅으로 프로젝트가 생성된다. 

여기서 주의할 점은 프로젝트의 이름은 영문 소문자와 _ 문자만 사용이 가능하다.

 

디렉터리 구조

기본적으로 설치된 파일들 중 주의 깊게 봐야 하는 것이 있다.

lib : 주로 코딩하게 될 폴더

pubspec.yaml : 라이브러리 및 설정을 하는 폴더

android : Android 프로젝트 폴더

ios : iOS 프로젝트 폴더

web : Web 프로젝트 폴더

 

이중 직접적으로 수정이 되는 부분은 lib와 pubspec.yaml 두 가지이다.

 

lib

프로젝트의 소스 코드가 저장되고 관리되는 폴더이다. 

내부에는 기본적으로 main.dart 파일이 있는데 이 파일이 Flutter 프로젝트가 실행하는 메인 파일이다.

 

pubspec.yaml

라이브러리와 설정들이 들어가는 파일로 새로운 라이브러리를 설치하게 되면 이 파일을 수정하게 된다.

 

 

프로젝트 세팅

main.dart의 코드를 모두 지우고 다음과 같이 코드를 작성한다.

 

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(),
      ),
    );
  }
}

위 코드는 기본적으로 Flutter를 실행할 수 있도록 작성된 코드로 기본적으로 작성되어 있던 코드를 간략하게 만든 것이라 볼 수 있다.

 

작성하게 되면 MyApp 부분에 파란색 밑줄이 표시되는데 이 부분을 우선 해결한다.

 

디렉터리의 analysis_options.yaml 파일에서 ruesl: 코드의 다음줄에 다음 코드를 작성한다.

  rules:
    prefer_const_constructors: false
    prefer_const_literals_to_create_immutables: false

여기서 코드를 작성할 때 들여 쓰기를 잘못할 경우 에러가 발생하기 때문에 주의해야 한다. 

이제 MyApp에 표시되는 파란 줄이 사라진다.

 

이 파란 줄은 개선할 여지가 있는 부분을 VSCode가 알려주는 것으로 줄이 표시되는 부분에 마우스를 올리면 설명을 볼 수 있다.

아까 봤던 MyApp에서 파란 줄의 의미는 위젯이 변경될 가능성이 없기 때문에 const(상수) 키워드를 앞에 붙여 변하지 않도록 선언하라는 의미이다. 상수로 선언된 위젯들은 새로고침을 할 필요가 없어지므로 성능상의 이점이 있다.

 

안내대로 const를 붙여주니 파란 줄이 사라지는 걸 확인할 수 있다.

 analysis_options.yaml 에서 추가했던 코드는 위처럼 더 선호되는 코드에 대한 설정을 끄는 코드이다.

 

Dart 세팅

VSCode에서 Flutter 개발 시 도움을 주는 설정을 추가한다.

View > Command Palette > dart recommend 검색 후 Dart : Use Recommended Settings를 선택한다.

이 기능은 저장 시 코드를 자동 정렬 시켜주는 편의 기능이다.

 

Emulator 실행하기

에뮬레이터는 실제 기기를 연결하지 않고 개발할 수 있도록 컴퓨터 상의 가상 장치를 말하며 기기가 실제로 없더라도 테스트를 진행할 수 있다. 단 카메라나 Apple의 로그인과 같은 특정 기능들은 실제 기기에서만 테스트할 수 있다.

 

View > Command Palette > launch > Flutter : Launch Emulator로 에뮬레이터를 선택한다.

iOS의 경우 Windows 환경에서는 사용이 불가능하다.

 

 

목록에서 선택을 하면 에뮬레이터가 실행된다. 

VSCode의 하단을 보면 현재 실행 중인 에뮬레이터를 확인할 수 있다.

저 부분을 클릭해 보면 사용이 가능한 장치들의 목록을 확인할 수 있다.

 

 

 

에뮬레이터의 부팅이 끝난 후 우측 상단의 재생 버튼을 누르면 실행 옵션을 선택할 수 있다.

• Start Debugging : 디버깅으로 실행
• Run Without Debugging : 디버깅 없이 실행

두 옵션 모두 앱을 실행하지만 디버깅은 코드의 에러나 문제를 찾기 위한 추가적인 동작이 작동하기 때문에 디버깅 없이 실행하는 Run Without Debugging 옵션이 더 빠르기 때문에 단순히 앱을 실행하는 게 목적이면 이 옵션을 선택한다.

 

옵션을 선택하고 실행시켜 주면 현재 작성된 main.dart 코드가 실행된다.

현재 main.dart는 앱을 실행하는 기본적인 코드만 들어가 있기 때문에 위처럼 아무것도 뜨지 않는 화면이 뜬다면 성공적으로 코드가 실행된 것이다.