Question 91729 in Flutter Question posted in
The official Flutter documentation can be found here.

how to create a splash screen in Flutter with svg image

I want to create the splash screen in flutter. I have svg image file and don’t want to convert into JPG or PNG. Is there any way to create the splash screen with svg image file in Flutter?

Want to implement the splash screen on Native side.

UPDATE WITH SVG CODE:

<?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>
Tags:

2

Answers


  1. 0

    try checking out the flutter_svg from https://pub.dev that should help

    Login or Signup to reply.
  2. 0

    follow me by this steps

    Step1

    add flutter_svg to your project by typing this command flutter pub add flutter_svg

    Step2

    create dart file and inside of it create stateFull widget and put your svg inside

    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

    now we should modify the main.dart in MaterialApp and make home to our splash screen one then we are done

    MaterialApp(home:SplashScreen());
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search