Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter SVG not rendering properly

i have a design which is been converted to svg for me to display it in my flutter.. here is the design. enter image description here

but if i render it to my flutter project with this plugin is not displaying well. here is the result. enter image description here

here is my code

CarouselController buttonCarouselController = CarouselController();

int pageIndex = 0; final List imgList = [ 'assets/1b.svg', 'assets/2b.svg', 'assets/3b.svg', 'assets/4b.svg', 'assets/5b.svg', 'assets/6b.svg', 'assets/background.svg', ];

    return Scaffold(
      body: CarouselSlider(
        items: imgList.map((i) {
          return Stack(
            children: [
              Container(
                height: double.infinity,
                width: double.infinity,
                child: SvgPicture.asset(
                  i,
                  fit: BoxFit.fill,
                  allowDrawingOutsideViewBox: true,
                ),
              ),
              Padding(
                padding: EdgeInsets.all(30.0),
                child: Align(
                  alignment: Alignment.bottomRight,
                  child: Container(
                    child: GestureDetector(
                      onTap: () async {
                        await addPreference('onboard', true);
                        Navigator.pushNamed(context, '/userOption');
                      },
                      child: Text(
                        'Skip',
                        style: TextStyle(
                          color: pageIndex == 3 ? Colors.white : Colors.white,
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                ),
              )
            ],
          );
        }).toList(),
        carouselController: buttonCarouselController,
        options: CarouselOptions(
          autoPlay: true,
          onPageChanged: (i, r) {
            setState(() {
              pageIndex = i;
            });

            switch (pageIndex) {
              case 6:
                {
                  addPreference('onboard', true);
                  Navigator.pushNamed(context, '/userOption');
                }
                break;
            }
          },
          viewportFraction: 1.0,
          aspectRatio: 2.0,
          initialPage: 0,
          autoPlayInterval: Duration(seconds: 4),
          enlargeCenterPage: false,
          height: double.infinity,
        ),
      ),
    );
  }
}
like image 481
Gbenga B Ayannuga Avatar asked Oct 15 '25 04:10

Gbenga B Ayannuga


1 Answers

If you run svgcleaner on this SVG it will work. Or if you manually reorder the defs to the top.

like image 65
Ali Punjabi Avatar answered Oct 18 '25 19:10

Ali Punjabi



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!