Flutter 앱에 스플래시 화면 추가

Flutter 앱에 스플래시 화면 추가

---

Flutter 앱에 스플래시 화면을 추가하는 방법은 무엇입니까? 다른 콘텐츠보다 먼저로드되고 표시되어야합니다. 현재 Scaffold (home : X) 위젯이로드되기 전에 잠시 색상이 깜박입니다.

---

Flutter에서 스플래시 화면을 수행하는 실제 방식에 더 많은 조명을 제공하고 싶습니다.

나는 여기에서 약간의 추적을 따라 갔고 Flutter의 스플래시 화면이 그렇게 나쁘게 보이지 않는 것을 보았습니다.

아마도 대부분의 개발자 (나와 같은)는 Flutter에 기본적으로 스플래시 화면이 없다고 생각하고 있으며 이에 대해 뭔가를해야합니다. 사실 스플래시 화면이 있지만 배경이 흰색이고 기본적으로 iOS와 안드로이드 용 스플래시 화면이 있다는 사실을 아무도 이해할 수 없습니다.

개발자가해야 할 유일한 작업은 올바른 위치에 브랜딩 이미지를 배치하는 것이며 스플래시 화면이 그렇게 작동하기 시작하기 때문입니다.

이제이 작업을 단계별로 수행하는 방법이 있습니다.

먼저 Android 용 (내가 가장 좋아하는 플랫폼이기 때문에 :))

1. Flutter 프로젝트에서 "android"폴더를 찾으십시오.

2. app-> src-> main-> res 폴더로 이동하여 브랜딩 이미지의 모든 변형을 해당 폴더에 배치합니다. 예를 들면 :

   • 밀도가 1 인 이미지는 mipmap-mdpi에 배치해야합니다.
   • 밀도가 1.5 인 이미지는 mipmap-hdpi에 배치해야합니다.
   • 밀도가 2 인 이미지는 mipmap-xdpi에 배치해야합니다.
   • 밀도가 3 인 이미지는 mipmap-xxdpi에 배치해야합니다.
   • 밀도가 4 인 이미지는 mipmap-xxxdpi에 배치해야합니다.

기본적으로 android 폴더에는 drawable-mdpi, drawable-hdpi 등이 없지만 원하는 경우 누구나 만들 수 있습니다. 이것이 이미지를 밉맵 폴더에 배치해야하는 이유입니다. 또한 스플래시 화면 (Android)에 대한 기본 XML 코드는 @drawable이 아닌 @mipmap에서 보일 것입니다 (원하는 경우 변경할 수 있음).

3. Android의 마지막 단계는 drawable / launch_background.xml에서 일부 코드의 주석 처리를 제거하는 것입니다. app-> src-> main-> res-> drawable로 이동하고 launch_background.xml을 엽니 다. 이 파일에서 슬래시 화면 배경이 흰색 인 이유를 알 수 있습니다. 2 단계에서 배치 한 브랜딩 이미지를 적용하려면 launch_background.xml 파일에서 일부 XML 코드의 주석 처리를 제거해야하므로 변경 후 코드는 다음과 같아야합니다.

   <!--<item android:drawable="@android:color/white" />-->
   
   <item>
   
       <bitmap
           android:gravity="center"
           android:src="@mipmap/your_image_name" />
   
   </item>
   

흰색 배경 코드에 주석을 달고 밉맵 이미지에 대한 코드의 주석을 제거합니다. 누군가 관심이 있다면이 launch_background.xml은 styles.xml 파일에서 사용됩니다.

이제 iOS 용 :

1. Flutter 프로젝트에서 "ios"폴더를 찾습니다.

2. Runner-> Assets.xcassets-> LaunchImage.imageset을 찾습니다. LaunchImage.png, LaunchImage@2x.png 등이 있어야합니다. 이제 이러한 이미지를 브랜딩 이미지 변형으로 바꿔야합니다. 예를 들면 :

   • 밀도가 1 인 이미지는 LaunchImage.png를 재정의해야합니다.
   • 밀도가 2 인 이미지는 LaunchImage@2x.png를 재정의해야합니다.
   • 밀도가 3 인 이미지는 LaunchImage@3x.png를 재정의해야합니다.
   • 밀도가 4 인 이미지는 LaunchImage@4x.png를 재정의해야합니다.

내가 틀리지 않았다면 LaunchImage@4x.png는 기본적으로 존재하지 않지만 쉽게 만들 수 있습니다. LaunchImage@4x.png가 존재하지 않는 경우 이미지와 동일한 디렉토리에있는 Contents.json 파일에서도 선언해야합니다. 변경 후 내 Contents.json 파일은 다음과 같습니다.

{
  "images" : [
    {
      "idiom" : "universal",
      "filename" : "LaunchImage.png",
      "scale" : "1x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@2x.png",
      "scale" : "2x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@3x.png",
      "scale" : "3x"
    },
    {
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

그게 다야. 다음에 앱을 실행할 때 Android 및 iOS에서 추가 한 브랜딩 이미지가있는 올바른 스플래시 화면이 있어야합니다.

감사

---

flutter create프로젝트를 진행 한 경우 https://flutter.io/assets-and-images/#updating-the-launch-screen 의 단계를 따를 수 있습니다 .

---

아직 좋은 예는 없지만 각 플랫폼에 대한 기본 도구를 사용하여 직접 수행 할 수 있습니다.

iOS : https://docs.nativescript.org/publishing/creating-launch-screens-ios

안드로이드 : https://www.bignerdranch.com/blog/splash-screens-the-right-way/

스플래시 화면의 예제 코드에 대한 업데이트는 발행물 8147 을 구독하십시오 . 스플래시 화면과 iOS 앱 사이의 검은 색 깜박임이 불편하다면 8127 호를 구독하여 업데이트하십시오.

편집 : 2017 년 8 월 31 일부로 새 프로젝트 템플릿에서 스플래시 화면 지원이 개선되었습니다. # 11505를 참조하십시오 .

---

Android의 경우 android> app> src> main> res> drawable> launcher_background.xml로 이동합니다.

이제 주석을 제거하고 @ mipmap / launch_image 를 이미지 위치로 바꿉니다 .

<item>
      <bitmap
          android:gravity="center"
          android:src="@mipmap/launch_image" />
</item>

여기에서 화면 색상을 변경할 수 있습니다.

<item android:drawable="@android:color/white" />

---

Flutter는 실제로 애플리케이션에 스플래시 화면을 추가하는 더 간단한 방법을 제공합니다. 다른 앱 화면을 디자인 할 때 먼저 기본 페이지를 디자인해야합니다. 상태가 몇 초 안에 변경되므로 StatefulWidget 으로 만들어야합니다 .

import 'dart:async';
import 'package:flutter/material.dart';
import 'home.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();
    Timer(
        Duration(seconds: 3),
        () => Navigator.of(context).pushReplacement(MaterialPageRoute(
            builder: (BuildContext context) => HomeScreen())));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset('assets/splash.png'),
      ),
    );
  }
}

로직 initState () 내부에서 원하는대로 Timer () 를 호출 합니다. 원하는대로 3 초 동안 만들었습니다. 완료되면 네비게이터를 애플리케이션의 홈 화면으로 푸시합니다.

참고 : 응용 프로그램은 스플래시 화면을 한 번만 표시해야하며 사용자는 뒤로 버튼을 눌러 다시 화면으로 돌아가서는 안됩니다. 이를 위해 Navigator.pushReplacement ()를 사용 합니다. 새 화면으로 이동하고 탐색 기록 스택에서 이전 화면을 제거합니다.

더 잘 이해하려면 Flutter : 나만의 스플래시 화면 디자인을 방문 하세요.

---

아래 코드를 시도해야합니다.

import 'dart:async';
import 'package:attendance/components/appbar.dart';
import 'package:attendance/homepage.dart';
import 'package:flutter/material.dart';

class _SplashScreenState extends State<SplashScreen>
with SingleTickerProviderStateMixin {


void handleTimeout() {
  Navigator.of(context).pushReplacement(new MaterialPageRoute(
    builder: (BuildContext context) => new MyHomePage()));
}

startTimeout() async {
  var duration = const Duration(seconds: 3);
  return new Timer(duration, handleTimeout);
}

@override
void initState() {
  // TODO: implement initState
  super.initState();

  _iconAnimationController = new AnimationController(
      vsync: this, duration: new Duration(milliseconds: 2000));

  _iconAnimation = new CurvedAnimation(
      parent: _iconAnimationController, curve: Curves.easeIn);
  _iconAnimation.addListener(() => this.setState(() {}));

  _iconAnimationController.forward();

  startTimeout();
}

@override
Widget build(BuildContext context) {
  return new Scaffold(
    body: new Scaffold(
      body: new Center(
        child: new Image(
        image: new AssetImage("images/logo.png"),
        width: _iconAnimation.value * 100,
        height: _iconAnimation.value * 100,
      )),
    ),
  );
}
}

---

@Collin Jackson과 @Sniper가 모두 옳습니다. 다음 단계에 따라 Android 및 iOS에서 각각 실행 이미지를 설정할 수 있습니다. 그런 다음 MyApp ()의 initState ()에서 Future.delayed를 사용하여 타이머를 설정하거나 API를 호출 할 수 있습니다. Future에서 응답이 반환 될 때까지 실행 아이콘이 표시되고 응답이 오면 스플래시 화면 이후에 가고 싶은 화면으로 이동할 수 있습니다. 이 링크를 볼 수 있습니다 : Flutter Splash Screen

---

이미지와 같은 오류가 발생하는 사람은 당신이 추가되어 있는지 검증 응답 메이크업을 적용한 후 발견되지 @ 밉맵 / ic_launcher 대신 @ 밉맵 / ic_launcher.png

---

아래와 같은 페이지를 추가하고 라우팅하면 도움이 될 수 있습니다.

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutkart/utils/flutkart.dart';
import 'package:flutkart/utils/my_navigator.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    Timer(Duration(seconds: 5), () => MyNavigator.goToIntro(context));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          Container(
            decoration: BoxDecoration(color: Colors.redAccent),
          ),
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              Expanded(
                flex: 2,
                child: Container(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 50.0,
                        child: Icon(
                          Icons.shopping_cart,
                          color: Colors.greenAccent,
                          size: 50.0,
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.only(top: 10.0),
                      ),
                      Text(
                        Flutkart.name,
                        style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 24.0),
                      )
                    ],
                  ),
                ),
              ),
              Expanded(
                flex: 1,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    CircularProgressIndicator(),
                    Padding(
                      padding: EdgeInsets.only(top: 20.0),
                    ),
                    Text(
                      Flutkart.store,
                      softWrap: true,
                      textAlign: TextAlign.center,
                      style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 18.0,
                          color: Colors.white),
                    )
                  ],
                ),
              )
            ],
          )
        ],
      ),
    );
  }
}

계속 진행하려면 https://www.youtube.com/watch?v=FNBuo-7zg2Q를 참조하십시오.

---

여러 가지 방법으로이 작업을 수행 할 수 있지만 가장 쉬운 방법은 다음과 같습니다.

실행 아이콘의 경우 flutter 라이브러리 Flutter Launcher 아이콘을 사용합니다.

Custom Splash Screen의 경우 다른 화면 해상도를 만든 다음 Android 해상도에 따라 mipmap 폴더에 스플래시 이미지를 추가합니다.

마지막 부분은 Android의 res 폴더에있는 드로어 블 폴더의 launch_background.xml을 조정하는 것입니다.

다음과 같이 코드를 변경하십시오.

<?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 android:drawable="@drawable/<splashfilename>" />     --> -->

    <!-- You can insert your own image assets here -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@mipmap/<Your splash image name here as per the mipmap folder>"/>
    </item>
</layer-list>

드로어 블로 스플래시를 추가 한 개발자는 거의 없었습니다. 시도했지만 Flutter 1.0.0 및 Dart SDK 2.0 이상에서는 빌드가 실패했습니다. 따라서 비트 맵 섹션에 스플래시를 추가하는 것을 선호합니다.

iOS 스플래시 화면 생성이 더 간단합니다.

iOS의 Runner 폴더에서 LaunchImage.png @ 2x, @ 3x, @ 4x와 동일한 이름의 사용자 지정 스플래시 화면 이미지로 LaunchImage.png 파일을 업데이트하면됩니다.

추가로 LaunchImage.imageset에도 4x 이미지가있는 것이 좋습니다. Content.json의 코드를 3x 배율 아래의 다음 줄로 업데이트하여 4x 배율 옵션을 추가하십시오.

{
      "idiom" : "universal",
      "filename" : "LaunchImage@4x.png",
      "scale" : "4x"
    }

---

Jaldhi Bhatt의 코드는 나를 위해 작동하지 않습니다.

Flutter는 ' Navigator를 포함하지 않는 컨텍스트로 요청 된 Navigator 작업 '을 throw합니다 .

이 기사 에서 언급했듯이 경로를 사용하여 Navigator 컨텍스트를 초기화하는 다른 구성 요소 내부에서 Navigator 소비자 구성 요소를 래핑하는 코드를 수정했습니다 .

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:my-app/view/main-view.dart';

class SplashView extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home: Builder(
          builder: (context) => new _SplashContent(),
        ),
        routes: <String, WidgetBuilder>{
          '/main': (BuildContext context) => new MainView()}
    );
  }
}

class _SplashContent extends StatefulWidget{

  @override
  _SplashContentState createState() => new _SplashContentState();
}

class _SplashContentState extends State<_SplashContent>
    with SingleTickerProviderStateMixin {

  var _iconAnimationController;
  var _iconAnimation;

  startTimeout() async {
    var duration = const Duration(seconds: 3);
    return new Timer(duration, handleTimeout);
  }

  void handleTimeout() {
    Navigator.pushReplacementNamed(context, "/main");
  }

  @override
  void initState() {
    super.initState();

    _iconAnimationController = new AnimationController(
        vsync: this, duration: new Duration(milliseconds: 2000));

    _iconAnimation = new CurvedAnimation(
        parent: _iconAnimationController, curve: Curves.easeIn);
    _iconAnimation.addListener(() => this.setState(() {}));

    _iconAnimationController.forward();

    startTimeout();
  }

  @override
  Widget build(BuildContext context) {
    return new Center(
        child: new Image(
          image: new AssetImage("images/logo.png"),
          width: _iconAnimation.value * 100,
          height: _iconAnimation.value * 100,
        )
    );
  }
}

---

보조 스플래시 화면 (기본 스플래시 화면 이후)을 원하는 경우 다음은 작동하는 간단한 예제입니다.

class SplashPage extends StatelessWidget {
  SplashPage(BuildContext context) {
    Future.delayed(const Duration(seconds: 3), () {
      // Navigate here to next screen
    });
  }

  @override
  Widget build(BuildContext context) {
    return Text('Splash screen here');
  }
}

---

Flutter는 기본적으로 스플래시 화면을 가질 수있는 기능을 제공하지만 작업을 수행 할 수있는 많은 플러그인이 있습니다. 작업에 플러그인을 사용하지 않으려는 경우 새 플러그인을 추가하면 앱 크기에 영향을 미칠 수 있습니다. 그러면 이렇게 할 수 있습니다.

Android 용

launch_background.xml을 열고 시작 화면 이미지 또는 원하는 그라디언트 색상을 넣을 수 있습니다. 이것은 사용자가 앱을 열 때 가장 먼저 보게되는 것입니다.

IOS 용

Xcode를 사용하여 앱을 열고 Runner> Assest.xcassets> LaunchImage를 클릭합니다. 여기에서 이미지를 추가 할 수 있습니다. 실행 화면 이미지가 찍거나 보이는 위치를 편집하려면 LaunchScreen.storyboard에서 편집 할 수 있습니다.

---

flutter에서 스플래시 화면을 추가하는 가장 쉬운 방법은 imho이 패키지입니다 : https://pub.dev/packages/flutter_native_splash

Installation guide (by the author of the package):

1. Setting the splash screen

Add your settings to your project's pubspec.yaml file or create a file in your root project folder named flutter_native_splash.yaml with your settings.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"

image must be a png file.

You can use # in color as well. color: "#42a5f5" You can also set android or ios to false if you don't want to create a splash screen for a specific platform.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android: false

In case your image should use all available screen (width and height) you can use fill property.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  fill: true

Note: fill property is not yet implemented for iOS splash screens.

If you want to disable full screen splash screen on Android you can use android_disable_fullscreen property.

flutter_native_splash:
  image: assets/images/splash.png
  color: "42a5f5"
  android_disable_fullscreen: true

2. Run the package

After adding your settings, run the package with

flutter pub pub run flutter_native_splash:create When the package finishes running your splash screen is ready.

---

Android
앱-> src-> main-> res-> drawble-> launch_background.xml의 경우 다음과 같이 주석 처리 된 블록의 주석 처리를 제거하십시오.

<item>
  <bitmap
      android:gravity="center"
      android:src="@mipmap/launch_image" /></item>

안드로이드 스튜디오에서 시스템과 동기화를 사용하거나 캐시를 무효화하고 재설정과 같은 코딩 후 오류가 발생 합니까? 이것은 내 문제를 해결했습니다. 플러터 디버그 모드에서 스플래시 화면에 약간의 시간이 걸립니다. 빌드 후 네이티브 안드로이드처럼 감소합니다

참고 URL : https://stackoverflow.com/questions/43879103/adding-a-splash-screen-to-flutter-apps