added country_code_picker package to link phone feature

packages/design_system/lib/design_system.dart

@@ -9,4 +9,5 @@ export 'src/snackbars/snackbar.dart';
 export 'src/buttons/primary_button.dart';
 export 'src/buttons/secondary_button.dart';
 export 'src/buttons/custom_text_button.dart';
-export 'src/dropdowns/dropdown.dart';
+export 'src/dropdowns/dropdown.dart';
+export 'src/dropdowns/country_prefix_picker.dart';

packages/design_system/lib/src/dropdowns/country_prefix_picker.dart

@@ -0,0 +1,79 @@
+import 'package:country_code_picker/country_code_picker.dart';
+import 'package:flutter/material.dart';
+
+class CountryPrefixPicker extends StatelessWidget {
+  const CountryPrefixPicker({
+    super.key,
+    required this.onChanged,
+    this.initialCountryCode = '+34',
+    this.radius = 12,
+    this.width = 90,
+    this.height = 55,
+    this.borderColor = const Color(0xFF4B4B4B),
+    this.backgroundColor = Colors.white,
+  });
+
+  final ValueChanged<CountryCode> onChanged;
+  final String initialCountryCode;
+
+  final double radius;
+  final double width;
+  final double height;
+  final Color borderColor;
+  final Color backgroundColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: width,
+      height: height,
+      child: CountryCodePicker(
+        onChanged: onChanged,
+        initialSelection: initialCountryCode,
+        showFlag: false,
+        showDropDownButton: false,
+        hideMainText: true,
+        padding: EdgeInsets.zero,
+        builder: (CountryCode? country) {
+          if (country == null) {
+            return const SizedBox.shrink();
+          }
+
+          return InputDecorator(
+            decoration: InputDecoration(
+              isDense: false,
+              contentPadding: const EdgeInsets.symmetric(
+                horizontal: 12,
+                vertical: 16,
+              ),
+              filled: true,
+              fillColor: backgroundColor,
+              enabledBorder: OutlineInputBorder(
+                borderRadius: BorderRadius.all(Radius.circular(radius)),
+                borderSide: BorderSide(color: borderColor),
+              ),
+              border: OutlineInputBorder(
+                borderRadius: BorderRadius.all(Radius.circular(radius)),
+                borderSide: BorderSide(color: borderColor),
+              ),
+            ),
+            child: Row(
+              mainAxisAlignment: MainAxisAlignment.spaceBetween,
+              children: [
+                if (country.flagUri != null)
+                  Image.asset(
+                    country.flagUri!,
+                    package: 'country_code_picker',
+                    width: 24,
+                    height: 24,
+                    fit: BoxFit.cover,
+                  ),
+                const Icon(Icons.arrow_drop_down, size: 24),
+              ],
+            ),
+          );
+        },
+      ),
+    );
+  }
+}

packages/design_system/lib/src/inputs/textfields.dart

@@ -1,18 +1,17 @@
-import 'package:design_system/design_system.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/services.dart';
-import 'package:flutter_riverpod/flutter_riverpod.dart';
 
-class CustomTextField extends StatefulWidget{
-  bool? showPassword;
+class CustomTextField extends StatefulWidget {
+  final bool? showPassword;
   final bool numeric;
   final String hint;
   final String label;
   final int? lines;
   final ValueChanged<String>? onChanged;
   final int? length;
+  final TextEditingController? controller;
 
-  CustomTextField({
+  const CustomTextField({
     super.key,
     this.showPassword,
     this.numeric = false,
@@ -21,63 +20,74 @@ class CustomTextField extends StatefulWidget{
     this.lines,
     this.length,
     this.onChanged,
+    this.controller,
   });
 
   @override
   State<CustomTextField> createState() => CustomTextFieldState();
 }
 
-class CustomTextFieldState extends State<CustomTextField>{
+class CustomTextFieldState extends State<CustomTextField> {
+  late bool _showPassword;
+
+  @override
+  void initState() {
+    super.initState();
+    _showPassword = widget.showPassword ?? true;
+  }
 
   @override
   Widget build(BuildContext context) {
-
     return Column(
       spacing: 8,
       children: [
-          ?widget.label == '' ? null : Align(
-          alignment: Alignment.bottomLeft,
-          child: Text(
-            widget.label,
-            style: TextStyle(fontSize: 14, letterSpacing: 0),
-          )
-        ),
+        if (widget.label.isNotEmpty)
+          Align(
+            alignment: Alignment.bottomLeft,
+            child: Text(
+              widget.label,
+              style: const TextStyle(fontSize: 14, letterSpacing: 0),
+            ),
+          ),
         TextFormField(
-          keyboardType: widget.numeric? TextInputType.number : TextInputType.text,
-          obscureText: !(widget.showPassword ?? true),
-          enableSuggestions: widget.showPassword ?? true,
-          autocorrect: !(widget.showPassword ?? false),
-          style: TextStyle(color: Color(0xFF4B4B4B)),
-          inputFormatters: widget.numeric? [
-           FilteringTextInputFormatter.digitsOnly
-          ] : [],
+          controller: widget.controller,
+          keyboardType: widget.numeric
+              ? TextInputType.number
+              : TextInputType.text,
+          obscureText: !_showPassword,
+          enableSuggestions: _showPassword,
+          autocorrect: !_showPassword,
+          style: const TextStyle(color: Color(0xFF4B4B4B)),
+          inputFormatters: widget.numeric
+              ? <TextInputFormatter>[FilteringTextInputFormatter.digitsOnly]
+              : const <TextInputFormatter>[],
           decoration: InputDecoration(
             counterText: "",
             hintText: widget.hint,
-            //labelText: widget.label,
-            //floatingLabelBehavior: FloatingLabelBehavior.always,
-            border: OutlineInputBorder(
+            border: const OutlineInputBorder(
               borderRadius: BorderRadius.all(Radius.circular(12)),
               borderSide: BorderSide(color: Color(0xFF4B4B4B)),
-              gapPadding: 16
+              gapPadding: 16,
             ),
-            suffixIcon: widget.showPassword!=null ? IconButton(
-              icon: Icon(widget.showPassword!
-              ? Icons.visibility_off
-                : Icons.visibility),
-              onPressed: () {
-                setState(() {
-                  widget.showPassword = !widget.showPassword!;
-                });
-              },
-            ) : null,
+            suffixIcon: widget.showPassword != null
+                ? IconButton(
+                    icon: Icon(
+                      _showPassword ? Icons.visibility_off : Icons.visibility,
+                    ),
+                    onPressed: () {
+                      setState(() {
+                        _showPassword = !_showPassword;
+                      });
+                    },
+                  )
+                : null,
           ),
           minLines: widget.lines ?? 1,
           maxLines: widget.lines ?? 1,
           maxLength: widget.length,
-          onChanged: widget.onChanged ?? (_)=>{},
-        )
+          onChanged: widget.onChanged,
+        ),
       ],
     );
   }
-}
+}

packages/design_system/pubspec.yaml

@@ -16,6 +16,7 @@ dependencies:
     path: ../utils
   flutter_riverpod: ^3.0.3
   get_it: ^9.0.5
+  country_code_picker: ^3.4.1
   fonts:
     path: ../../packages/fonts