Flutterでスプラッシュ画面(Splash Screen)を実装する

アプリケーションの作成に関しては、美学、フォントの選択、およびアプリの全体的なルックアンドフィールによって、ユーザーがアプリを高品質と見なすかどうかが決まります。

アニメーションを開くと、アプリのシーンを設定することで、素晴らしい第一印象を与えることもできます。現在の多くのアプリで人気があり、短くて鋭いオープニングアニメーションは、時には気付かないうちにユーザーを引き込むことができます。

アプリの動的な開始スプラッシュ画面を導入するためにFlutterでアニメーションを作成するための公式プロセスはすでにありますが、公式プロセスには考慮すべきいくつかの欠点があります。

  • iOS用に作成する場合は、アプリケーションの開口部をアニメーション化するためにiOSストーリーボードを作成する必要があります
  • Android用に作成する場合は、Android用のプラットフォーム固有のコードを作成する必要があります
  • Web開発はまだサポートされていません

幸いなことに、Flutterには強力なアニメーションオプションのセットがあるため、複数のプラットフォームで再利用でき、Webでサポートされているコードを使用して、かなり魅力的なオープニングアニメーションを作成できます。

これを実証するために、「Chowtime」と呼ばれる食品注文アプリの動的なオープニング画面を作成します。ユーザーがアプリを開くと、最初に表示されるのはネイティブのFlutterオープナーです。これは次のようになります。

フルーツボウルアニメーション付きのChowtimeロゴのオープニングアニメーションとフードオプション付きのランディングページを示す最終的なChowtimeアプリインターフェイスGIF

また、ブラウザでデモを見ることができます。それでは、始めましょう!

オープナーの計画

オープナーを設計するときは、次の側面について考慮する必要があります。

  1. 起動時にすぐに表示できるアプリのアイコンと一致する大きな要素を追加する
  2. アプリ名を含む、大きな要素をオープニング画面の残りの部分に結び付ける方法
  3. アプリのホーム画面に移動する前に簡単なアニメーションを表示する
  4. 前の各要素の間にアニメーションを追加して、高品質の感触を作成します

これらの要素を作成する方法を見てみましょう。

Flutterでオープニングスプラッシュ画面を作成する

アプリを開いた直後に表示される画像を作成するには、GIMPなどのグラフィックエディターツールを使用して、オープナー用の512×512の画像を作成します。この例では、背景が緑色の文字「C」を使用します。

 

紹介状C画像

アプリで同様の概念を追求している場合は、Flutterのパッケージがあり、Flutterアプリでそのフォントを簡単に使用できるため、Google Fontsを使用してアプリに最適なフォントを見つけることができます(そしてそうすべきgoogle_fontsです)。

フォントを選択したら、それを画像エディタにロードし、フォントと背景色に必要なパレットができるまで色を試してみます。

スポイトツールを使用して特定の色を選択することもできます。色の16進コードに注意してください。16進コードを使用すると、コードの前に0xFF。を付けることで、この正確な色をFlutterに追加できます。したがって、色が、の場合、9ae79aFlutterに相当するものはです。Color(0xFF9ae79a)

カラーピッカーを使用してGIMPの文字C画像に緑色を追加する

スプラッシュ画面に画像を追加する

まず、flutter_native_splash パッケージをプロジェクトに追加します。これにより、Android、iOS、およびWeb用のネイティブ起動画面を作成できます。

次に、オープナー画像を保存します。次に、使用可能な残りのスペースに使用する画像と背景色を指定する必要があります。これを行うには、次の行を開いて追加します。assets/newlogo.png.

flutter_native_splash

pubspec.yaml

flutter_native_splash:
  color: "#9ae79a"
  image: assets/newlogo.png

ここでの色は、GIMPのカラーピッカーツールから取得したものとまったく同じ0xFFです。つまり、プレフィックスはありません。これは、起動画面の色にアルファチャネルが含まれておらず、透明度がなく、先頭0xFFが色の透明度を定義しているためです。

次に、プロジェクトのルートで次のコマンドを実行して、このイメージに基づいてすべてのクロスプラットフォーム起動画面を生成しましょう。

flutter pub get
flutter pub run flutter_native_splash:create

このコードを実装すると、作成した画像でアプリが開きます。ただし、アプリの開始画面に突然変わります。では、新しく作成したスプラッシュ画面を残りの起動画面にどのように結び付けるのでしょうか。

起動画面をスプラッシュ画面に結び付ける

この記事の冒頭で完成したアニメーションを見ると、文字「C」が小さくなり、すぐにロゴの残りの部分が表示され、その後に食べ物がボウルに落ちる短いアニメーションが表示されます。

通常、これらのタイプのアニメーションは非常に複雑になる可能性がありますが、これを効率的かつ簡単に実現するにはどうすればよいでしょうか。この場合、暗黙のアニメーションを使用します。

まず、アニメーション化するオブジェクトを指定する必要があります。この場合、文字「C」から拡張された「CHOWTIME」ロゴにアニメーション化し、テキストのサイズを変更します。テキストのサイズが変更されている間、ロゴテキストの残りの部分を組み込むために、ウィジェットの中間オブジェクト境界も増やす必要があります。

これを行うと、表示されているロゴにワイプ効果が与えられます。これらのアニメーションの変更を実装するために、2つのウィジェットを使用します:AnimatedDefaultTextStyleAnimatedCrossFade

AnimatedDefaultTextStyleウィジェット

時間の経過とともにテキストのサイズを変更するには、AnimatedDefaultTextStyleウィジェットを使用します。Animatedプレフィックスが付いたほとんどのウィジェットと同様に、ターゲットサイズを指定する必要があります。ウィジェットのサイズが変更されると、Flutterは定義された期間テキストのサイズを自動的に変更します。この場合、次のようになります。

AnimatedDefaultTextStyle(
  duration: transitionDuration, //a duration, set to one second
  curve: Curves.fastOutSlowIn,
  style: TextStyle(
    color: Color(0xFF4e954e), // our color from above, prefixed with 0xFF
    fontSize: !expanded ? _bigFontSize : 50, // change font size depending on expanded state
    fontFamily: 'Montserrat', // the font from Google Fonts
    fontWeight: FontWeight.w600, // 
  ),
  child: Text(
    "C",
  ),
)

場合expandedブールトグルと呼び出しはsetState、ウィジェットは、自由に大から小へのサイズ変更をアニメーション化。良い。

AnimatedCrossFadeウィジェット

「C」が正しくアニメーション化されたので、テキストのサイズが変更されている間、ロゴの残りの部分を表示します。これを実現ContainerするRowには、ロゴテキストとアニメーションを含む空とaの間でフェードインします。

AnimatedCrossFade(
  firstCurve: Curves.fastOutSlowIn, // the same curve as above
  crossFadeState: !expanded ? CrossFadeState.showFirst : CrossFadeState.showSecond,
  duration: transitionDuration, // the same duration as above
  firstChild: Container(), // an empty container
  secondChild: _logoRemainder(), // a Row containing rest of our logo
  alignment: Alignment.centerLeft, // "reveal" the logo from the center left
  sizeCurve: Curves.easeInOut,
),

繰り返しますが、expandedブール値が切り替わると、このウィジェットは空のボックスとロゴの残りの部分の間をアニメーション化し、必要に応じてコンテナーのサイズを変更します。

Flutterに食べ物のアニメーションを追加する

ロゴのサイズが適切に変更されたので、アプリが提供するサービスを最もよく表すアニメーションを見つけることができます。アニメーションを追加するときは、独自のアニメーションを作成するか、lottiefiles.comから作成済みのアニメーションをダウンロードできます。効率を上げるために、事前に作成されたアニメーションを使用します。

アニメーションを探すときは、最大2〜3秒続き、空のキャンバスから始まり、背景が透明なアニメーションを選択するのが最適です。

このフードアニメーションは私たちの基準を満たし、アプリのサービスと一致しているので、ロッティアニメーションファイルをフォーマットでダウンロードして、フォルダにポップします。.jsonassetspubspec.yaml

この場合も、アプリケーションのルートフォルダーで、次のコマンドを実行lottie
てプロジェクトにインストールします。

flutter pub add lottie

アニメーションをオープニング画面に追加するときは、次の点に注意する必要があります。

  1. 幅と高さを設定します。そうしないと、アニメーションが大きくなりすぎます。
  2. AnimationControllerアニメーションが終了したときにアプリのホームページにリダイレクトするように設定します

私たちのこのようなウィジェットルックス:LottieBuilder.asset

LottieBuilder.asset(
  'assets/food.json',
  onLoaded: (composition) {
    _lottieAnimation..duration = composition.duration; // set the duration of our AnimationController to the length of the lottie animation
  },
  frameRate: FrameRate.max, // makes the animation smoother
  repeat: false,
  animate: false, // don't start the animation immediately
  height: 100,
  width: 100,
  controller: _lottieAnimation,
)

アニメーションのタイミングを設定する

あとは、次の期間を実装して、アニメーションに適切なタイミングを追加するだけです。

  • 最初のスプラッシュを1秒間表示する
  • expandedtrueに変更しsetState、暗黙のアニメーションとクロスフェードを同時に実行するように呼び出します
  • テキストのサイズが変更され、クロスフェードが終了するのを待っています
  • フードボウルアニメーションの開始
  • ユーザーをホーム画面にリダイレクトする

プログラム的には、次のようになります。

Future.delayed(Duration(seconds: 1))
    .then((value) => setState(() => expanded = true))
    .then((value) => Duration(seconds: 1))
    .then(
      (value) => Future.delayed(Duration(seconds: 1)).then(
        (value) => _lottieAnimation.forward().then(
              (value) => Navigator.of(context)
                  .pushAndRemoveUntil(MaterialPageRoute(builder: (context) => HomePage()), (route) => false),
            ),
      ),
    );

まとめ

Flutterの組み込みアニメーションツールを使用して、ユーザーにとって視覚的に魅力的な起動画面を作成するのはかなり簡単です。Flutterのflutter_native_splashサポートにより、アプリを使用するプラットフォームごとにアニメーションを作成する必要がなくなります。

あなたはできますここでサンプルアプリの完全なソースコードを見つけるあなたはフォークと心ゆくまでで遊ぶことができます。ハッピーハッキング!

Link: https://blog.logrocket.com/make-splash-screen-flutter/

#flutter 

What is GEEK

Buddha Community

Flutterでスプラッシュ画面(Splash Screen)を実装する
Sagar Shende

Sagar Shende

1577376573

How to Create Splash Screen in a Flutter App | Splash Screen Tutorial

Splash Screen help Brand to get Noticed Or Brand Awareness so Today I am going to show how to create Splash screen in a flutter

Splash Screen Animation can be a Simple Logo Animation of your Brand. this Splashscreen animation can be done with the help of the splashscreen package.

💻Splash Screen:- https://alltechsavvy.com/splash-screen-in-flutter-app/

👩‍💻Github Code: https://github.com/sagarshende23/flutter_splashscreen_example

👉👉👉Visit At:- https://alltechsavvy.com/👈👈👈

⚡⚡Best Flutter Development Tools⚡⚡
https://alltechsavvy.com/best-flutter-development-tools/

🔥Github Profile: https://github.com/sagarshende23

#splash screen in flutter #flutter splash screen #flutter splash screen example #flutter

Arvel  Parker

Arvel Parker

1591627260

How to Use the Screen Command in Linux

Screen is a terminal program in Linux which allows us to use a virtual (VT100 terminal) as full-screen window manager which multiplexes an open physical terminal between multiple processes, which are typically, interactive shells. It allows us to access multiple terminal sessions within a single terminal or a remote terminal session. It is most useful when addressing multiple Linux shell commands on the command line, as well as separating commands from the shell that started the commands.

Screen also allows a user to initiate a command from one terminal, disconnect from that terminal, and then reconnect from a different location to that same terminal, while using a different terminal without having to restart the command. This simply lets a user better control multiple and separate command windows.

Screen also lets multiple remote computers connect to the same screen session at once. This allows multiple users to connect to the same screen session allowing a second user to follow along with another administrator working on a server.

#tutorials #attach #cli #command line #detach #key bindings #logging #multiplex #multiuser #multiuser mode #remote access #remote management #remote session #remote terminal #screen #screen logging #screen session #screenlog #screens #scrollback #shell #terminal #terminal session #terminal window #tty #vt100

Madyson  Moore

Madyson Moore

1626071340

Simple Splash/Launch/Boot Screen in React Native (iOS and Android)

In this video I walk you through installing and using the react-native-bootsplash library to quickly and easily setup a boot/splash/launch screen in your React Native apps.

More Info: https://reactnativeschool.com/simple-splash-launch-boot-screen-in-react-native-ios-and-android

#splash #launch #boot screen #react native #android #ios

Chaz  Homenick

Chaz Homenick

1596462807

Implement A Splash Screen In Android

Create the background with logo for Splash Screen insplash_screen.xmlunder res/drawable:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:opacity="opaque">

    <item android:drawable="@color/splash_screen_bg_color" />
    <item android:drawable="@drawable/splash_logo" />

</layer-list>

Create Style for Splash Screen in res/values/styles.xml:

<!-- Splash screen theme -->
<style name="SplashScreenTheme" parent="Theme.AppCompat.NoActionBar">

<item name="android:windowBackground">@color/splash_screen_bg_color</item>
</style>

**Notes: **If I want to modify styles of Status Bar or Bottom Nav, modify attributes in res/values/style.xml file (Ref: Attributes in styles.xml):

<item name="android:windowFullscreen">true</item>
<item name="android:windowTranslucentNavigation">true</item>

Set style as theme for SplashScreenActivity in AndroidManifest.xml:

<!-- Splash Screen Activity -->
<activity android:name=".activity.SplashScreenActivity"
    android:theme="@style/SplashScreenTheme">
    <intent-filter>
        <action android:name="android.intent.action.MAIN"/>

        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

Image for post

Image for post

AndroidManifest.xml

**Notes: **Make sure comment this line because we want the SplashScreenThemeActivity be the LAUNCHER. Otherwise, it will load MainActivity automatically.

Create a SlashScreenActivity:

public class SplashScreenActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        Intent intent = new Intent(SplashScreenActivity.this, MainActivity.class);
        startActivity(intent);
        finish();
    }
}

**Notes: **As we are loading the splash screen them from manifest. So there is no need to setContentView() with any xml layout.

#android #splash-screen

Maryjane  Olson

Maryjane Olson

1627071900

How to Android Splash Screen fluently

In This Tutorial, learn about How to Android Splash Screen fluently

#splash screen #android studio