Как создать заставку во Flutter с изображением svg

попробуйте проверить flutter_svg от https://pub.dev это должно помочь

Следуйте за мной по этим шагам

Шаг 1

добавьте flutter_svg в свой проект, введя эту команду flutter pub add flutter_svg

Шаг 2

создайте файл dart и внутри него создайте виджет stateFull и поместите свой svg внутрь

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

  @override
  State<SplashScreen> createState() => SplashScreenState();
}

class SplashScreenState extends State<SplashScreen> {
@override
void initState((){
  Future.delay(Duration(milisecound:500));
  Navigator.of(context).pushNamed('/home');
})
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    body:Center(
    child:SvgPicture.string("<SVG></SVG>")
)
);
  }
}

Шаг 3

теперь мы должны изменить main.dart в MaterialApp и сделать его домашним для нашей заставки, тогда мы закончили

MaterialApp(home:SplashScreen());

Поскольку я обнаружил, что packages для введения SplashScreen следует принимать только формат изображения как JPG и PNG. После работы над приложением я нашел решение сделать заставку без какого-либо пакета, используя изображение SVG как в Android, так и в iOS.

Следуйте инструкциям ниже, если вы хотите представить SplashScreen с SVG.

1.Андроид

Шаг 1:

Откройте модуль Android из приложения Flutter в Android Studio отдельно.

Шаг 2:

Откройте папку res в drawable --> включите Vector Asset (укажите путь к вашему svg изображению).

Шаг 3:

Теперь сделайте один новый рисуемый splash_screen_image с background color и включите свой Vector Asset Drawable (который мы включили в предыдущем шаге 2).

Рисуемый файл splash_screen_image.xml должен выглядеть следующим образом:

<?xml version = "1.0" encoding = "utf-8"?>
<layer-list xmlns:android = "http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape = "rectangle">
            <solid
                android:color = "your color"/>

            <size
                android:width = "150dp"
                android:height = "150dp"/>
        </shape>
    </item>



    <item android:gravity = "center" android:drawable = "@drawable/ic_svg"/>
</layer-list>

Шаг 4:

Теперь откройте launch_background.xml и добавьте наш новый рисунок splash_screen_image.xml.

Наш launch_background.xml будет выглядеть следующим образом:

<?xml version = "1.0" encoding = "utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android = "http://schemas.android.com/apk/res/android">
    <item android:drawable = "@drawable/splash_screen_image" />

    <!-- You can insert your own image assets here -->
    <!-- <item>
        <bitmap
            android:gravity = "center"
            android:src = "@mipmap/launch_image" />
    </item> -->
</layer-list>

(Примечание: при необходимости внесите те же изменения в launch_background.xml(v21))

Шаг 5:

Ваш экран-заставка Android готов и протестируйте его, запустив приложение флаттера на устройстве Android.

2. iOS

Примечание -> Убедитесь, что вы работаете с последней версией xcode, которая поддерживает изображение svg.

Шаг 1

Откройте модуль iOS в XCode.

Шаг 2

Открыть Asset --> LaunchImage

Шаг 3

Перетащите SVG image file в пространство, указанное как 1x, 2x, 3x.

Шаг: 4

Теперь откройте LaunchScreen.storyBoard и измените цвет фона в соответствии с вашими требованиями.

Шаг: 5

Протестируйте свое флаттер-приложение, открыв его на устройстве iOS или в симуляторе.

Я надеюсь, что это оказалось очень полезным.