Flutterアプリにスプラッシュスクリーンを追加する


142

Flutterアプリにスプラッシュスクリーンを追加する方法を教えてください。他のコンテンツの前に読み込まれて表示されるはずです。現在、Scaffold(home:X)ウィジェットがロードされる前に、短い色の点滅があります。


カスタムタイマーを設定してスプラッシュスクリーンを追加する正しい方法であるかどうかわかりません。プロセッサーをアイドル状態にしたくないので、必要なファイルやディレクトリを確認したり、ログを同期したり、ファイルをバックアップしたりするなど、いくつかのハウスキーピングタスクを行いません。バックグラウンドで前面にブランドを表示します。結局のところ、3〜4秒はプロセッサにとって非常に長い時間です。
maheshmnj

1
このリンクは、それを行う方法を説明しますflutter.dev/docs/development/ui/splash-screen/...
ライブ-愛

回答:


250

Flutterでスプラッシュスクリーンを実行する実際の方法をさらに詳しく説明したいと思います。

ここでトレースを少し追跡したところ、Flutterのスプラッシュスクリーンの状態はそれほど悪くないように見えました。

多分ほとんどの開発者(私のような)は、Flutterにはデフォルトでスプラッシュ画面がないと考えており、それについて何かする必要があります。スプラッシュ画面がありますが、背景が白く、デフォルトではiOSとAndroidのスプラッシュ画面がすでにあることを誰も理解できません。

開発者が行う必要があるのは、ブランディングイメージを適切な場所に配置することだけで、スプラッシュスクリーンはそのように機能し始めます。

ここでは、段階的にそれを行う方法を示します。

最初にAndroidで(私のお気に入りのプラットフォームなので:))

  1. Flutterプロジェクトで「android」フォルダーを見つけます。

  2. アプリ-> 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を使用します(必要に応じて変更できます)。

  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の2番目:

  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で、追加したブランドイメージが表示された適切なスプラッシュスクリーンが必要です。

ありがとう


4
Cannot resolve symbol '@mipmap/ic_launcher'Android Studio 3.1.1でエラーが発生しましたが(キャッシュの再構築後も)、アプリはエラーなしでコンパイルおよび実行され、ランチャーグラフィックが表示されました。
IanB

1
同じ問題がありますが、実行時にクラッシュし、画像が見つからないことを通知するため、実行できません。しかし、何らかの理由でミップマップを解決できません。これがなぜなのか誰にも分かりますか?
carlosx2

こんにちは皆さん、なぜこの問題があるのか​​はわかりませんが、私にとってはプロジェクトの同期の問題のように見えます(リソースが存在する場合に、リソースを見つけられない理由は他にありません)。この問題は一度もなかったので解決方法はわかりませんが、プロジェクトの同期、クリーン、再構築など、IDEAで可能なことは何でも試してください。また、ドローアブルフォルダー内のリソースを使用して、ミップマップアノテーションをドローアブルアノテーションに置き換えてください。私は今推測しています:)
Stoycho Andreev

1
なぜ4x画像を追加するのかについて知りたいです。XCodeは3倍しか期待していないようですが、4倍を追加する理由はありますか?
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秒にしました。完了したら、ナビゲーターをアプリケーションのホーム画面にプッシュします。

注:アプリケーションはスプラッシュ画面を1回だけ表示する必要があります。ユーザーは戻るボタンを押したときに再びスプラッシュ画面に戻ることはできません。これには、Navigator.pushReplacement()を使用します。新しい画面に移動し、ナビゲーション履歴スタックから前の画面を削除します。

詳細については、Flutter:独自のスプラッシュスクリーンを設計するをご覧ください。


7
このカスタム画面が表示される前に、デフォルトの白いスプラッシュ画面が1秒以上表示されます。それを排除するために、生成されたxcodeおよびandroidプロジェクトでオーバーライドする必要があります。
d3vtoolsmith

はい。iOSとAndroidのデフォルトのspalsh画面が常に表示されます。このフラッタースプラッシュ画面はそれに追加されます。
Mahesh Peri

問題は、この例が信頼できないことです。ネットワーク接続などの理由により、アプリが3秒以上ロードされた場合はどうなりますか?
emanuel sanga

追加のカスタマイズについては、この回答をさらにサポートします。スプラッシュ画面を表示しながら、最初にHTTPリクエストを実行したい。このアプローチははるかに簡単でした
Idris Stack

16

これの良い例はまだありませんが、各プラットフォームのネイティブツールを使用して自分で行うことができます。

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

Android: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

しかし、スプラッシュ中にローカルデータベースを作成/インポートして、スプラッシュのみを終了する場合など、さらに必要です
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" />

これは私にとってはうまく
いき


私はそれを理解しました...どうやらiOSのイメージは悪かったです。iOSとAndroidはどちらも完璧に動作します。誤警報
IrishGringo

@SmrutiRanjanRanaこの画像の理想的なサイズは?
マティアス

1
画像の場所の例がある場合、この回答ははるかに役立ちます。それ以外の場合、ユーザーはパスを追加する方法を推測する必要があります。
Robin Manoli

12

flutterでスプラッシュスクリーンを追加する最も簡単な方法は、次のパッケージです: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

画像で利用可能なすべての画面(幅と高さ)を使用する必要がある場合は、fillプロパティを使用できます。

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

注:iOSスプラッシュ画面では、fillプロパティはまだ実装されていません。

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リンクを投稿できますか?
ビニアム2018年

8

画像のようなエラーを得ている者は、あなたが追加されていることを確認して検証答えメイクを適用した後には見られない@ミップマップ/ ic_launcherの代わりに、@ミップマップ/ ic_launcher.png


エラーにカーソルを
合わせると

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

これを行うにはいくつかの方法がありますが、私が使用する最も簡単な方法は次のとおりです。

起動アイコンには、フラッターライブラリFlutter Launcher Iconを使用します

カスタムスプラッシュスクリーンの場合さまざまな画面解像度を作成し、Androidの解像度に従ってミップマップフォルダーにスプラッシュ画像を追加します。

最後の部分は、Androidのresフォルダーのdrawableフォルダーにある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ファイルを、LaunchImage.png @ 2x、@ 3x、@ 4xと同じ名前のカスタムスプラッシュスクリーンイメージで更新します。

さらに、LaunchImage.imagesetに4倍の画像があることも良いと思います。Content.jsonのコードを3xスケール以下の行で更新して、4xスケールオプションを追加するだけです。

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

4

あなたの素材アプリをこのようにします

=>依存関係を追加

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

このような最終的な画面出力は、要件に応じて2番目に変更でき、円は円形になります。

ここに画像の説明を入力してください


依存関係を追加する=> dynamic_theme:^ 1.0.1
Champ 96k

SplashScreenのインポートはありません
Tuss

はい、その通りです。その方法はいくつかありますが、答えとして、このパッケージ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:Project Navigatorから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では、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はすでに最良の回答を提供しています。それはバグではなく、問題でもありません。configだけです。時間をかけて読むだけで、すべてが解決されます。みなさん、良い一日を。

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


同じ回答が4月9日に既に出されているため、これはもう関連性がないようです。
Keimeno

しかし、私のフォントは、最高のフォントに至るまでずっとまっすぐです。
ファブリシオフスト


-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.