[ Flutter 02 ] LauchScreen 만들기

런치 스크린 (Launch Screen)

• 목적: 앱이 로드되는 동안 사용자가 보는 초기 화면입니다.

• 특징: 플랫폼(즉, iOS 또는 Android)에서 기본적으로 제공되는 기능을 사용하여 구현됩니다.

• 시간: 앱이 완전히 로드되고 첫 번째 프레임이 렌더링될 때까지 표시됩니다.

• 설정: iOS에서는 LaunchScreen.storyboard, Android에서는 styles.xml과 launch_background.xml 파일을 사용하여 설정합니다.

스플래시 스크린 (Splash Screen)

• 목적: 앱의 로고나 브랜드를 강조하기 위해 사용되는 화면입니다. 런치 스크린 이후 또는 앱 내에서 초기화 작업이 더 필요한 경우 추가로 표시됩니다.

• 특징: 앱 내에서 코드를 통해 제어되며, 보통 더 복잡한 애니메이션이나 그래픽을 포함할 수 있습니다.

• 시간: 개발자가 지정한 시간 동안 표시되며, 일반적으로 몇 초 동안 유지됩니다.

• 설정: Flutter에서는 보통 flutter_native_splash 패키지를 사용하여 설정합니다.

주의 사항

• 런치 스크린은 앱이 로드되는 동안 플랫폼에서 기본적으로 제공하는 화면이며, 설정이 간단하지만 커스터마이징이 제한적입니다.

• 스플래시 스크린은 앱이 로드된 후 추가로 표시할 수 있는 화면으로, 더 많은 커스터마이징이 가능합니다.

[ IOS 세팅 ] 

1. 이미지 준비:

런치 스크린에 사용할 이미지를 준비합니다. 이미지 파일을 Runner/Assets.xcassets 폴더에 추가합니다.

Ex) FlutterProjectPath/ios/Runner/Assets.xcassets/LauchImage.imageset/lauchScreen.png

2. Xcode 프로젝트 열기:

Runner.xcworkspace 파일을 Xcode에서 엽니다.

3. LaunchScreen.storyboard 수정:

- Runner >  Assets > 오른 쪽마우스클릭 New Image set

- LaunchScreen.storyboard 파일을 엽니다.

-  본 제공되는 UIView를 제거하고, UIImageView를 추가합니다.

-  UIImageView의 이미지 속성을 준비한 이미지로 설정합니다. 

-  필요에 따라 UIView 및 UILabel 등을 추가하여 원하는 레이아웃을 만듭니다.

4. Info.plist 수정:

• Runner/Info.plist 파일을 엽니다.

• UILaunchStoryboardName 키를 LaunchScreen으로 설정합니다. 만약 이 키가 없으면 추가합니다.

UILaunchStoryboardName 가 없다면 Launch Screen interface file base name 이있을수있다.

<key>UILaunchStoryboardName</key>
<string>LaunchScreen</string>

**혹은 Info > Lauch screen interface file base name 값을 LaunchScreen.storyboard

 Use as Launch Screen으로 설정

주의!!

Horizontally in Container 

Vertically in Container 

두부분에 대한 제약을 주지않으면, 화면꽉찬 상태로 landing 되지않는다. 

주의!! 

만약 Lauch Screen 을 모두지웠다면, 

View Controller 생성 > View. 추가 >. 영역에 꽉차도록 설정 > Alignment Constraints 설정 

참고 : https://dchkang83.tistory.com/106 

***에러 

이미지 등록시 이미지가 떠오르지 않는현상 ( 혹은 흰색화면이 보임, 글자가 추가한것만 보이고 이미지가 xassets에서 안나오는 현상 ).

: Xcode는 프로젝트 폴더에 위하는 이미지 파일들은 인식하니 Asset에 따로 등록 할 필요가 없이 이미지를 바로 선택 할 수 있다.

assets에 추가를 하게 되면 .xcassets 에 추가 됨으로 캐싱 문제가 발생함으로 반드시 앱 디렉토리에 위치시켜야 한다.

* IOS 14부터 .xcassets 파일 캐싱과 관련되 버그가 있으니 앱 디렉토리에 위치시켜 놓아야 한다.

Assets에서 기등록된 스플래시 이미지는 삭제한다.

캐싱 버그가 있으니 사용하지 않는게 좋을것 같아서 삭제하겠다.

Assets.xcassets 밖에 파일 추가 드래그앤드롭 + Copy items if needed 체크하여 추가한 이미지를 사용

위와같이 별도 “Resources” Group 생성하여 이미지파일 .png 들을 위치시켜서 사용하니 적용된다. 

*** 에러 

이미지가 내가 의도한데로 세팅이안된다.

: iOS의 Launch Screen에서는 Storyboard를 사용하기 때문에 특정 PNG 이미지의 크기를 조정하려면 Auto Layout이나 Content Mode를 활용해야 합니다.

1. Xcode에서 Launch Screen.storyboard 파일을 엽니다.

2. 이미지 뷰를 선택합니다.

3. 오른쪽 패널에서 Attributes Inspector를 엽니다.

4. Content Mode를 다음 중 하나로 설정합니다:

• Aspect Fit: 이미지가 화면 크기에 맞게 비율을 유지하며 축소됩니다.

• Aspect Fill: 화면을 꽉 채우며 비율을 유지하지만 잘릴 수 있습니다.

• Scale To Fill: 이미지가 비율을 무시하고 정확히 맞게 늘어나거나 줄어듭니다.

AspectFit 을 적용하고 

Constraints : width, height 값을 주었다. 고정크기를 주기위하여

Constraints : centerX,Y  vertical, horizontal. 중앙에 위치하도록하여 화면 정중앙에 위치시킴 

Label의 경우 

: Control 키를 누른 상태로 레이블을 이미지 뷰로 드래그합니다.

: 나타나는 팝업에서 Vertical Spacing을 선택합니다.

: 이렇게 하면 레이블의 위쪽을 이미지 뷰의 아래쪽에 연결하는 제약 조건을 추가한다.

: 만약 Spacing값을 조절하고싶으면 Attributes Inspector 에서 vertical spacing constraints를 조절한다.

참고 : https://devpluto.tistory.com/entry/iOS-스플래시-화면이-찌그러지는-문제

[ Android 설정  ]

1. 이미지 준비

런치 스크린에 사용할 이미지를 준비하고, android/app/src/main/res/drawable 폴더에 추가합니다. 예를 들어, 이미지 파일 이름을 launch_image.png로 합니다.

2. 안드로이드 스튜디오에서 프로젝트 열기

1. 안드로이드 스튜디오를 엽니다.

2. Flutter 프로젝트를 엽니다. (File -> Open -> 프로젝트의 android 폴더 선택)

3. 프로젝트가 열리면, 왼쪽 프로젝트 탐색기에서 Project 뷰를 선택하여 android 폴더 구조를 봅니다.

3. styles.xml 수정

1. android/app/src/main/res/values/styles.xml 파일을 엽니다.

2. styles.xml 파일에 다음 스타일을 추가합니다:

<resources>
    <style name="LaunchTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/launch_background</item>
    </style>
</resources>

4. launch_background.xml 생성 및 수정

1. android/app/src/main/res/drawable/launch_background.xml 파일을 생성합니다.

2. 다음 내용을 launch_background.xml 파일에 추가합니다:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/white" />
    <item>
        <bitmap
            android:gravity="center"
            android:scaleType="centerCrop"
            android:src="@drawable/launch_image" />
    </item>
</layer-list>

android:scaleType="centerCrop" 속성은 이미지가 중앙에서 잘리고, 가능한 한 화면을 가득 채우도록 만듭니다.

5. AndroidManifest.xml 수정

1. android/app/src/main/AndroidManifest.xml 파일을 엽니다.

2. <activity> 태그 내에 android:theme 속성을 추가하여 LaunchTheme를 적용합니다:

<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/LaunchTheme"
    android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|screenLayout|density|layoutDirection|fontScale|locale|touchscreen|mcc|mnc"
    android:hardwareAccelerated="true"
    android:windowSoftInputMode="adjustResize">
    <!-- ... -->
</activity>

[ 안드로이드 스튜디오로 확인하는 방법 ]

1. Flutter 및 Dart 플러그인 설치:

• 안드로이드 스튜디오를 열고, File -> Settings -> Plugins로 이동합니다.

• Marketplace 탭에서 Flutter를 검색하여 설치합니다. 이 과정에서 Dart 플러그인도 함께 설치됩니다.

• 설치 후, 안드로이드 스튜디오를 재시작합니다.

2. Flutter SDK 설정:

• File -> Settings -> Languages & Frameworks -> Flutter로 이동합니다.

• Flutter SDK path에 Flutter SDK 경로를 설정합니다. 일반적으로 Flutter SDK는 ~/flutter 경로에 설치됩니다.

1. Flutter 프로젝트 열기:

• 안드로이드 스튜디오를 열고, Open을 클릭합니다.

• Flutter 프로젝트의 루트 디렉토리(예: my_flutter_app 폴더)를 선택하고 OK를 클릭합니다.

• 프로젝트가 로드되면, 안드로이드 스튜디오가 필요한 종속성을 설치하고, 프로젝트를 인덱싱합니다.

2. 가상 디바이스 설정:

• 안드로이드 스튜디오 상단 메뉴에서 Tools -> AVD Manager를 선택합니다.

• 새로운 가상 디바이스를 생성하려면 Create Virtual Device를 클릭하고, 기존에 생성된 가상 디바이스를 사용할 수도 있습니다.

• 필요한 디바이스를 선택하고, 시스템 이미지를 선택하여 가상 디바이스를 생성합니다.

3. 가상 디바이스 실행:

• AVD Manager에서 생성된 가상 디바이스 옆에 있는 Play 버튼을 클릭하여 가상 디바이스를 실행합니다.

4. Flutter 앱 실행:

• 안드로이드 스튜디오 좌측 상단의 실행/디버그 구성에서 실행하려는 가상 디바이스를 선택합니다.

• 상단 메뉴에서 Run -> Run 'main.dart'를 선택하거나, 툴바에서 녹색 삼각형 버튼을 클릭하여 앱을 실행합니다.

• 앱이 빌드되고 가상 디바이스에서 실행됩니다.