[MVVM Flutter-app 제작] #01 Assets 추가하기, HardCoding 의미 / Splash Screen, Scaffold 의미와 활용

해당 게시글은 유데미 Learn Flutter MVVM Architecture 강의를 듣고 제작하였습니다.

Assets 추가하기

하나의 어플에는 많은 이미지들이 사용된다.
예시로 배달의민족 화면을 보면 여러 그림과 아이콘들이 사용된 것을 확인할 수 있다.
이러한 이미지들을 관리하기 위해서 assets를 활용한다.

이미지를 assets 폴더에 넣어 관리하기 위해 프로젝트 내부에 assets 이라는 폴더를 생성한다. 그 아래 images 라는 폴더 생성 후, 어플에서 사용될 이미지 파일들을 넣으면 된다. images 폴더 생성하는 이유는 assets 이 이미지만 있는 게 아니기 때문이다. 음악이나 동영상같은 자료들도 assets 에 들어갈 수 있다.

우리가 생성해놨던 lib 내부 MVVM 폴더 구조에서 Resources 폴더가 있었다. 해당 폴더는 asset들을 관리하기 위한 폴더로 내부에 똑같이 images라는 폴더를 생성한다. 그 후 그 내부에 .dart 파일을 만들 것이다.

코드 이해를 위해 하드 코딩이라는 개념을 이해할 필요가 있다.

Hard Coding 이란?

hard coding 이란 데이터를 코드 내부에 직접 입력하는 것이다.
설정 사항이나 코드 등의 시스템적으로 사용하는 변수를 사용하지 않고
값을 직접 소스코드에 박아서 사용하는 방식이다. 하드코딩은 코드가 바뀌었을 경우 자동으로 반영되지 않기때문에 이후에 버그가 발생할 위기가 많으므로 최대한 피해야 한다.

하드코딩을 피하려면

코드에 상수를 직접 써 넣어 빌드 후 변경할 수 없는 방식으로 코드를 만들어야 한다.
상수란 프로그램이 실행과 동시에 선언하여 실행되는 동안은 변하지 않는 용도로 사용한다.

플러터에서는
static const 를 통해 상수를 정의할 수 있다.

아래 코드를 보면
ImageAssets 이라는 클래스를 정의한 후 해당 클래스 내부에 이미지를 연결한 상수들을 정의하고 있다. (주석은 일단 무시)

class ImageAssets
{
  // use static const to avoid hard coding
  static const nightRain = 'assets/images/nightRain.png';
  static const heavyRain = 'assets/images/heavyRain.png';
  static const nightStatRain = 'assets/images/nightStatRain.png';
  static const map = 'assets/images/map.png';
  // static const moon = 'assets/images/moon.png';
//  static const nightThunder = 'assets/images/nightThunder.png';
//  static const rainbow = 'assets/images/rainbow.png';
//  static const starCLear = 'assets/images/starCLear.png';
  static const starts = 'assets/images/start.png';
  static const sun = 'assets/images/sun.png';
  static const sunHeavyRain = 'assets/images/sunHeavyRain.png';
//  static const sunRaint = 'assets/images/sunRaint.png';
//  static const sunSlowRain = 'assets/images/sunSlowRain.png';
//  static const thunder = 'assets/images/thunder.png';
  static const umbrella = 'assets/images/umbrella.png';
  static const wind = 'assets/images/wind.png';
  static const windWave = 'assets/images/windWave.png';


}

---

Splash Screen

스플래시 스크린이란 앱을 구동(Cold start)할 때 보여주는 시작화면을 말한다. 아래와 같은 이미지를 많이 봤을 것이다. 어플 시작할 때 1-2초 보여주는 화면이 스플래시 스크린이다.

Scaffold

스캐폴드란 기본 설계 레이아웃 구조를 구현하기 위한 클래스로 기본적으로 뼈대를 짜기 위한 클래스이다.

스캐폴드는 아래 사진의 구조를 가진다.

참고로 Flutter는 Material Design을 바탕으로 위젯이 만들어진다.

MaterialApp은 Material Design을 사용할 수 있게 해주는 class 이다.
해당 클래스는 플러터에 이미 구현되어 있다.

https://m2.material.io/design

위 링크를 통해 머터리얼 디자인에 대해 알아볼 수 있다.

Splash Screen 구현

스플래시 스크린은 사용자에게 보이는 화면이므로 MVVM 구조에서 View 에 해당한다. 따라서 View 내부에 Splash 폴더를 생성한 후, dart 파일을 생성해준다.

st 를 누르고 엔터를 치면 자동으로 코드가 생성되므로 해당 코드의 클래스 명과 메소드 같은 걸 수정하면 된다. SplashScreen 클래스로 네임을 바꾸고, 상태를 위해 _SplashScreenState 로 클래스명을 바꾼다.

Dart는 자바처럼 public, protected, private과 같은 키워드를 갖고 있지 않는다.
따라서 다트는 언더바_를 사용해서 해당 밑줄 필드, 클래스 및 메서드는 정의된 .dart파일(라이브러리)에서만 사용할 수 있다는 의미로 쓴다.

SplashScreenState 는 상태정보를 지니므로 해당 파일에서만 사용하는 것이다.

스캐폴드 사용을 위해, build 메소드 내부에 Scaffold 를 리턴할 수 있도록 한다. Scaffold 의 정의를 위해 Scaffold() 로 괄호 내부에 적어준다.
플러터는 객체 생성 시 new 키워드를 사용하지 않기 때문에 해당 키워드는 사용하지 않는다. body는 아래 사진 참고하면 가장 가운데 부분이다. 따라서

body: Center() 로 바디의 가운데에 child 를 넣어준다. child 는 Image클래스의 asset 메소드를 사용해서 ImageAssets의 아무 아이콘을 200,200 의 크기로 호출한 것이다.

그 후, 다시 main.dart 로 이동해서 앱 구동시 Scaffold 화면을 띄울 수 있도록 해야 한다.

main.dart 를 빌드하면 스프래시스크린이 떠야하므로, build 메소드 내부에 MaterialApp 객체를 리턴하도록 한다. title, theme, home 을 정의하면된다. title 은 어플 맨 위에뜨는 title 을 입력하기 위한 것이고, theme 은 화면의 테마를 구성하기 위한 것이며, home 이 내용 부분이다. home 에는 아까 제작한 SplashScreen 객체를 넣어준다.

에뮬레이터로 실행해보면 위 사진처럼 실행된다.

• 위에 있는 debug 배너 없애려면 debugShowCheckedModeBanner을 false 로 설정해주면 된다.
  debugShowCheckedModeBanner: false, <- 한 줄 추가