Flutter와 Firebase로 Android iOS 둘 다 만들기 14 런쳐 꾸미기

앱 아이콘과 스플래쉬 페이지를 만들어봅니다.

개요

앱 아이콘을 제대로 만드려면 엄청난 노력이 필요합니다.

앱아이콘은 하나가 아니라 ios/안드로이드별로 다르고.. 패드용, 툴바용, 앱푸시용등 10가지도 넘는 용도가 있어서 사이즈도 색상도 전부 다르게 하는 것입니다.

사실 노력보다는 전문가에게 의뢰를 주는 것이 맞습니다.

하지만 간단한 앱을 만들면서 많은 시간과 비용을 지불하기는 안타깝습니다.

그럴 때 사용하는 런쳐아이콘 제네레이터를 사용해봅니다.

기본 아이콘 만들기

포토샾 일러가 없을 경우 온라인에서 간단히 만들 수 있습니다.

참고: https://www.photopea.com

가급적 1024*1024 px로 만드시길 추천합니다.

네이티브로 제네레이트할때도 정사각형이 필요했던것 같습니다.

flutter_launcher_icons

flutter_launcher_icons 모듈은 이미지 하나만 있으면 알아서 ios/android 아이콘을 생성해줍니다.

참고: https://pub.dev/packages/flutter_launcher_icons#-readme-tab-

모듈 등록

pubspec.yaml

dev_dependencies:
  # ..
  flutter_launcher_icons: "^0.7.3"

개발의존성에 추가합니다.

아이콘 지정

pubspec.yaml

flutter_icons:
  android: true
  ios: true
  image_path: "assets/icon.png"

android/ios 를 true로 하면 해당 이미지가 각 android/ios 디렉토리에 적절하게 놓이게 됩니다.

각각 다른 파일명으로 만들 수도 있습니다. eg) android: “launcher_icon”

image_path의 경우 android/ios 둘다를 뜻하며, image_path_ios image_path_android 따로 만들 수도 있습니다.

안드로이드의 경우 adaptive_icon_background, adaptive_icon_foreground 를 지정하면 더 조화롭게 만들 수도 있습니다.

스플래쉬 페이지 만들기

스플래쉬 페이지는 앱이 구동하기전에 광고처럼 각인 시켜주는 효과를 합니다.

아름다운 모양은 못내지만 간단하게 만들어 보겠습니다.

assets 이용하기

assets이란 자산이란 뜻입니다. resource도 같은 개념입니다.

앱 파일에 자산을 넣어두고 꺼내서 쓸 수 있습니다.

주로 고정 이미지 자원을 불러올 때 사용합니다.

참고: https://flutter-ko.dev/docs/development/ui/assets-and-images

pubspec.yaml

flutter:
  assets:
    # - assets/my_icon.png
    # - assets/background.png
    - assets/ # all

주로 이런식으로 자산에 포함할 파일들을 추가해야 사용이 됩니다.

assets 디렉토리 아래 전부를 사용하려면 - assets/ 로 하면 끝입니다.

조심해야할 것은 하위 디렉토리는 전부 사용이 불가능 합니다.

사용 예

  assets:
    - assets/images/ # X
    - graphics/ # O

이미지 로드

이미지를 로드하는 방법은 여러가지인데 대표적인 방법 2가지만 다뤄봅니다.

Image(image: AssetImage('assets/icon.png'));
// or
Image.assets('assets/icon.png')

스플래쉬 페이지 만들기

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

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Theme.of(context).primaryColor,
      child: Center(      
        child: Image.asset('assets/icon.png', width: MediaQuery.of(context).size.width),
      )
    );
  }
}

만들어둔 아이콘을 중앙에 배치해봤습니다.

앞으로 자주 등장할 Theme 재활용 방법입니다. 부모의 주색상을 지정했습니다.

이미지는 width를 MediaQuery를 사용해 화면사이즈에 맞게 키워봤습니다.

3초간 보여주기

메인페이지에서 3초만 잡고 보여주면 끝입니다

class _LoadPageState extends State<LoadPage> {
  bool _splashLoading = true;

  @override
  void initState() { 
    super.initState();
    Future.delayed(Duration(seconds: 3))
      .then((r) => setState(() => _splashLoading = false));    
  }

  @override
  Widget build(BuildContext context) {
    if (_splashLoading) return SplashPage();
    // ..

Future.delayed를 이용해 3초동안 스플래시 페이지를 보여주고 메인 페이지를 보여주는 간단한 코드입니다.

마치며

이것저것 테스트하다 보니 폰에 플러터아이콘이 잔뜩 있는게 보기 싫어서 만들어봅니다~

후지긴 하지만 이렇게라도 바꿔놔야 스토어 등록이 가능합니다~

영상