Flutter：如何将 SVG 添加为启动画面？

Question

我想将 Splash Screen 作为 SVG 添加到我的 Flutter 应用中，但我找不到方法

我还没有尝试过 iOS，但是通过 Android Studio、Respresso 或 SVG2Android 将其转换为矢量资产的特定 Android 方式不起作用。

此外，像 splash_screen_view 和 flutter_native_splash 这样的依赖项只能用于 JPG 和 PNG。

有人知道原因或替代方法吗？

有关项目的更多详情

@drawable/launch_background.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@android:color/black" />

    <item android:drawable="@drawable:splashscreen" android:gravity="center" />

    <!-- <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/splashscreen" />
    </item> -->
</layer-list>

main/AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="ro.adservio.app.adservio">
   <application
        android:label="adservio"
        android:icon="@mipmap/ic_launcher">
        <activity
            android:name=".MainActivity"
            android:launchMode="singleTop"
            android:theme="@style/splashScreenTheme"
            android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
            android:hardwareAccelerated="true"
            android:windowSoftInputMode="adjustResize">

            <meta-data
              android:name="io.flutter.embedding.android.NormalTheme"
              android:resource="@style/NormalTheme"
              />
    
            <meta-data
              android:name="io.flutter.embedding.android.SplashScreenDrawable"
              android:resource="@drawable/launch_background"
              />
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>
                <category android:name="android.intent.category.LAUNCHER"/>
            </intent-filter>
        </activity>

        <meta-data
            android:name="flutterEmbedding"
            android:value="2" />
    </application>
</manifest>

提前感谢您的帮助！ :)

Answer 1

对于SplashScreen中的SVG Image，需要添加flutter_svg包=>https://pub.dev/packages/flutter_svg

有关更多信息，您可以查看此软件包文档

对于基本信息，您需要在 pubspec.yaml 文件中定义您的 SVG 图像，像这样

  assets:
    - assets/yourImageName.svg

class SplashScreen extends StatefulWidget {
  const SplashScreen({Key key}) : super(key: key);

  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    startTime();
  }

  startTime() async {
    var _duration = Duration(seconds: 4);
    return Timer(_duration, () {
 //Navigate to another screen or anyOther function, like i set duration 4 sec so this function run after 4 sec
    });
  }
  
  @override
  Widget build(BuildContext context) {
    return Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.height,
      child: SvgPicture.asset("yourSVGImagePath", //just like you define in pubspec.yaml file
          color: Colors.red, semanticsLabel: 'A red up arrow'),
    );
  }
}

如果这对您有帮助，请竖起大拇指回答并右打勾，谢谢:)