Flutter SVG not rendering properly

Viewed 694

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,
        ),
      ),
    );
  }
}
1 Answers

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

Related