programming코딩

리얼 Flutter #2 Flutter Project 시작 – 빈 화면과 Splash

Posted kowana

Flutter Project 시작 기초 단계입니다.

Flutter 설치와 Project 생성은 한글로 Flutter Site에 잘 설명되어 있습니다.

Chapter #1 Flutter 핵심 들여다보기 말씀드렸듯이 Hello World를 프린트하고 Dart 문법 공부나 Widget을 하나씩 뜯어보는 건 실제 프로젝트를 하는 과정에서 설명이 되거나 크게 중요치 않은건 설명하지 않을 수도 있습니다.

Flutter Project 시작을 하는 첫번째 단계로 App Icon과 Splash Screen만 가지고 있는 텅빈 앱을 먼저 만들겠습니다.

App Icon과 Splash Screen

먼저 Flutter Project를 생성하면 다음 그림과 같이 Android, iOS 그리고 lib 폴더가 있습니다.

Android와 iOS는 각각의 Platform Code가 위치한 곳이고 Flutter Code는 lib folder에 위치합니다.

Flutter Project 시작 - 폴더구조

App Icon과 Splash Screen의 경우 Platform 의존성이 있는 부분이므로 코드가 Platform Code 위치에 Android, iOS 각각 존재합니다.

Android

App Icon

위 그림에서 Android 폴더 밑에 res 폴더를 찾아서 ic_launcher.png 파일을 기본 icon에서 제가 만든 icon으로 변경하였습니다.

DPI별로 Size를 다르게 만들어주어야 하여 간단히 그림을 그린 다음 Icon을 만들어주는 Site에서 만들어서 가져다 넣었습니다.

Splash Screen

아래와 같이 가기 size를 다르게한 splash.png 파일을 만들어 넣었습니다.

res\drawable\launcher_background.xml

res\drawable-v21\launcher_background.xml (이 경로는 Flutter 버전에 따라 없을 수 있습니다)

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/white" />

    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/splash"/>
    </item>
</layer-list>

iOS

저 지금 Mac Book 사러 알아보고 있어요. 직접 해보지도 않고 적기가 그래서 일단은 Android로만 진행하고 나중에 iOS로 직접 해보고 업데이트하도록 하겠습니다.

텅빈 화면 만들기

Flutter의 시작 위치는 main.dart파일에 있는 void main () 입니다.

새 Flutter Project를 만들면 기본으로 만들어져 있는 코드가 많은 주석과 함께 길게 있습니다만 과감히 모두 지워버리고 다음 코드만 적어넣습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

그럼 까맣고 텅빈 화면이 나옵니다.

코드 설명

  1. cupertino and material : cuperitino는 iOS, material은 Android의 UI를 구현해놓은 Widget library입니다. 둘 중에 하나는 반드시 import 하여야만 합니다. * cupertino와 material은 iOS, Android의 UI 스타일을 구현한 Widget이지 Platform에 맞게 꼭 맞는걸 사용해야 하는건 아닙니다. 즉, Android에서도 iOS Style의 UI를 구현할 수 있는것입니다.
  2. main and runApp : main은 시작 위치이고 runApp은 widget을 inflating합니다.
  3. StatelessWidget : StatefulWidget과 StatelessWidget이 있습니다. state에 따라서 Widget의 구성이 달라지는 것과 그렇지 않는 것의 차이입니다. 하지만 꼭 필요하지 않으면 전 StatefulWidget은 사용하지 않을 것입니다.
  4. Container() : Flutter는 Layout도 Widget입니다. runApp이 Widget을 inflating하는 것이니 Widget이 하나라도 있어야 하며 가장 최상위단에는 반드시 Layout Widget이 있어야 합니다.

Binary Size

앞서 Flutter가 App Size가 커지는게 단점이라고 언급하여 지금 상태에서 release 빌드해봤습니다.

4.9MB로 개발에 불편하거나 사용자가 용남할 수 없는 사이즈는 아니라고 생각합니다만 이후에 실제 앱의 기능을 구현하면서 Binary Size는 더 늘어나게 됩니다.

마치며

여기까지 하셨으면 이제 앱 구현으로 들어가면 됩니다.

Android Studio에서 Alt+Enter가 아주 많은 역할을 해주고 있습니다.

저는 그래서 사실 문법 공부에 크게 고민하지는 않습니다.

그러니 Dart를 처음 하시더라도 Alt+Enter와 함께 부담없이 진행해보시기 바랍니다.

다음 Chapter에서는 실질적인 더 재미있는 것으로 찾아뵙겠습니다.

감사합니다.

Leave a Reply