flutter_native_splashを使ってsplashページを実装する

image

Version

  • Flutter 2.5.2
  • Dart 2.14.3
  • flutter_native_splash: ^1.3.1

splashページとは

splashページとは、アプリの起動処理等を行なっている時に、表示される画面のことを言います。

LINEやTwitter、Instagram等を例に挙げると、アプリの最初の画面が起動する前にアプリアイコンが画面中央に表示されるあの画面のことを言います。

native_splashの例

パッケージのインストール

まずはアプリにflutter_native_splashのパッケージをインストールをします。パッケージのインストール先はpubspec.yamlファイルです。 flutter_native_splashのパッケージはこちらになります。

pubspec.yamlファイルのdev_dependenciesに以下のように記述します。

pubspec.yamlファイルは非常にデリケートなので記述する箇所のindent等には注意が必要です。

pubspec.yaml

dev_dependencies:
  flutter_test:
    sdk: flutter

  flutter_native_splash: ^1.3.1

dev_dependenciesの箇所に上記のように記述したら、画面上のpub getボタン、もしくはターミナルでflutter pub getを入力して実行します。

メッセージやターミナルでエラーが吐かれなければ、アプリにflutter_native_splashのインストールが完了したことになります。

splashページの準備

続いてsplashページを表示するにあたっての準備について説明していきます。

まず、splashページで表示したい画像やアイコン等を用意します。次に、splashページを導入したいプロジェクトの直下にassetes/images(名前はご自身が分かりやすいもので○)という風にフォルダーを用意します。

そして、そのimagesフォルダーの中に先ほど用意した画像.pngをドラッグ&ドロップで追加します。

フォルダー階層の例

今回の例では、splash_pageというプロジェクトの直下に配置しています。

※画像形式は.pngじゃないと上手くいかないようです(2021/11/08 現在)。

splashページのカスタマイズ

splashページの表示とカスタマイズについて説明していきます。 splashページを表示するためには、まずpubspec.yamlファイルにどの画像やアイコンをsplashページに表示したいのか等を指定する必要があります。

そのため、pubspec.yamlファイルには以下のように記述します。

pubspec.yaml

flutter_native_splash:
  image: 'assets/images/splash.png' //先ほど用意したフォルダー内の画像ファイルを指定
  color: "#00bfff"  //splashページの背景色を指定(カラーコードで指定)

color:のところでsplashページの背景色を選択します。注意として、背景色はカラーコードで選択する必要があります。

画像ファイルの指定や背景色等が記述できたら、最後にターミナルで以下のコードを実行します。

このコードを実行することでsplashページが作成されます。そのため、カラーコード等を変更した際には、再度以下のコードを実行する必要があります。

flutter pub pub run flutter_native_splash:create

これでアプリをリスタートすることによって、splashページが実装されたと思います。

最後に

いかがでしたでしょうか。意外と簡単にsplashページの実装をすることができたのではないかと思います。

splashページを実装することによって、今まで作ってきたアプリを更に本格的なものにすることができます。

今回はflutter_native_splashというパッケージについて紹介しましたが、Flutterではたくさんの面白いパッケージが存在するので、皆さんも色々と試しに触れてみると新たな発見があるかもしれません。

参考

https://yaba-blog.com/flutter-splash-screen/

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More

タグ

Flutter (70)初心者向け (22)イベント (15)Nextjs (8)Google Apps Script (7)可茂IT塾 (6)Firebase (6)React (5)新卒 (3)就活 (3)給与支払報告書 (3)riverpod (3)Dart (3)JavaScript (3)TypeScript (3)インターン (3)FlutterWeb (2)画像 (2)アプリ開発 (2)React Hooks (2)tailwindcss (2)ワーケーション (2)社会人 (2)大学生 (2)お知らせ (2)webfeed (1)RSS (1)CodeRunner (1)VSCode (1)個人開発 (1)設計 (1)フルリモート (1)学生向け (1)Java (1)Spring Boot (1)エンジニア (1)DeviceOrientation (1)正規表現 (1)神楽 (1)趣味紹介 (1)プログラミングだけではない可茂IT塾のメンバー (1)線型計画法 (1)事例 (1)PreferredSize (1)マテリアルデザイン (1)Material (1)クパチーノデザイン (1)Cupertino (1)ListView (1)就活浪人 (1)既卒 (1)保守性 (1)シェアハウス (1)スクレイピング (1)Gmail (1)Googleグループ (1)GoogleWorkspace (1)ShaderMask (1)google map (1)Google Places API (1)Vercel (1)Google Domains (1)branch (1)Git (1)オンラインオフィス (1)Freezed (1)アイコン (1)Apple Store Connect (1)FlutterGen (1)検索機能 (1)Navigator (1)メール送信 (1)カスタム認証 (1)アニメーション (1)FloatingActionButton (1)Arduino (1)ESP32 (1)経験談 (1)フリーランス (1)Dialog (1)Figma (1)デザイン (1)Slack (1)BI (1)非同期処理 (1)BackdropFilter (1)iOS (1)レビュー (1)getAuth (1)匿名 (1)Algolia (1)chakra-ui (1)コンサルティング (1)Symbol (1)reactive_forms (1)

お知らせ

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日開催のアプリ開発講座の参加者募集中!!

3月19日にアプリ開発講座を開催します!会場は岐阜県美濃加茂市のコワーキングスペース「こやぁね」です。興味のある方は是非ご参加ください!

Read More
可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!

可茂IT塾ではFlutterインターンを募集しています!可茂IT塾のエンジニアの判断で、一定以上のスキルをを習得した方には有給でのインターンも受け入れています。

Read More