Flutterアプリにスプラッシュスクリーンを追加する方法を教えてください。他のコンテンツの前に読み込まれて表示されるはずです。現在、Scaffold(home:X)ウィジェットがロードされる前に、短い色の点滅があります。
Flutterアプリにスプラッシュスクリーンを追加する方法を教えてください。他のコンテンツの前に読み込まれて表示されるはずです。現在、Scaffold(home:X)ウィジェットがロードされる前に、短い色の点滅があります。
回答:
Flutterでスプラッシュスクリーンを実行する実際の方法をさらに詳しく説明したいと思います。
ここでトレースを少し追跡したところ、Flutterのスプラッシュスクリーンの状態はそれほど悪くないように見えました。
多分ほとんどの開発者(私のような)は、Flutterにはデフォルトでスプラッシュ画面がないと考えており、それについて何かする必要があります。スプラッシュ画面がありますが、背景が白く、デフォルトではiOSとAndroidのスプラッシュ画面がすでにあることを誰も理解できません。
開発者が行う必要があるのは、ブランディングイメージを適切な場所に配置することだけで、スプラッシュスクリーンはそのように機能し始めます。
ここでは、段階的にそれを行う方法を示します。
最初にAndroidで(私のお気に入りのプラットフォームなので:))
Flutterプロジェクトで「android」フォルダーを見つけます。
アプリ-> src-> main-> resフォルダーに移動し、ブランディングイメージのすべてのバリアントを対応するフォルダーに配置します。例えば:
デフォルトでは、androidフォルダーにはdrawable-mdpi、drawable-hdpiなどはありませんが、必要に応じて作成できます。そのため、画像はミップマップフォルダーに配置する必要があります。また、Androidのスプラッシュ画面に関するデフォルトのXMLコードでは、@ drawableリソースの代わりに@mipmapを使用します(必要に応じて変更できます)。
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番目:
Flutterプロジェクトで「ios」フォルダを見つけます。
Runner-> Assets.xcassets-> LaunchImage.imagesetに移動します。LaunchImage.png、LaunchImage @ 2x.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で、追加したブランドイメージが表示された適切なスプラッシュスクリーンが必要です。
ありがとう
Cannot resolve symbol '@mipmap/ic_launcher'
Android Studio 3.1.1でエラーが発生しましたが(キャッシュの再構築後も)、アプリはエラーなしでコンパイルおよび実行され、ランチャーグラフィックが表示されました。
あなたがいる場合flutter create
、プロジェクトをD、あなたは、手順に従うことができるhttps://flutter.io/assets-and-images/#updating-the-launch-screenを。
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:独自のスプラッシュスクリーンを設計するをご覧ください。
これの良い例はまだありませんが、各プラットフォームのネイティブツールを使用して自分で行うことができます。
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を参照してください。
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でスプラッシュスクリーンを追加する最も簡単な方法は、次のパッケージです:https ://pub.dev/packages/flutter_native_splash
設定をプロジェクトの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
設定を追加した後、パッケージを実行します
flutter pub pub run flutter_native_splash:create
パッケージの実行が完了すると、スプラッシュスクリーンの準備が整います。
以下のコードを試してみてください、私のために働きました
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,
)),
),
);
}
}
画像のようなエラーを得ている者は、あなたが追加されていることを確認して検証答えメイクを適用した後には見られない@ミップマップ/ ic_launcherの代わりに、@ミップマップ/ ic_launcher.png
@Collin Jacksonと@Sniperはどちらも正しい。次の手順に従って、AndroidとiOSでそれぞれ起動画像を設定できます。次に、MyApp()のinitState()で、Future.delayedを使用してタイマーを設定するか、任意のAPIを呼び出します。Futureから応答が返されるまで、起動アイコンが表示され、応答が来たら、スプラッシュ画面の後に移動したい画面に移動できます。あなたはこのリンクを見ることができます:Flutter Splash Screen
以下のようなページを追加してルーティングすると役立つ場合があります
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 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"
}
あなたの素材アプリをこのようにします
=>依存関係を追加
=> 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番目に変更でき、円は円形になります。
これはエラーがなく、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")),
);
}
}
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,
)
);
}
}
(ネイティブのスプラッシュスクリーンの後に)セカンダリスプラッシュスクリーンが必要な場合は、次の簡単な例で機能します。
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はデフォルトでスプラッシュ画面を表示する機能を提供しますが、この機能を実行できるプラグインはたくさんあります。タスクにプラグインを使用したくない場合、新しいプラグインを追加するとアプリのサイズに影響する可能性があると心配します。その後、このようにできます。
アンドロイド用
launch_background.xmlを開いて、スプラッシュスクリーンの画像、または必要なグラデーションカラーを配置できます。これは、ユーザーがアプリを開いたときに最初に表示されるものです。
IOSの場合
Xcodeを使用してアプリを開き、Runner> Assest.xcassets> LaunchImageをクリックします。ここに画像を追加できます。起動画面の画像がどのような位置になるかを編集したい場合は、LaunchScreen.storyboardで編集できます。
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"
以上で完了です。ハッピーコーディング:)
Android
アプリの場合 -> src-> main-> res-> drawble-> launch_background.xmlで、このようにコメントブロックのコメントを外します
<item>
<bitmap
android:gravity="center"
android:src="@mipmap/launch_image" /></item>
このようにコーディングした後にエラーが発生しました
か?アンドロイドスタジオのシステムと同期を使用するか、キャッシュを無効にしてリセットしてください。これで問題が解決しましたフラッターデバッグモードでスプラッシュ画面に時間がかかります。ビルド後、ネイティブのアンドロイドのように減少します
Flutter.devはすでに最良の回答を提供しています。それはバグではなく、問題でもありません。configだけです。時間をかけて読むだけで、すべてが解決されます。みなさん、良い一日を。
https://flutter.dev/docs/development/ui/advanced/splash-screen
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),
),
);