Flutter 앱에 스플래시 화면 추가


143

Flutter 앱에 스플래시 화면을 추가하는 방법은 무엇입니까? 다른 내용보다 먼저로드하여 표시해야합니다. 현재 Scaffold (home : X) 위젯이로드되기 전에 짧은 색상의 플래시가 있습니다.


사용자 정의 타이머를 설정하여 스플래시 화면을 추가하는 올바른 방법인지 모르겠습니다. 필요한 파일이나 디렉토리를 확인하거나 일부 로그를 동기화하거나 3 ~ 4 초가 지나면 프로세서에 많은 시간이 소요됩니다.
maheshmnj

1
이 링크는 그것을 수행하는 방법을 설명합니다 : flutter.dev/docs/development/ui/splash-screen/…
live-love

답변:


250

Flutter에서 스플래시 화면을 실제로 수행하는 방법에 대해 더 많은 정보를 얻고 싶습니다.

나는 여기에서 약간의 흔적을 따랐고 Flutter의 Splash Screen에 대해 상황이 그렇게 나쁘지 않은 것을 보았습니다.

어쩌면 대부분의 개발자 (예 : 나와 같은)는 Flutter에 기본적으로 스플래시 화면이 없으며 그것에 대해 무언가를해야한다고 생각합니다. 스플래시 화면이 있지만 흰색 배경으로 기본적으로 이미 iOS 및 Android 용 스플래시 화면이 있다는 것을 아무도 알 수 없습니다.

개발자가해야 할 유일한 일은 브랜딩 이미지를 올바른 위치에 놓는 것입니다. 그러면 스플래시 화면이 그대로 작동하기 시작합니다.

단계별로 수행하는 방법은 다음과 같습니다.

안드로이드에서 첫 번째 (내가 가장 좋아하는 플랫폼이기 때문에) :)

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

  2. 앱-> src-> main-> res 폴더로 이동하여 브랜딩 이미지의 모든 변형을 해당 폴더에 배치하십시오. 예를 들면 다음과 같습니다.

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

기본적으로 안드로이드 폴더에는 drawable-mdpi, drawable-hdpi 등이 없지만 원하는 경우 만들 수 있습니다. 이 때문에 이미지는 밉맵 폴더에 배치해야합니다. 또한 스플래시 화면 (Android)에 대한 기본 XML 코드는 @drawable 리소스 대신 @mipmap을 사용합니다 (원하는 경우 변경할 수 있음).

  1. Android의 마지막 단계는 drawable / launch_background.xml 파일에서 일부 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>
    

흰색 배경의 XML 코드를 주석 처리하고 밉맵 이미지에 대한 코드의 주석 처리를 제거하십시오. 누군가 관심이 있다면 launch_background.xml 파일이 styles.xml 파일에 사용됩니다.

iOS에서 두 번째 :

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

  2. 러너-> 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"
  }
}

다음에 앱을 실행할 때 필요한 모든 것이 안드로이드 또는 iOS에서 추가 한 브랜딩 이미지가 포함 된 올바른 스플래시 화면이 있어야합니다.

감사


4
Cannot resolve symbol '@mipmap/ic_launcher'Android Studio 3.1.1에서 오류가 발생 했지만 (캐시를 다시 빌드 한 후에도) 앱이 오류없이 컴파일되어 실행되었으며 실행기 그래픽이 표시되었습니다.
IanB

1
그러나 동일한 문제가 있지만 런타임에 충돌이 발생하여 이미지를 찾을 수 없다는 것을 알 수 없습니다. 그러나 어떤 이유로 밉맵을 해결할 수 없습니다. 이것이 왜 그런지 아는 사람이 있습니까?
carlosx2

안녕하세요,이 문제가있는 이유는 확실하지 않지만 프로젝트 동기화 문제처럼 보입니다 (리소스가있는 경우 리소스를 찾을 수있는 다른 이유는 없습니다). 나는이 문제가 없었기 때문에 그것을 해결하는 방법을 모르겠지만, 프로젝트 동기화, 정리, 재건 등 IDEA에서 가능한 모든 것을 시도하십시오. 또한 드로어 블 폴더에서 리소스를 사용하고 밉맵 주석을 드로어 블 주석으로 바꿉니다. 나는 단지 지금 추측하고있다 :)
Stoycho Andreev

1
왜 4x 이미지를 추가하는지 궁금합니다. XCode는 3x만을 기대하는 것 같습니다. 4x를 추가하는 이유가 있습니까?
sbilstein

3
공식적인 문서 에이 내용이 포함되어 있습니다.
rmalviya


21

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 : 자신 만의 스플래시 화면 디자인을 방문하십시오 .


7
이 사용자 정의 화면이 표시되기 전에 기본 흰색 스플래시 화면이 1+ 초 동안 계속 표시됩니다. 생성 된 xcode 및 android 프로젝트에서 재정 의하여 제거하십시오.
d3vtoolsmith

예. iOS 및 Android의 기본 spalsh 화면이 항상 표시되며이 flutter 스플래시 화면이 추가됩니다.
Mahesh Peri

이 예제는 신뢰할 수 없습니다 .... 네트워크 연결과 같은 이유로 앱이 3 초 이상로드되면 어떻게 되나요?
emanuel sanga

추가 사용자 정의를 위해이 답변을 더 많이 지원합니다. 스플래시 화면을 표시하면서 먼저 HTTP 요청을 수행하고 싶습니다. 이 접근 방식은 훨씬 쉬워졌습니다
Idris Stack

16

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

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를 참조하십시오 .


스플래시 화면을 실제로 추가하는 방법에 대한 예가 있습니까? 새 템플릿을 시작할 때 시작 화면이 표시되지 않습니다
Ride Sun

@RideSun 제 답변을 참조하십시오
Stoycho Andreev

1
스플래시 화면을 더 오래 지속하려면 어떻게해야합니까? 활동에서 일부 코드를 변경해야합니까?
zero.zero.seven

하지만 다음 만 시작 끝을 지역의 DB를 가져 오기 / 생성 더 예 할 때 시작하는 동안 필요
stuckedoverflow

14

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" />

이것은 나를 위해 일한 ...하지만 아이폰 OS 부분은 ... 너무 잘 재생되지
IrishGringo


나는 그것을 알아 냈습니다 ... 분명히 iOS 이미지가 잘못되었습니다. iOS와 안드로이드는 모두 완벽하게 작동합니다. 잘못된 경보
IrishGringo

@SmrutiRanjanRana이 이미지의 이상적인 크기는 무엇입니까?
Mattias

1
이 답변은 이미지 위치의 예가 있으면 훨씬 유용합니다. 그렇지 않으면 사용자는 경로를 추가하는 방법을 추측해야합니다.
Robin Manoli

12

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

여기에 이미지 설명을 입력하십시오

설치 안내서 (패키지 작성자) :

1. 스플래시 화면 설정

프로젝트의 pubspec.yaml 파일에 설정을 추가하거나 루트 프로젝트 폴더에 flutter_native_splash.yaml이라는 파일을 설정으로 만듭니다.

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

이미지는 png 파일이어야합니다.

#을 컬러로도 사용할 수 있습니다. color : "# 42a5f5"특정 플랫폼의 스플래시 화면을 만들지 않으려는 경우 android 또는 ios를 false로 설정할 수도 있습니다.

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

이미지에서 사용 가능한 모든 화면 (너비 및 높이)을 사용해야하는 경우 채우기 속성을 사용할 수 있습니다.

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

참고 : fill 속성은 아직 iOS 스플래시 화면에 구현되지 않았습니다.

Android에서 전체 화면 스플래시 화면을 사용하지 않으려면 android_disable_fullscreen 속성을 사용할 수 있습니다.

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

2. 패키지를 실행

설정을 추가 한 후 다음을 사용하여 패키지를 실행하십시오.

flutter pub pub run flutter_native_splash:create 패키지 실행이 완료되면 스플래시 화면이 준비됩니다.


8

아래 코드를 시도하고 나를 위해 일했습니다.

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,
      )),
    ),
  );
}
}

완전한 코드 (변수를 정의하지 않고도 독립적으로 실행할 수있는 코드) 또는 github 링크를 게시 할 수 있습니까?
biniam

8

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


오류에 커서를 갖다 대면 IDE에서이를 알려줍니다
Ojonugwa Jude Ochalifu

7

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


1
SO에서 다른 페이지로 링크 할 때 링크가 끊어지지 않도록 컨텐츠의 응답 부분을 여기에 게시하십시오.
rak007

4

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

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를 참조하십시오.


4

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

Launch Icons의 경우 flutter 라이브러리를 사용합니다. Flutter Launcher Icon

사용자 정의 스플래시 화면의 경우 다른 화면 해상도를 만든 다음 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 이미지가있는 것이 좋습니다. 4x 스케일 옵션을 추가하려면 3x 스케일 아래의 다음 행으로 Content.json에서 코드를 업데이트하십시오.

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

4

당신의 머티리얼 앱을 이렇게 만드십시오

=> 의존성 추가

=> 가져 오기 가져 오기 'package : splashscreen / splashscreen.dart';

import 'package:flutter/material.dart';
import 'package:splashscreen/splashscreen.dart';
import 'package:tic_tac_toe/HomePage.dart';
void main(){
  runApp(
    MaterialApp(
      darkTheme: ThemeData.dark(),
      debugShowCheckedModeBanner: false,
      home: new MyApp(),
    )
  );
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => new _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
      seconds: 6,
      navigateAfterSeconds: new HomePage(),
      title: new Text('Welcome',
      style: new TextStyle(
        fontWeight: FontWeight.bold,
        fontSize: 26.0,
        color: Colors.purple,
       ),
      ),
      image: Image.asset("images/pic9.png"),
      backgroundColor: Colors.white,
      photoSize: 150.0,
    );
  }
}

이와 같은 최종 화면 출력은 요구 사항에 따라 두 번째로 변경할 수 있습니다. 원은 원형입니다.

여기에 이미지 설명을 입력하십시오


종속성 추가 => dynamic_theme : ^ 1.0.1
챔피언 96k

SplashScreen
Tuss April

예, 그렇습니다. 여러 가지 방법이 있습니다.하지만 정답은이 패키지 pub.dev/packages/dynamic_theme
Champ 96k

4

Flutter에서 동적 스플래시 화면을 추가하는 가장 좋은 방법은 오류가 없습니다.

MAIN.DART

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

void main() => runApp(MaterialApp(
      title: 'GridView Demo',
      home: SplashScreen(),
      theme: ThemeData(
        primarySwatch: Colors.red,
        accentColor: Color(0xFF761322),
      ),
      routes: <String, WidgetBuilder>{
        SPLASH_SCREEN: (BuildContext context) => SplashScreen(),
        HOME_SCREEN: (BuildContext context) => BasicTable(),
        //GRID_ITEM_DETAILS_SCREEN: (BuildContext context) => GridItemDetails(),
      },
    ));


SPLASHSCREEN.DART

import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:app_example/constants.dart';


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

class SplashScreenState extends State<SplashScreen>
    with SingleTickerProviderStateMixin {
  var _visible = true;

  AnimationController animationController;
  Animation<double> animation;

  startTime() async {
    var _duration = new Duration(seconds: 3);
    return new Timer(_duration, navigationPage);
  }

  void navigationPage() {
    Navigator.of(context).pushReplacementNamed(HOME_SCREEN);
  }

@override
dispose() {
  animationController.dispose();  
  super.dispose();
}

  @override
  void initState() {
    super.initState();
    animationController = new AnimationController(
      vsync: this,
      duration: new Duration(seconds: 2),
    );
    animation =
        new CurvedAnimation(parent: animationController, curve: Curves.easeOut);

    animation.addListener(() => this.setState(() {}));
    animationController.forward();

    setState(() {
      _visible = !_visible;
    });
    startTime();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: <Widget>[
          new Column(
            mainAxisAlignment: MainAxisAlignment.end,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(bottom: 30.0),
                child: new Image.asset(
                  'assets/images/powered_by.png',
                  height: 25.0,
                  fit: BoxFit.scaleDown,
                ),
              )
            ],
          ),
          new Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              new Image.asset(
                'assets/images/logo.png',
                width: animation.value * 250,
                height: animation.value * 250,
              ),
            ],
          ),
        ],
      ),
    );
  }
}


CONSTANTS.DART

String SPLASH_SCREEN='SPLASH_SCREEN';
String HOME_SCREEN='HOME_SCREEN';

HOMESCREEN.DART

import 'package:flutter/material.dart';

class BasicTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Table Widget")),
      body: Center(child: Text("Table Widget")),
    );
  }
}

3

Jaldhi Bhatt의 코드는 저에게 효과적이지 않습니다.

Flutter는 ' 네비게이터가 포함되지 않은 컨텍스트로 요청 된 네비게이터 작업 '을 발생시킵니다.

기사 에서 언급 한 것처럼 경로를 사용하여 네비게이터 컨텍스트를 초기화하는 다른 구성 요소 안에 네비게이터 소비자 구성 요소를 래핑하는 코드를 수정했습니다 .

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,
        )
    );
  }
}

2
설명도 추가 할 수 있습니까? 단순한 코드 블록만으로는
그다지 유익

3

기본 스플래시 화면 다음에 보조 스플래시 화면을 원할 경우 작동하는 간단한 예는 다음과 같습니다.

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');
  }
}

3

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

안드로이드

launch_background.xml을 연 다음 스플래시 화면 이미지 또는 원하는 그라디언트 색상을 넣을 수 있습니다. 사용자가 앱을 열 때 가장 먼저 보게됩니다. 여기에 이미지 설명을 입력하십시오

iOS 용

Xcode를 사용하여 앱을 열고 Runner> Assest.xcassets> LaunchImage를 클릭하십시오. 여기에서 이미지를 추가 할 수 있습니다. 시작 화면 이미지의 위치 또는 편집 위치를 편집하려면 LaunchScreen.storyboard에서 편집 할 수 있습니다.

여기에 이미지 설명을 입력하십시오


3

다음은 Flutter 앱용 IOS 및 Android 플랫폼에서 스플래시 화면을 구성하는 단계입니다.

iOS 플랫폼

Apple App Store에 제출 된 모든 앱은 Xcode 스토리 보드를 사용하여 앱의 시작 화면을 제공해야합니다. 이것을 3 단계로하자 :-

1 단계 : 앱 디렉토리의 루트에서 ios / Runner.xcworkspace를 엽니 다.

2 단계 : 프로젝트 탐색기에서 Runner / Assets.xcassets를 선택하고 모든 크기 (2x, 3x 등)의 시작 이미지를 드래그합니다. https://appicon.co/#image-sets 에서 다른 크기의 이미지를 생성 할 수도 있습니다.

여기에 이미지 설명을 입력하십시오

3 단계 : LaunchScreen.storyboard 파일에 제공된 이미지가 표시되는 것을 볼 수 있습니다. 여기서 이미지를 드래그하여 이미지의 위치를 ​​변경할 수도 있습니다. 자세한 내용은 공식 설명서 https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/launch-screen/ 를 참조 하십시오.

여기에 이미지 설명을 입력하십시오

안드로이드 플랫폼

Android에서는 Android 앱이 초기화되는 동안 시작 화면이 표시됩니다. 이 시작 화면을 3 단계로 설정해 보겠습니다.

1 단계 : android / app / src / main / res / drawable / launch_background.xml 파일을 엽니 다.

2 단계 : 4 번 줄에서 원하는 색상을 선택할 수 있습니다.

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

3 단계 : 10 번 줄에서 이미지를 변경할 수 있습니다.

android:src="@mipmap/launch_image"

여기에 이미지 설명을 입력하십시오

그게 다야, 끝났어! 행복한 코딩 :)


0

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

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

이처럼 코딩 한 후 오류가 발생
합니까? 안드로이드 스튜디오에서 시스템과 동기화 사용 또는 캐시 및 재설정을 무효화하십시오. 이 문제를 해결했습니다. 플러터 디버그 모드에서 스플래시 화면에 약간의 시간이 걸립니다. 빌드 후 네이티브 안드로이드처럼 줄어 듭니다.


0

Flutter.dev는 이미 최선의 답변을 제공합니다. 버그도 아니고 문제도 아닙니다. 시간을 내면 모든 것이 해결됩니다. 좋은 하루 되세요.

https://flutter.dev/docs/development/ui/advanced/splash-screen


4 월 9 일에 동일한 답변이 이미 제공되었으므로 더 이상 관련이없는 것 같습니다.
Keimeno

그러나 내 글꼴은 최고의 글꼴을 가리 키기보다 더 직설적입니다.
Fabrício Justo

0

두 가지 방법으로 만들 수 있습니다

  1. 기본 패키지 및 초기 페이지로 이동하십시오. 네이티브 안드로이드 패키지에서와 같이 드로어 블을 만듭니다.
  2. 일정 시간 동안 표시 할 다트 화면 만들기

여기에서 흰색 화면 제거스플래시 화면 표시에 대한 완전한 설명을 찾았 습니다.


-1
SplashScreen(
          seconds: 3,
          navigateAfterSeconds: new MyApp(),
          // title: new Text(
          //   'Welcome In SplashScreen',
          //   style: new TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
          // ),
          image: new Image.network('https://upload.wikimedia.org/wikipedia/commons/thumb/b/bd/Tesla_Motors.svg/1200px-Tesla_Motors.svg.png'),
          backgroundColor: Colors.white,
          styleTextUnderTheLoader: new TextStyle(),
          photoSize: 150.0,
          loaderColor: Colors.black),
    ),
  );
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.