Flutter에서 스플래시 화면 생성 및 실행 아이콘

시작 화면과 앱의 시작 아이콘을 만듭니다.

소개

Flutter 앱 개발 자습서 시리즈의 첫 번째 부분에 오신 것을 환영합니다. Khadka's Coding Lounge의 Nibesh입니다. 아직 보지 않았다면 로 이동하여 이 자습서 블로그 시리즈에 대한 모든 세부 정보를 찾으십시오.

시작하기

다음은 사용자가 앱 실행 시 가장 먼저 거치는 작업의 사용자 화면 흐름 이미지입니다.


사용자 화면 흐름 순서대로 시작하겠습니다. 따라서 이 섹션에서는 애플리케이션의 시작 아이콘과 시작 화면을 설정합니다. 이제 애플리케이션을 만들어 시작하겠습니다. 터미널에서:

# I am using the Desktop Directory
cd Desktop

# Create a Flutter project
flutter create astha 

# Go to the folder and open the folder on VS Code.
cd astha

code .

자산

모든 프로젝트 이미지는 루트 디렉토리의 자산 폴더에 저장되고 더 나아가 자체 관련 하위 디렉토리에 저장됩니다. 그럼 이미지를 저장할 폴더를 만들어 봅시다.

# In your project root for instance /home/<user>/Desktop/astha
mkdir assets  assets/splash

원하시는 이미지를 사용하시거나 아래 이미지를 다운받아 사용하실 수 있습니다. canva에서 만들었습니다.


스플래시 화면 - 옴 스플래쉬


앱 실행 아이콘 - Om 및 Lotus 스플래시 이미지

imageresizer에서 언급한 대로 다른 크기를 얻기 위해 native splash package에서 이 이미지의 크기를 조정했습니다.

자산/스플래쉬 내에서 다운로드해야 합니다. 그런 다음 이러한 이미지를 사용하려면 pubspec 파일에 이미지를 추가해야 합니다. pubsec.yaml 파일에서 주석이 달린 자산 섹션을 찾을 수 있습니다. 주석을 제거하거나 다음으로 바꾸십시오.

# To add assets to your application, add an assets section, like this:
# The outer assets  not folder name 
# but a variable that tells flutter SDK where to look for assets into
  assets:
     # Splash Screens
    - assets/splash/om_splash.png
    - assets/splash/om_lotus_splash.png
    - assets/splash/om_lotus_splash_1152x1152.png

로컬 저장소에서 사용할 이미지 소스는 위와 같이 pubspec.yaml 파일에 등록해야 합니다.

패키지

시작 아이콘으로 flutter_launcher_icons 을 사용합니다.

시작 화면에는 flutter_native_splash 을 사용하겠습니다.

내가 사용하는 버전을 사용하려면 pubspec.yaml에 붙여넣기만 하면 됩니다.

설치

# On dependencies section
dependencies:
  flutter:
    sdk: flutter
  flutter_native_splash: ^2.1.1

#On dev_dependencies section
dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.9.2

_들여쓰기에 유의하고 각 패키지의 페이지를 방문하여 변경된 사항이 있는 경우 설정에 대한 readme 지침을 따르십시오. _

Note: Please remember that the settings will only work up to Android 11 as intended. From Android 12+, the splash screen will only show up on launch from emulator icon tap but not on app run from VS Code. Another thing to remember is that the splash screen will be clipped as a round image in the center. I tried to change the window background but failed nonetheless.

설정

이제 패키지를 추가했으므로 몇 가지 추가 설정을 제공해야 합니다. 따라서 다시 pubspec.yaml 파일에서 다음을 수행합니다.

#Just add these towards the end
# Launch icon settings
flutter_icons:
  android: true
  ios: true
  image_path: "assets/splash/om_splash.png"
  adaptive_icon_background: "#FFD1A6"
  adaptive_icon_foreground: "assets/splash/om_splash.png"

# Splash Screen Settings
flutter_native_splash:
  #general
  background_image: "assets/splash/om_lotus_splash.png"
  android_12:
    image: assets/splash/om_lotus_splash_1152x1152.png
    # icon_background_color: "#FFD1A6"

이제 파일을 저장하고 VS Code 터미널로 이동하여 다음 명령을 실행합니다.

# For splash screen
flutter pub run flutter_native_splash:create

# For launch icon
flutter pub run flutter_launcher_icons:main

가능한 오류

두 번째 명령을 실행하는 동안 오류가 발생했는데 SDK 버전의 비호환성 문제인 것으로 판명되었습니다. 따라서 android>app>build.gradle에서 Compiled, Minimum 및 Target SDK 버전을 찾아 변경합니다.

# Only change these values don't delete anything else.
android {
.......
    compileSdkVersion 31
...

defaultConfig {
         applicationId "com.example.astha"
        minSdkVersion 21
        targetSdkVersion 30
....
}

그런 다음 파일을 저장하고 터미널에서 다음 명령을 다시 실행하십시오.

# For launch icon
flutter pub run flutter_launcher_icons:main

홈페이지

시리즈의 다음 블로그에서는 온보드를 만들고 등록된 사용자에 대해서만 앱을 잠글 것입니다. 하지만 지금은 런처 아이콘과 시작 화면을 테스트하기 위해 간단한 홈 화면을 만들어 보겠습니다(필수는 아니지만). main.dart 파일에서:

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() async {
  //  concrete binding for applications based on the Widgets framewor
  WidgetsFlutterBinding.ensureInitialized();

  SystemChrome.setSystemUIOverlayStyle(
    SystemUiOverlayStyle.dark.copyWith(statusBarColor: Colors.black38),
  );

  // Firebase initalize
  runApp(const Home());
}

class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        body: Center(child: Text("Home Page")),
      ),
    );
  }
}

지금까지 수행한 작업에 대한 이 짧은 클립을 확인하십시오.

요약

자, 이것으로 Flutter 앱 개발 시리즈의 첫 번째 부분이 완료되었습니다.

flutter_launcher_icons 패키지를 사용하여 Android에서 시작 아이콘을 구현했습니다.

또한 flutter_native_splash 패키지를 사용하여 앱의 스플래시 화면을 구현했습니다.

또한 Android 12에서 일부 예상되는 손상에 대해 작업하고 있습니다.

지원 표시

다가오는 블로그에서는 먼저 사용자를 위한 온보드 경험을 만들 것입니다. 시리즈와 기대에 대해 더 알고 싶다면 시리즈를 확인하세요.

질문이 있으시면 언제든지 댓글을 달아주세요. 기사를 좋아하고 친구들과 공유하십시오. 시간 내주셔서 감사하고 계속 지원해 주세요. 업로드 후 즉시 알림을 받으려면 팔로우하는 것을 잊지 마세요.

웹사이트와 모바일 애플리케이션을 만드는 프리랜서 에이전시 Khadka's Coding Lounge의 Nibesh입니다.