More work with cards and themes

assets/translations/en.json

@@ -224,5 +224,6 @@
   "qr_scanner_flash_off": "FLASH OFF",
   "qr_scanner_title": "Scan QR Code",
   "display_amounts_du": "Display amounts in DU",
-  "wallet_already_imported": "Wallet already imported"
+  "wallet_already_imported": "Wallet already imported",
+  "card_theme_select": "Select a theme for your card"
 }

assets/translations/es.json

@@ -227,5 +227,6 @@
   "qr_scanner_flash_off": "FLASH OFF",
   "qr_scanner_title": "Escanea un QR Code",
   "display_amounts_du": "Mostrar importes en DU",
-  "wallet_already_imported": "Monedero ya importado"
+  "wallet_already_imported": "Monedero ya importado",
+  "card_theme_select": "Selecciona un tema para tu tarjeta"
 }

lib/data/models/credit_card_theme_selector.dart

+import 'package:flutter/material.dart';
+
+import '../../ui/widgets/first_screen/credit_card_theme_item.dart';
+import 'cesium_card.dart';
+import 'credit_card_themes.dart';
+
+class CardThemeSelector extends StatelessWidget {
+  const CardThemeSelector({super.key, required this.card});
+
+  final CesiumCard card;
+
+  @override
+  Widget build(BuildContext context) {
+    return GridView.builder(
+      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
+        crossAxisCount: 2,
+        childAspectRatio: 1.58,
+      ),
+      itemCount: CreditCardThemes.themes.length,
+      itemBuilder: (BuildContext context, int index) {
+        final CreditCardTheme themeData = CreditCardThemes.themes[index];
+        return GestureDetector(
+          onTap: () {},
+          child: Center(
+            child: CreditCardThemeItem(themeIndex: index),
+          ),
+        );
+      },
+    );
+  }
+}

lib/data/models/credit_card_themes.dart

-import 'dart:ui';
-
+import 'package:flutter/material.dart';
 import 'package:json_annotation/json_annotation.dart';
 
 import 'is_json_serializable.dart';
@@ -7,46 +6,53 @@ import 'is_json_serializable.dart';
 part 'credit_card_themes.g.dart';
 
 class CreditCardThemes {
-  static const CreditCardTheme theme1 = CreditCardTheme(
-    Color(0xFF1A237E),
-    Color(0xFFFFBA00),
-  );
+  static const CreditCardTheme theme1 =
+      CreditCardTheme(Color(0xFF05112B), Color(0xFF085476));
   static const CreditCardTheme theme2 = CreditCardTheme(
-    Color(0xFFEC1C24),
-    Color(0xFFFF5F00),
+    Colors.blueGrey,
+    Colors.pink,
   );
   static const CreditCardTheme theme3 = CreditCardTheme(
-    Color(0xFF0077B5),
     Color(0xFF00A9E0),
+    Color(0xFF0077B5),
   );
   static const CreditCardTheme theme4 = CreditCardTheme(
-    Color(0xFF8C1D40),
     Color(0xFFFDB813),
+    Color(0xFF8C1D40),
   );
   static const CreditCardTheme theme5 = CreditCardTheme(
-    Color(0xFF117AC9),
-    Color(0xFFEE7203),
-  );
-  static const CreditCardTheme theme6 = CreditCardTheme(
-    Color(0xFF00529B),
-    Color(0xFF00AEEF),
+    Colors.blueGrey,
+    Colors.deepPurple,
   );
+  static const CreditCardTheme theme6 =
+      CreditCardTheme(Colors.lightGreen, Colors.green);
   static const CreditCardTheme theme7 = CreditCardTheme(
-    Color(0xFFE41422),
-    Color(0xFF1C5D8D),
+    Colors.black54,
+    Colors.black,
   );
   static const CreditCardTheme theme8 = CreditCardTheme(
+    Colors.blueGrey,
     Color(0xFF004678),
-    Color(0xFFB5C8E5),
   );
   static const CreditCardTheme theme9 = CreditCardTheme(
     Color(0xFFCE002D),
     Color(0xFF673F1E),
   );
-  static const CreditCardTheme theme10 = CreditCardTheme(
-    Color(0xFFDD5600),
-    Color(0xFFC6A700),
-  );
+  static const CreditCardTheme theme10 =
+      CreditCardTheme(Color(0xFF598040), Color(0xFF225500));
+
+  static const List<CreditCardTheme> themes = <CreditCardTheme>[
+    CreditCardThemes.theme1,
+    CreditCardThemes.theme2,
+    CreditCardThemes.theme3,
+    CreditCardThemes.theme4,
+    CreditCardThemes.theme5,
+    CreditCardThemes.theme6,
+    CreditCardThemes.theme7,
+    CreditCardThemes.theme8,
+    CreditCardThemes.theme9,
+    CreditCardThemes.theme10,
+  ];
 }
 
 @JsonSerializable()

lib/main.dart

@@ -10,7 +10,6 @@ import 'package:flutter/material.dart';
 import 'package:flutter_bloc/flutter_bloc.dart';
 import 'package:flutter_displaymode/flutter_displaymode.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
-import 'package:ginkgo/ui/pay_helper.dart';
 import 'package:hive_flutter/hive_flutter.dart';
 import 'package:hydrated_bloc/hydrated_bloc.dart';
 import 'package:introduction_screen/introduction_screen.dart';
@@ -44,6 +43,7 @@ import 'shared_prefs.dart';
 import 'ui/contacts_cache.dart';
 import 'ui/logger.dart';
 import 'ui/notification_controller.dart';
+import 'ui/pay_helper.dart';
 import 'ui/screens/skeleton_screen.dart';
 import 'ui/ui_helpers.dart';
 import 'ui/widgets/connectivity_widget_wrapper_wrapper.dart';

lib/ui/ui_helpers.dart

@@ -547,3 +547,5 @@ bool isDark(BuildContext context) =>
 bool get isIOS => !kIsWeb && Platform.isIOS;
 
 const String userNameSuffix = ' ❥';
+
+const double cardAspectRatio = 1.58;

lib/ui/widgets/first_screen/credit_card.dart

@@ -28,7 +28,7 @@ class CreditCard extends StatelessWidget {
           borderRadius: BorderRadius.circular(cardRadius),
         ),
         child: AspectRatio(
-            aspectRatio: 1.58, // Credit cart aspect ratio
+            aspectRatio: cardAspectRatio, // Credit cart aspect ratio
             child: Container(
               decoration: BoxDecoration(
                 borderRadius: BorderRadius.circular(cardRadius),

lib/ui/widgets/first_screen/credit_card_mini.dart

+import 'dart:math';
+
+import 'package:easy_localization/easy_localization.dart';
 import 'package:flutter/material.dart';
 
 import '../../../data/models/cesium_card.dart';
+import '../../../data/models/credit_card_theme_selector.dart';
 import '../../../data/models/credit_card_themes.dart';
 import '../../ui_helpers.dart';
 import 'card_name_editable.dart';
 import 'card_text_style.dart';
 
-class CreditCardMini extends StatelessWidget {
+class CreditCardMini extends StatefulWidget {
   const CreditCardMini({super.key, required this.card});
 
   final CesiumCard card;
 
+  @override
+  State<CreditCardMini> createState() => _CreditCardMiniState();
+}
+
+class _CreditCardMiniState extends State<CreditCardMini> {
+  bool _showSettingsIcon = false;
+
+  void _showThemeSelector(BuildContext context) {
+    showDialog(
+      context: context,
+      builder: (BuildContext context) {
+        return AlertDialog(
+          title: Text(tr('card_theme_select')),
+          content: SizedBox(
+              width: double.maxFinite,
+              child: CardThemeSelector(card: widget.card)),
+        );
+      },
+    );
+  }
+
   @override
   Widget build(BuildContext context) {
     const double cardRadius = 10.0;
     final bool bigDevice = bigScreen(context);
     final double cardInternalElPadding = bigDevice ? 5 : 6.0;
+    final int themeIndex = Random().nextInt(10);
     return Padding(
         padding: const EdgeInsets.all(10),
         child: Card(
@@ -24,7 +50,7 @@ class CreditCardMini extends StatelessWidget {
               borderRadius: BorderRadius.circular(cardRadius),
             ),
             child: AspectRatio(
-                aspectRatio: 1.58, // Credit cart aspect ratio
+                aspectRatio: cardAspectRatio, // Credit cart aspect ratio
                 child: Container(
                     decoration: BoxDecoration(
                       borderRadius: BorderRadius.circular(cardRadius),
@@ -39,8 +65,8 @@ class CreditCardMini extends StatelessWidget {
                         begin: Alignment.bottomLeft,
                         end: Alignment.topRight,
                         colors: <Color>[
-                          CreditCardThemes.theme3.primaryColor,
-                          CreditCardThemes.theme3.secondaryColor,
+                          CreditCardThemes.themes[themeIndex].primaryColor,
+                          CreditCardThemes.themes[themeIndex].secondaryColor,
                           // card.theme.primaryColor,
                           // card.theme.secondaryColor,
                         ],
@@ -49,10 +75,24 @@ class CreditCardMini extends StatelessWidget {
                     child: Padding(
                       padding: const EdgeInsets.all(10),
                       child: Stack(children: <Widget>[
+                        Positioned(
+                          top: -10,
+                          right: -10,
+                          child: Visibility(
+                            visible: true,
+                            child: FloatingActionButton(
+                              backgroundColor: Colors.transparent,
+                              elevation: 0,
+                              onPressed: () => _showThemeSelector(context),
+                              child: const Icon(Icons.settings,
+                                  color: Colors.white),
+                            ),
+                          ),
+                        ),
                         Padding(
                             padding: const EdgeInsets.fromLTRB(120, 10, 0, 0),
                             child: Opacity(
-                              opacity: 0.1,
+                              opacity: 0.2,
                               child: Image.asset('assets/img/gbrevedot_alt.png',
                                   width: 100, height: 100),
                             )),
@@ -60,7 +100,7 @@ class CreditCardMini extends StatelessWidget {
                             crossAxisAlignment: CrossAxisAlignment.start,
                             // mainAxisAlignment: MainAxisAlignment.start,
                             children: <Widget>[
-                              if (card.name.isNotEmpty)
+                              if (widget.card.name.isNotEmpty)
                                 Padding(
                                     padding: EdgeInsets.symmetric(
                                         horizontal: cardInternalElPadding,
@@ -68,9 +108,8 @@ class CreditCardMini extends StatelessWidget {
                                     child: Row(children: <Widget>[
                                       Expanded(
                                           child: CardNameText(
-                                        currentText: card.name,
-                                        onTap: () {},
-                                      )),
+                                              currentText: widget.card.name,
+                                              onTap: () {})),
                                     ])),
                               Padding(
                                   padding: EdgeInsets.symmetric(
@@ -80,11 +119,11 @@ class CreditCardMini extends StatelessWidget {
                                     GestureDetector(
                                         onTap: () => showQrDialog(
                                             context: context,
-                                            publicKey: card.pubKey),
+                                            publicKey: widget.card.pubKey),
                                         child: FittedBox(
                                             fit: BoxFit.scaleDown,
                                             child: Text(
-                                              '${card.pubKey.substring(0, 4)} ${card.pubKey.substring(4, 8)}',
+                                              '$themeIndex ${widget.card.pubKey.substring(0, 4)} ${widget.card.pubKey.substring(4, 8)}',
                                               style: cardTextStyle(context,
                                                   fontSize: 16),
                                             ))),

lib/ui/widgets/first_screen/credit_card_theme_item.dart

+import 'package:flutter/material.dart';
+
+import '../../../data/models/credit_card_themes.dart';
+import '../../ui_helpers.dart';
+import 'card_text_style.dart';
+
+class CreditCardThemeItem extends StatelessWidget {
+  const CreditCardThemeItem({super.key, required this.themeIndex});
+
+  final int themeIndex;
+
+  @override
+  Widget build(BuildContext context) {
+    const double cardRadius = 10.0;
+    return Padding(
+        padding: const EdgeInsets.all(1),
+        child: Card(
+            elevation: 4.0,
+            shape: RoundedRectangleBorder(
+              borderRadius: BorderRadius.circular(cardRadius),
+            ),
+            child: AspectRatio(
+                aspectRatio: cardAspectRatio, // Credit cart aspect ratio
+                child: Container(
+                    decoration: BoxDecoration(
+                      borderRadius: BorderRadius.circular(cardRadius),
+                      boxShadow: <BoxShadow>[
+                        BoxShadow(
+                          color: Colors.grey[400]!,
+                          blurRadius: 3.0,
+                          spreadRadius: 1.0,
+                        )
+                      ],
+                      gradient: LinearGradient(
+                        begin: Alignment.bottomLeft,
+                        end: Alignment.topRight,
+                        colors: <Color>[
+                          CreditCardThemes.themes[themeIndex].primaryColor,
+                          CreditCardThemes.themes[themeIndex].secondaryColor,
+                          // card.theme.primaryColor,
+                          // card.theme.secondaryColor,
+                        ],
+                      ),
+                    ),
+                    child: Padding(
+                      padding: const EdgeInsets.all(10),
+                      child: Stack(children: <Widget>[
+                        if (inDevelopment)
+                          Text('${themeIndex + 1}',
+                              style: cardTextStyle(context, fontSize: 14)),
+                        Padding(
+                            padding: const EdgeInsets.fromLTRB(40, 0, 0, 0),
+                            child: Opacity(
+                              opacity: 0.2,
+                              child: Image.asset('assets/img/gbrevedot_alt.png',
+                                  width: 100, height: 100),
+                            )),
+                      ]),
+                    )))));
+  }
+}

lib/ui/widgets/first_screen/g1_textfield.dart

@@ -113,7 +113,7 @@ class _G1PayAmountFieldState extends State<G1PayAmountField> {
                 child: ToggleSwitch(
                   minWidth: 40.0,
                   radiusStyle: true,
-                  initialLabelIndex: 0,
+                  // initialLabelIndex: 0,
                   cornerRadius: 20.0,
                   activeFgColor: Colors.black,
                   inactiveBgColor: Colors.grey[400],