Android Studio 如何在Flutter中使用svg图像创建闪屏

cs7cruho 于 2023-05-01 发布在 Android

关注(0)|答案(2)|浏览(200)

我想在flutter中创建启动画面。我有svg图像文件，不想转换为JPG或PNG。有没有办法在Flutter中创建带有svg图像文件的启动画面？

希望在Native端实现启动画面。
使用SVG代码更新：

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     width="800px" height="800px" viewBox="0 0 45.917 45.917"
     xml:space="preserve">
<g>
    <g>
        <path d="M33.523,28.334c-0.717,1.155-1.498,2.358-2.344,3.608c7.121,1.065,10.766,3.347,10.766,4.481
            c0,1.511-6.459,5.054-18.986,5.054c-12.528,0-18.988-3.543-18.988-5.054c0-1.135,3.645-3.416,10.768-4.481
            c-0.847-1.25-1.628-2.453-2.345-3.608C5.365,29.661,0,32.385,0,36.424c0,5.925,11.551,9.024,22.959,9.024s22.958-3.1,22.958-9.024
            C45.917,32.385,40.553,29.661,33.523,28.334z"/>
        <path d="M22.96,36.047c1.032,0,2.003-0.491,2.613-1.325c3.905-5.33,10.813-15.508,10.813-20.827
            c0-7.416-6.012-13.427-13.427-13.427c-7.417,0-13.427,6.011-13.427,13.427c0,5.318,6.906,15.497,10.812,20.827
            C20.957,35.556,21.928,36.047,22.96,36.047z M17.374,13.63c0-3.084,2.5-5.584,5.585-5.584c3.084,0,5.584,2.5,5.584,5.584
            s-2.5,5.584-5.584,5.584C19.874,19.215,17.374,16.715,17.374,13.63z"/>
    </g>
</g>
</svg>

android-studio

来源：https://stackoverflow.com/questions/76133752/how-to-create-a-splash-screen-in-flutter-with-svg-image

2条答案

按热度按时间

31moq8wy1#

试着从https://pub.dev中检查flutter_svg，应该会有帮助

赞(0）回复(0）举报 2023-05-01

iyfamqjs2#

跟着我走

Step1

通过输入以下命令flutter pub add flutter_svg将flutter_svg添加到项目中

Step2

创建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>")
)
);
  }
}

Step3

现在我们应该修改main。 dart 在MaterialApp和使家我们的闪屏一然后我们就完成了

MaterialApp(home:SplashScreen());

赞(0）回复(0）举报 2023-05-01

我来回答

Android Studio 如何在Flutter中使用svg图像创建闪屏

2条答案

Step1

Step2

Step3

相关问题

热门标签

最新问答