Setup icon loading with colors

lib/main.dart

@@ -17,6 +17,7 @@ import 'package:ente_auth/services/user_service.dart';
 import 'package:ente_auth/store/code_store.dart';
 import 'package:ente_auth/ui/tools/app_lock.dart';
 import 'package:ente_auth/ui/tools/lock_screen.dart';
+import 'package:ente_auth/ui/utils/icon_utils.dart';
 import 'package:ente_auth/utils/crypto_util.dart';
 import 'package:flutter/foundation.dart';
 import "package:flutter/material.dart";
@@ -85,4 +86,5 @@ Future<void> _init(bool bool, {String? via}) async {
   await BillingService.instance.init();
   await NotificationService.instance.init();
   await UpdateService.instance.init();
+  await IconUtils.instance.init();
 }

lib/ui/code_widget.dart

@@ -8,6 +8,7 @@ import 'package:ente_auth/onboarding/view/setup_enter_secret_key_page.dart';
 import 'package:ente_auth/onboarding/view/view_qr_page.dart';
 import 'package:ente_auth/store/code_store.dart';
 import 'package:ente_auth/ui/code_timer_progress.dart';
+import 'package:ente_auth/ui/utils/icon_utils.dart';
 import 'package:ente_auth/utils/dialog_util.dart';
 import 'package:ente_auth/utils/toast_util.dart';
 import 'package:ente_auth/utils/totp_util.dart';
@@ -81,7 +82,7 @@ class _CodeWidgetState extends State<CodeWidget> {
               backgroundColor: Colors.grey.withOpacity(0.1),
               borderRadius: const BorderRadius.all(Radius.circular(12.0)),
               foregroundColor:
-              Theme.of(context).colorScheme.inverseBackgroundColor,
+                  Theme.of(context).colorScheme.inverseBackgroundColor,
               icon: Icons.qr_code_2_outlined,
               label: "QR",
               padding: const EdgeInsets.only(left: 4, right: 0),
@@ -90,7 +91,6 @@ class _CodeWidgetState extends State<CodeWidget> {
             const SizedBox(
               width: 4,
             ),
-
             SlidableAction(
               onPressed: _onEditPressed,
               backgroundColor: Colors.grey.withOpacity(0.1),
@@ -171,14 +171,23 @@ class _CodeWidgetState extends State<CodeWidget> {
                                 ),
                               ],
                             ),
-                            widget.code.hasSynced != null &&
-                                    widget.code.hasSynced!
-                                ? Container()
-                                : const Icon(
-                                    Icons.sync_disabled,
-                                    size: 20,
-                                    color: Colors.amber,
-                                  ),
+                            Row(
+                              mainAxisAlignment: MainAxisAlignment.end,
+                              children: [
+                                widget.code.hasSynced == null &&
+                                        widget.code.hasSynced!
+                                    ? Container()
+                                    : const Icon(
+                                        Icons.sync_disabled,
+                                        size: 20,
+                                        color: Colors.amber,
+                                      ),
+                                const SizedBox(width: 12),
+                                IconUtils.instance.getIcon(
+                                  safeDecode(widget.code.issuer).trim(),
+                                ),
+                              ],
+                            ),
                           ],
                         ),
                       ),
@@ -231,7 +240,7 @@ class _CodeWidgetState extends State<CodeWidget> {
                                         style:
                                             Theme.of(context).textTheme.caption,
                                       ),
-                                       InkWell(
+                                      InkWell(
                                         onTap: _onNextHotpTapped,
                                         child: const Icon(
                                           Icons.forward_outlined,
@@ -264,8 +273,13 @@ class _CodeWidgetState extends State<CodeWidget> {
   }
 
   void _onNextHotpTapped() {
-    if(widget.code.type == Type.hotp) {
-     CodeStore.instance.addCode(widget.code.copyWith(counter: widget.code.counter + 1), shouldSync: true).ignore();
+    if (widget.code.type == Type.hotp) {
+      CodeStore.instance
+          .addCode(
+            widget.code.copyWith(counter: widget.code.counter + 1),
+            shouldSync: true,
+          )
+          .ignore();
     }
   }
 
@@ -306,7 +320,6 @@ class _CodeWidgetState extends State<CodeWidget> {
     );
   }
 
-
   String _getCurrentOTP() {
     try {
       return getOTP(widget.code);

lib/ui/utils/icon_utils.dart

@@ -0,0 +1,55 @@
+import 'dart:convert';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/svg.dart';
+import 'package:logging/logging.dart';
+
+class IconUtils {
+  IconUtils._privateConstructor();
+
+  static final IconUtils instance = IconUtils._privateConstructor();
+
+  final Map<String, String> _simpleIcons = {};
+
+  Future<void> init() async {
+    await _loadJson();
+  }
+
+  Widget getIcon(String provider) {
+    final title = _getProviderTitle(provider);
+    if (_simpleIcons.containsKey(title)) {
+      return SvgPicture.asset(
+        _getIconPath(provider),
+        semanticsLabel: title,
+        colorFilter: ColorFilter.mode(
+          Color(int.parse("0xFF" + _simpleIcons[title]!)),
+          BlendMode.srcIn,
+        ),
+      );
+    } else {
+      return Text(title);
+    }
+  }
+
+  Future<void> _loadJson() async {
+    final data = await rootBundle
+        .loadString('assets/simple-icons/_data/simple-icons.json');
+    final result = json.decode(data);
+    Logger("IconUtils").info(result["icons"].length);
+    for (final icon in result["icons"]) {
+      _simpleIcons[icon["title"].toString().toLowerCase()] = icon["hex"];
+    }
+    Logger("IconUtils").info(_simpleIcons);
+  }
+
+  String _getIconPath(String provider) {
+    final title = _getProviderTitle(provider);
+    return "assets/simple-icons/icons/$title.svg";
+  }
+
+  String _getProviderTitle(String provider) {
+    return provider.split(".")[0].toLowerCase();
+  }
+}

pubspec.lock

@@ -589,6 +589,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.2.0"
+  flutter_svg:
+    dependency: "direct main"
+    description:
+      name: flutter_svg
+      sha256: f991fdb1533c3caeee0cdc14b04f50f0c3916f0dbcbc05237ccbe4e3c6b93f3f
+      url: "https://pub.dev"
+    source: hosted
+    version: "2.0.5"
   flutter_test:
     dependency: "direct dev"
     description: flutter
@@ -1556,6 +1564,30 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "3.0.7"
+  vector_graphics:
+    dependency: transitive
+    description:
+      name: vector_graphics
+      sha256: ea8d3fc7b2e0f35de38a7465063ecfcf03d8217f7962aa2a6717132cb5d43a79
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.5"
+  vector_graphics_codec:
+    dependency: transitive
+    description:
+      name: vector_graphics_codec
+      sha256: a5eaa5d19e123ad4f61c3718ca1ed921c4e6254238d9145f82aa214955d9aced
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.5"
+  vector_graphics_compiler:
+    dependency: transitive
+    description:
+      name: vector_graphics_compiler
+      sha256: "15edc42f7eaa478ce854eaf1fbb9062a899c0e4e56e775dd73b7f4709c97c4ca"
+      url: "https://pub.dev"
+    source: hosted
+    version: "1.1.5"
   vector_math:
     dependency: transitive
     description:

pubspec.yaml

@@ -44,6 +44,7 @@ dependencies:
     git:
       url: https://github.com/ente-io/flutter_sodium.git
   flutter_speed_dial: ^6.2.0
+  flutter_svg: ^2.0.5
   fluttertoast: ^8.1.1
   google_nav_bar: ^5.0.5 #supported
   http: ^0.13.4
@@ -93,6 +94,7 @@ flutter:
   assets:
     - assets/
     - assets/simple-icons/icons/
+    - assets/simple-icons/_data/
 
   fonts:
     - family: Inter