如何使用 svg 图像在 Flutter 中创建启动画面

Question

我想在 flutter 中创建启动画面。我有

svg

图像文件，不想转换成

JPG

或

PNG

。有没有办法在 Flutter 中使用 svg 图像文件创建启动画面？

使用 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>

Answer 1

尝试从 https://pub.dev 查看 flutter_svg 应该有帮助

Answer 2

跟着我的步骤

第一步

通过键入此命令将 flutter_svg 添加到您的项目

flutter pub add flutter_svg

---

第二步

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

第三步

现在我们应该修改

MaterialApp

中的 main.dart 并让我们的启动画面成为家然后我们就完成了

MaterialApp(home:SplashScreen());