Refactor UI components across various screens to use SVG avatars, enhance biometric authentication check, and improve code readability with consistent formatting.

2025-06-02 10:42:54 +05:30
parent a2d1ac5226
commit 0d2dfc817e
17 changed files with 346 additions and 231 deletions
--- a/lib/features/card/screens/block_card_screen.dart
+++ b/lib/features/card/screens/block_card_screen.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:intl/intl.dart';
 import 'package:material_symbols_icons/material_symbols_icons.dart';

@@ -9,7 +10,7 @@ class BlockCardScreen extends StatefulWidget {
  State<BlockCardScreen> createState() => _BlockCardScreen();
 }

-class _BlockCardScreen extends State<BlockCardScreen>{
+class _BlockCardScreen extends State<BlockCardScreen> {
  final _formKey = GlobalKey<FormState>();
  final _cardController = TextEditingController();
  final _cvvController = TextEditingController();
@@ -54,24 +55,33 @@ class _BlockCardScreen extends State<BlockCardScreen>{
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
-        leading: IconButton(icon: const Icon(Symbols.arrow_back_ios_new),
+        leading: IconButton(
+          icon: const Icon(Symbols.arrow_back_ios_new),
          onPressed: () {
            Navigator.pop(context);
-          },),
-        title: const Text('Block Card', style: TextStyle(color: Colors.black,
-            fontWeight: FontWeight.w500),),
+          },
+        ),
+        title: const Text(
+          'Block Card',
+          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
+        ),
        centerTitle: false,
-        actions: const [
+        actions: [
          Padding(
-            padding: EdgeInsets.only(right: 10.0),
+            padding: const EdgeInsets.only(right: 10.0),
            child: CircleAvatar(
-              backgroundImage: AssetImage('assets/images/avatar.jpg'), // Replace with your image
+              backgroundColor: Colors.grey[200],
              radius: 20,
+              child: SvgPicture.asset(
+                'assets/images/avatar_male.svg',
+                width: 40,
+                height: 40,
+                fit: BoxFit.cover,
+              ),
            ),
          ),
        ],
      ),
-
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Form(
@@ -96,8 +106,9 @@ class _BlockCardScreen extends State<BlockCardScreen>{
                ),
                keyboardType: TextInputType.number,
                textInputAction: TextInputAction.next,
-                validator: (value) =>
-                value != null && value.length == 16 ? null : 'Enter valid card number',
+                validator: (value) => value != null && value.length == 16
+                    ? null
+                    : 'Enter valid card number',
              ),
              const SizedBox(height: 24),
              Row(
@@ -121,8 +132,9 @@ class _BlockCardScreen extends State<BlockCardScreen>{
                      keyboardType: TextInputType.number,
                      textInputAction: TextInputAction.next,
                      obscureText: true,
-                      validator: (value) =>
-                      value != null && value.length == 3 ? null : 'CVV must be 3 digits',
+                      validator: (value) => value != null && value.length == 3
+                          ? null
+                          : 'CVV must be 3 digits',
                    ),
                  ),
                  const SizedBox(width: 16),
@@ -145,8 +157,9 @@ class _BlockCardScreen extends State<BlockCardScreen>{
                          borderSide: BorderSide(color: Colors.black, width: 2),
                        ),
                      ),
-                      validator: (value) =>
-                      value != null && value.isNotEmpty ? null : 'Select expiry date',
+                      validator: (value) => value != null && value.isNotEmpty
+                          ? null
+                          : 'Select expiry date',
                    ),
                  ),
                ],
@@ -170,8 +183,9 @@ class _BlockCardScreen extends State<BlockCardScreen>{
                ),
                textInputAction: TextInputAction.done,
                keyboardType: TextInputType.phone,
-                validator: (value) =>
-                value != null && value.length >= 10 ? null : 'Enter valid phone number',
+                validator: (value) => value != null && value.length >= 10
+                    ? null
+                    : 'Enter valid phone number',
              ),
              const SizedBox(height: 45),
              Align(
@@ -196,5 +210,4 @@ class _BlockCardScreen extends State<BlockCardScreen>{
      ),
    );
  }
-
-}
+}
--- a/lib/features/card/screens/card_management_screen.dart
+++ b/lib/features/card/screens/card_management_screen.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:kmobile/features/card/screens/block_card_screen.dart';
 import 'package:kmobile/features/card/screens/card_pin_change_details_screen.dart';
 import 'package:material_symbols_icons/material_symbols_icons.dart';
@@ -10,60 +11,70 @@ class CardManagementScreen extends StatefulWidget {
  State<CardManagementScreen> createState() => _CardManagementScreen();
 }

-class _CardManagementScreen extends State<CardManagementScreen>{
+class _CardManagementScreen extends State<CardManagementScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: false,
-        title: const Text('Card Management', style: TextStyle(color: Colors.black,
-            fontWeight: FontWeight.w500),),
+        title: const Text(
+          'Card Management',
+          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
+        ),
        centerTitle: false,
-        actions: const [
+        actions: [
          Padding(
-            padding: EdgeInsets.only(right: 10.0),
+            padding: const EdgeInsets.only(right: 10.0),
            child: CircleAvatar(
-              backgroundImage: AssetImage('assets/images/avatar.jpg'), // Replace with your image
+              backgroundColor: Colors.grey[200],
              radius: 20,
+              child: SvgPicture.asset(
+                'assets/images/avatar_male.svg',
+                width: 40,
+                height: 40,
+                fit: BoxFit.cover,
+              ),
            ),
          ),
        ],
      ),
-
      body: ListView(
        children: [
          CardManagementTile(
            icon: Symbols.add,
            label: 'Apply Debit Card',
-            onTap: () {
-
-            },
+            onTap: () {},
+          ),
+          const Divider(
+            height: 1,
          ),
-
-          const Divider(height: 1,),
-
          CardManagementTile(
            icon: Symbols.remove_moderator,
            label: 'Block / Unblock Card',
            onTap: () {
-              Navigator.push(context, MaterialPageRoute(
-                  builder: (context) => const BlockCardScreen()));
+              Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                      builder: (context) => const BlockCardScreen()));
            },
          ),
-
-          const Divider(height: 1,),
-
+          const Divider(
+            height: 1,
+          ),
          CardManagementTile(
            icon: Symbols.password_2,
            label: 'Change Card PIN',
            onTap: () {
-              Navigator.push(context, MaterialPageRoute(
-                  builder: (context) => const CardPinChangeDetailsScreen()));
+              Navigator.push(
+                  context,
+                  MaterialPageRoute(
+                      builder: (context) =>
+                          const CardPinChangeDetailsScreen()));
            },
          ),
-
-          const Divider(height: 1,),
-
+          const Divider(
+            height: 1,
+          ),
        ],
      ),
    );
@@ -92,4 +103,3 @@ class CardManagementTile extends StatelessWidget {
    );
  }
 }
-
--- a/lib/features/card/screens/card_pin_change_details_screen.dart
+++ b/lib/features/card/screens/card_pin_change_details_screen.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:intl/intl.dart';
 import 'package:kmobile/features/card/screens/card_pin_set_screen.dart';
 import 'package:material_symbols_icons/material_symbols_icons.dart';
@@ -7,10 +8,11 @@ class CardPinChangeDetailsScreen extends StatefulWidget {
  const CardPinChangeDetailsScreen({super.key});

  @override
-  State<CardPinChangeDetailsScreen> createState() => _CardPinChangeDetailsScreen();
+  State<CardPinChangeDetailsScreen> createState() =>
+      _CardPinChangeDetailsScreen();
 }

-class _CardPinChangeDetailsScreen extends State<CardPinChangeDetailsScreen>{
+class _CardPinChangeDetailsScreen extends State<CardPinChangeDetailsScreen> {
  final _formKey = GlobalKey<FormState>();
  final _cardController = TextEditingController();
  final _cvvController = TextEditingController();
@@ -43,24 +45,33 @@ class _CardPinChangeDetailsScreen extends State<CardPinChangeDetailsScreen>{
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
-        leading: IconButton(icon: const Icon(Symbols.arrow_back_ios_new),
+        leading: IconButton(
+          icon: const Icon(Symbols.arrow_back_ios_new),
          onPressed: () {
            Navigator.pop(context);
-          },),
-        title: const Text('Card Details', style: TextStyle(color: Colors.black,
-            fontWeight: FontWeight.w500),),
+          },
+        ),
+        title: const Text(
+          'Card Details',
+          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
+        ),
        centerTitle: false,
-        actions: const [
+        actions: [
          Padding(
-            padding: EdgeInsets.only(right: 10.0),
+            padding: const EdgeInsets.only(right: 10.0),
            child: CircleAvatar(
-              backgroundImage: AssetImage('assets/images/avatar.jpg'), // Replace with your image
+              backgroundColor: Colors.grey[200],
              radius: 20,
+              child: SvgPicture.asset(
+                'assets/images/avatar_male.svg',
+                width: 40,
+                height: 40,
+                fit: BoxFit.cover,
+              ),
            ),
          ),
        ],
      ),
-
      body: Padding(
        padding: const EdgeInsets.all(10.0),
        child: Form(
@@ -85,8 +96,9 @@ class _CardPinChangeDetailsScreen extends State<CardPinChangeDetailsScreen>{
                ),
                keyboardType: TextInputType.number,
                textInputAction: TextInputAction.next,
-                validator: (value) =>
-                value != null && value.length == 16 ? null : 'Enter valid card number',
+                validator: (value) => value != null && value.length == 16
+                    ? null
+                    : 'Enter valid card number',
              ),
              const SizedBox(height: 24),
              Row(
@@ -110,8 +122,9 @@ class _CardPinChangeDetailsScreen extends State<CardPinChangeDetailsScreen>{
                      keyboardType: TextInputType.number,
                      textInputAction: TextInputAction.next,
                      obscureText: true,
-                      validator: (value) =>
-                      value != null && value.length == 3 ? null : 'CVV must be 3 digits',
+                      validator: (value) => value != null && value.length == 3
+                          ? null
+                          : 'CVV must be 3 digits',
                    ),
                  ),
                  const SizedBox(width: 16),
@@ -134,8 +147,9 @@ class _CardPinChangeDetailsScreen extends State<CardPinChangeDetailsScreen>{
                          borderSide: BorderSide(color: Colors.black, width: 2),
                        ),
                      ),
-                      validator: (value) =>
-                      value != null && value.isNotEmpty ? null : 'Select expiry date',
+                      validator: (value) => value != null && value.isNotEmpty
+                          ? null
+                          : 'Select expiry date',
                    ),
                  ),
                ],
@@ -159,8 +173,9 @@ class _CardPinChangeDetailsScreen extends State<CardPinChangeDetailsScreen>{
                ),
                textInputAction: TextInputAction.done,
                keyboardType: TextInputType.phone,
-                validator: (value) =>
-                value != null && value.length >= 10 ? null : 'Enter valid phone number',
+                validator: (value) => value != null && value.length >= 10
+                    ? null
+                    : 'Enter valid phone number',
              ),
              const SizedBox(height: 45),
              Align(
@@ -185,5 +200,4 @@ class _CardPinChangeDetailsScreen extends State<CardPinChangeDetailsScreen>{
      ),
    );
  }
-
-}
+}
--- a/lib/features/card/screens/card_pin_set_screen.dart
+++ b/lib/features/card/screens/card_pin_set_screen.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter_svg/svg.dart';
 import 'package:material_symbols_icons/material_symbols_icons.dart';

 class CardPinSetScreen extends StatefulWidget {
@@ -8,7 +9,7 @@ class CardPinSetScreen extends StatefulWidget {
  State<CardPinSetScreen> createState() => _CardPinSetScreen();
 }

-class _CardPinSetScreen extends State<CardPinSetScreen>{
+class _CardPinSetScreen extends State<CardPinSetScreen> {
  final _formKey = GlobalKey<FormState>();
  final _pinController = TextEditingController();
  final _confirmPinController = TextEditingController();
@@ -44,24 +45,33 @@ class _CardPinSetScreen extends State<CardPinSetScreen>{
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
-        leading: IconButton(icon: const Icon(Symbols.arrow_back_ios_new),
+        leading: IconButton(
+          icon: const Icon(Symbols.arrow_back_ios_new),
          onPressed: () {
            Navigator.pop(context);
-          },),
-        title: const Text('Card PIN', style: TextStyle(color: Colors.black,
-            fontWeight: FontWeight.w500),),
+          },
+        ),
+        title: const Text(
+          'Card PIN',
+          style: TextStyle(color: Colors.black, fontWeight: FontWeight.w500),
+        ),
        centerTitle: false,
-        actions: const [
+        actions: [
          Padding(
-            padding: EdgeInsets.only(right: 10.0),
+            padding: const EdgeInsets.only(right: 10.0),
            child: CircleAvatar(
-              backgroundImage: AssetImage('assets/images/avatar.jpg'), // Replace with your image
+              backgroundColor: Colors.grey[200],
              radius: 20,
+              child: SvgPicture.asset(
+                'assets/images/avatar_male.svg',
+                width: 40,
+                height: 40,
+                fit: BoxFit.cover,
+              ),
            ),
          ),
        ],
      ),
-
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
@@ -145,4 +155,4 @@ class _CardPinSetScreen extends State<CardPinSetScreen>{
      ),
    );
  }
-}
+}