2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Flutterでスプラッシュ画面を作る

Last updated at Posted at 2022-02-06

Flutterでスプラッシュ画面を作成しようと思い調べたところ下記の記事が見つかった。

flutter_native_splashをインストール

最新のバージョンをインストールしたいと思い下記のように記載しPub getを行ったところエラーが発生した。
開発環境のDartのバージョンは2.14.3だが、このパッケージで必要なバージョンは2.15.1であるためのインストールできないらしい。

pubspec.yaml
dependencies:
 flutter_native_splash: ^2.0.1+1
The current Dart SDK version is 2.14.3.

Because [プロジェクト名] depends on flutter_native_splash >=1.3.3 which requires SDK version >=2.15.1 <3.0.0, version solving failed.
pub get failed (1; Because tra_english_mobile depends on flutter_native_splash >=1.3.3 which requires SDK version >=2.15.1 <3.0.0, version solving failed.)

利用するパッケージのバージョンを下げたところ無事にインストールが完了した。

pubspec.yaml
dependencies:
  flutter_native_splash: ^1.1.5+1

スプラッシュ画面の作成

スプラッシュ画面に表示したい画像と背景の色を設定する。

pubspec.yaml
flutter_native_splash:
  image: "images/ToraChan.png"
  color: "FFFFFF"

下記のコマンドを実行してスプラッシュ画面を生成する。

flutter pub pub run flutter_native_splash:create
[Android] Creating splash images
[Android] Updating launch background(s) with splash image path...
[Android]    - android/app/src/main/res/drawable/launch_background.xml
[Android]    - android/app/src/main/res/drawable-v21/launch_background.xml
[Android] Updating styles...
[Android]    - android/app/src/main/res/values/styles.xml
[iOS] Creating splash images
[iOS] Updating LaunchScreen.storyboard with width, and height
[iOS] Updating ios/Runner/Info.plist for status bar hidden/visible
Web folder not found, skipping web splash update...

Native splash complete. �
Now go finish building something awesome! � You rock! ��


無事にスプラッシュ画面を作ることができた。

163ov-od7uz.gif

コードを書かなくてもスプラッシュ画面が作れるのは便利ですね。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?