web-dev-qa-db-ja.com

アニメーションのスプラッシュスクリーンフラッター

アニメーションのスプラッシュスクリーンを表示したかったので、機能しないgif画像を試してみたので、その回答を確認しました GIF形式の画像をスプラッシュスクリーンとして追加できますか しかし、それはできません仕事、これを達成するための推奨アプローチはありますか

dartfluttersplash-screen
6
Osama Gamal

私はフレア（ https://www.2dimensions.com/about-flare ）の方法を使用します。無料のWebオーサリングツールを使用すると、非常に簡単にアニメーションを作成できます。

次に、Flutterランタイムプラグインがあります（ https://pub.dev/packages/flare_flutter ）。それを使用すると、オーサリングWebアプリからエクスポートされたアニメーションを再生できます。 Webオーサリングツールの使い方をマスターすれば、とても簡単です。いずれにしても、コードを使用してアニメーションを100％作成する方が簡単です。

これは、スプラッシュスクリーンがどのように見えるかを示します（プロジェクトフォルダーの/ assets/flareにフレアアニメーションのエクスポートを配置した場合）

import 'package:flare_flutter/flare_actor.Dart';
import 'package:flutter/material.Dart';

class SplashScreen extends StatelessWidget {

  SplashScreen() {
  }

  @override
  Widget build(BuildContext context) {
    String asset = "assets/flare/splash.flr";
    return Container(
        // use same color as native splashscreen GIF/PNG so that the user cant tell the difference
        color: const Color.fromRGBO(250, 224, 61, 1.0), 
        child: FlareActor(
          asset,
          callback: (nameOfAnimation) async {
             Navigator.pushReplacementNamed(context, "/login");                      
          },
          fit: BoxFit.contain,
          alignment: Alignment.center,
          sizeFromArtboard: false,
          animation: "splash",
        )
    );
  }
}

あなたのmaterialAppでちょうど行う：

return MaterialApp(
      title: 'My App',
      debugShowCheckedModeBanner: false,
      home: SplashScreen()
);
2
Marc