Move to precompiled SVGs (#3072)

* add compile script

* merge

* move to CakeImageWidget

* add precompiled .vec

* fix double declaration

* move .svg

* add to ci

* add svgs

lib/src/screens/dashboard/widgets/new_main_navbar_widget.dart

@@ -1,5 +1,6 @@
 import 'dart:io';
 import 'dart:ui';
+import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:cake_wallet/entities/new_main_actions.dart';
@@ -214,7 +215,7 @@ class _NEWNewMainNavBarState extends State<NewMainNavBar> {
                                         builder: (context, value, child) {
                                             return Container(
                                               height: NewMainNavBar.barHeight,
-                                                child: SvgPicture.asset(
+                                                child: CakeImageWidget(imageUrl:
                                                   visibleActions[i].image,
                                                   width: iconWidth,
                                                   height: iconHeight,

lib/src/screens/nodes/node_create_or_edit_page.dart

@@ -5,6 +5,7 @@ import 'package:cake_wallet/new-ui/widgets/receive_page/receive_top_bar.dart';
 import 'package:cake_wallet/src/screens/nodes/widgets/node_form.dart';
 import 'package:cake_wallet/src/widgets/alert_with_one_action.dart';
 import 'package:cake_wallet/src/widgets/alert_with_two_actions.dart';
+import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
 import 'package:cake_wallet/src/widgets/primary_button.dart';
 import 'package:cake_wallet/src/widgets/scrollable_with_bottom_section.dart';
 import 'package:cake_wallet/utils/show_pop_up.dart';
@@ -89,7 +90,7 @@ class _NodeCreateOrEditPageState extends State<NodeCreateOrEditPage> {
               title: widget.editingNode != null ? S.current.edit_node : S.current.node_new,
               leadingIcon: Icon(Icons.arrow_back_ios_new),
               onLeadingPressed: Navigator.of(context).pop,
-              trailingIcon: SvgPicture.asset(
+              trailingIcon: CakeImageWidget(imageUrl:
                 "assets/new-ui/scan.svg",width:24,height:24,
                 colorFilter: ColorFilter.mode(Theme.of(context).colorScheme.primary, BlendMode.srcIn),
               ),

lib/src/screens/receive/widgets/qr_image.dart

@@ -1,3 +1,5 @@
+import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
+import 'package:cw_core/utils/print_verbose.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/flutter_svg.dart';
 import 'package:qr_flutter/qr_flutter.dart' as qr;
@@ -42,7 +44,7 @@ class QrImage extends StatelessWidget {
             backgroundColor: backgroundColor,
             padding: const EdgeInsets.all(12.0),
           ),
-          SvgPicture.asset(
+          CakeImageWidget(imageUrl:
             imagePath,
             width: logoSize * 0.8,
             height: logoSize * 0.8,

lib/src/widgets/cake_image_widget.dart

@@ -1,5 +1,8 @@
+import 'package:cw_core/utils/print_verbose.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
 import 'package:flutter_svg/flutter_svg.dart';
+import 'package:vector_graphics/vector_graphics.dart';
 
 class CakeImageWidget extends StatelessWidget {
   const CakeImageWidget({
@@ -11,8 +14,8 @@ class CakeImageWidget extends StatelessWidget {
     this.loadingWidget,
     this.errorWidget,
     this.color,
-    this.borderRadius = 24.0,
     this.colorFilter,
+    this.borderRadius = 24.0, this.alignment, this.allowDrawingOutsideViewBox,
   });
 
   final String? imageUrl;
@@ -22,8 +25,10 @@ class CakeImageWidget extends StatelessWidget {
   final Widget? loadingWidget;
   final Widget? errorWidget;
   final Color? color;
-  final double borderRadius;
   final ColorFilter? colorFilter;
+  final AlignmentGeometry? alignment;
+  final bool? allowDrawingOutsideViewBox;
+  final double borderRadius;
 
   @override
   Widget build(BuildContext context) {
@@ -38,21 +43,36 @@ class CakeImageWidget extends StatelessWidget {
 
     Widget imageWidget;
     if (isAsset) {
-      imageWidget = isSvg
-          ? SvgPicture.asset(
-              imageUrl!,
-              height: height,
-              width: width,
-              colorFilter: effectiveColorFilter,
-              fit: fit ?? BoxFit.contain,
-            )
-          : Image.asset(
-              imageUrl!,
-              height: height,
-              width: width,
-              fit: fit,
-              color: color,
-            );
+      if (isSvg) {
+        imageWidget = SvgPicture(AssetBytesLoader("${imageUrl}.vec"),
+            height: height,
+            width: width,
+            alignment: alignment ?? Alignment.center,
+            allowDrawingOutsideViewBox: allowDrawingOutsideViewBox ?? false,
+            colorFilter:
+                effectiveColorFilter,
+            fit: fit ?? BoxFit.contain, errorBuilder: (context, e, trace) {
+          return SvgPicture.asset(
+            imageUrl!,
+            height: height,
+            alignment: alignment ?? Alignment.center,
+            allowDrawingOutsideViewBox: allowDrawingOutsideViewBox ?? false,
+            width: width,
+            errorBuilder: (_, __, ___) => SizedBox(height: height, width: width),
+            colorFilter:
+                effectiveColorFilter,
+            fit: fit ?? BoxFit.contain,
+          );
+        });
+      } else {
+        imageWidget = Image.asset(
+          imageUrl!,
+          height: height,
+          width: width,
+          fit: fit,
+          color: color,
+        );
+      }
     } else {
       imageWidget = isSvg
           ? SvgPicture.network(
@@ -60,6 +80,8 @@ class CakeImageWidget extends StatelessWidget {
               height: height,
               width: width,
               colorFilter: effectiveColorFilter,
+              alignment: alignment ?? Alignment.center,
+              allowDrawingOutsideViewBox: allowDrawingOutsideViewBox ?? false,
               fit: fit ?? BoxFit.contain,
               placeholderBuilder: (_) {
                 return loadingWidget ?? const Center(child: CircularProgressIndicator());

lib/src/widgets/new_list_row/list_item_checkbox_widget.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
 import 'package:cake_wallet/src/widgets/new_list_row/list_Item_style_wrapper.dart';
 import 'package:cake_wallet/src/widgets/new_list_row/new_simple_checkbox.dart';
 import 'package:flutter/material.dart';
@@ -52,7 +53,7 @@ class _ListItemCheckboxWidgetState extends State<ListItemCheckboxWidget> {
                 children: [
                   if (widget.iconPath != null)
                     widget.iconPath!.toLowerCase().endsWith("svg")
-                        ? SvgPicture.asset(widget.iconPath!, height: 24, width: 24)
+                        ? CakeImageWidget(imageUrl:widget.iconPath!, height: 24, width: 24)
                         : Image.asset(
                             widget.iconPath!,
                             width: 24,

lib/src/widgets/new_list_row/list_item_regular_row_widget.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
 import 'package:cake_wallet/src/widgets/new_list_row/list_Item_style_wrapper.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
@@ -59,17 +60,7 @@ class ListItemRegularRowWidget extends StatelessWidget {
                     if(iconPath != null)
                       Padding(
                         padding: const EdgeInsets.only(right: 12.0),
-                        child: iconPath!.split(".").last.toLowerCase() == "svg"
-                            ? SvgPicture.asset(
-                                iconPath!,
-                                width: 24,
-                                height: 24,
-                              )
-                            : Image.asset(
-                                iconPath!,
-                                width: 24,
-                                height: 24,
-                              ),
+                        child: CakeImageWidget(imageUrl: iconPath!, width: 24,height: 24,)
                       ),
                     Flexible(
                       child: Column(
@@ -100,14 +91,14 @@ class ListItemRegularRowWidget extends StatelessWidget {
                       ),
                     ),
                   if(trailingIconPath != null)
-                    SvgPicture.asset(
+                    CakeImageWidget(imageUrl:
                       trailingIconPath!,
                       height: trailingIconSize ?? 18,
                       width:trailingIconSize ?? 18,
                       colorFilter: ColorFilter.mode(foregroundColor ?? Theme.of(context).colorScheme.onSurfaceVariant,BlendMode.srcIn),
                     )
                   else if(showArrow)
-                  SvgPicture.asset(
+                    CakeImageWidget(imageUrl:
                     "assets/new-ui/arrow_forward.svg",
                     height: 14,
                     color: theme.colorScheme.onSurfaceVariant

lib/src/widgets/new_list_row/list_item_selector_widget.dart

@@ -1,3 +1,4 @@
+import 'package:cake_wallet/src/widgets/cake_image_widget.dart';
 import 'package:cake_wallet/src/widgets/new_list_row/list_Item_style_wrapper.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_svg/svg.dart';
@@ -41,7 +42,7 @@ class ListItemSelectorWidget extends StatelessWidget {
                       options[selectedIndex],
                       style: labelStyle,
                     ),
-                    SvgPicture.asset(
+                    CakeImageWidget(imageUrl:
                       "assets/new-ui/chooser.svg",
                       colorFilter:
                           ColorFilter.mode(theme.colorScheme.onSurfaceVariant, BlendMode.srcIn),