Country picker with flags

openfoodfacts · Jun 27, 2024 · 7677373 · 7677373
1 parent b110334
commit 7677373
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 6 deletions.
diff --git a/packages/smooth_app/lib/generic_lib/widgets/language_selector.dart b/packages/smooth_app/lib/generic_lib/widgets/language_selector.dart
@@ -153,6 +153,7 @@ class LanguageSelector extends StatelessWidget {
           header: SmoothTextFormField(
             type: TextFieldTypes.PLAIN_TEXT,
             hintText: appLocalizations.search,
+            borderRadius: BorderRadius.zero,
             prefixIcon: const Icon(Icons.search),
             controller: languageSelectorController,
             onChanged: (String? query) {

diff --git a/packages/smooth_app/lib/generic_lib/widgets/smooth_text_form_field.dart b/packages/smooth_app/lib/generic_lib/widgets/smooth_text_form_field.dart
@@ -24,6 +24,7 @@ class SmoothTextFormField extends StatefulWidget {
     this.onFieldSubmitted,
     this.autofocus,
     this.focusNode,
+    this.borderRadius,
   });
 
   final TextFieldTypes type;
@@ -40,6 +41,7 @@ class SmoothTextFormField extends StatefulWidget {
   final ValueChanged<String>? onFieldSubmitted;
   final bool? autofocus;
   final FocusNode? focusNode;
+  final BorderRadius? borderRadius;
 
   @override
   State<SmoothTextFormField> createState() => _SmoothTextFormFieldState();
@@ -99,12 +101,12 @@ class _SmoothTextFormFieldState extends State<SmoothTextFormField> {
         ),
         hintText: widget.hintText,
         hintMaxLines: 2,
-        border: const OutlineInputBorder(
-          borderRadius: CIRCULAR_BORDER_RADIUS,
+        border: OutlineInputBorder(
+          borderRadius: widget.borderRadius ?? CIRCULAR_BORDER_RADIUS,
         ),
-        enabledBorder: const OutlineInputBorder(
-          borderRadius: CIRCULAR_BORDER_RADIUS,
-          borderSide: BorderSide(
+        enabledBorder: OutlineInputBorder(
+          borderRadius: widget.borderRadius ?? CIRCULAR_BORDER_RADIUS,
+          borderSide: const BorderSide(
             color: Colors.transparent,
             width: 5.0,
           ),

diff --git a/packages/smooth_app/lib/helpers/strings_helper.dart b/packages/smooth_app/lib/helpers/strings_helper.dart
@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:iso_countries/country.dart';
 
 extension StringExtensions on String {
   /// Returns a list containing all positions of a [charCode]
@@ -138,3 +139,11 @@ class FormattedText extends StatelessWidget {
     );
   }
 }
+
+extension CountryExtension on Country {
+  String get emoji => countryCode.toUpperCase().replaceAllMapped(
+        RegExp(r'[A-Z]'),
+        (Match match) =>
+            String.fromCharCode(match.group(0)!.codeUnitAt(0) + 127397),
+      );
+}
diff --git a/packages/smooth_app/lib/pages/onboarding/country_selector.dart b/packages/smooth_app/lib/pages/onboarding/country_selector.dart
@@ -8,6 +8,7 @@ import 'package:smooth_app/data_models/preferences/user_preferences.dart';
 import 'package:smooth_app/generic_lib/design_constants.dart';
 import 'package:smooth_app/generic_lib/dialogs/smooth_alert_dialog.dart';
 import 'package:smooth_app/generic_lib/widgets/smooth_text_form_field.dart';
+import 'package:smooth_app/helpers/strings_helper.dart';
 import 'package:smooth_app/query/product_query.dart';
 import 'package:smooth_app/widgets/smooth_text.dart';
 
@@ -68,7 +69,7 @@ class _CountrySelectorState extends State<CountrySelector> {
             if (snapshot.hasError) {
               return Text('Fatal Error: ${snapshot.error}');
             } else if (snapshot.connectionState != ConnectionState.done) {
-              return const CircularProgressIndicator.adaptive();
+              return const Center(child: CircularProgressIndicator.adaptive());
             }
             final UserPreferences userPreferences =
                 context.watch<UserPreferences>();
@@ -97,6 +98,7 @@ class _CountrySelectorState extends State<CountrySelector> {
                           header: SmoothTextFormField(
                             type: TextFieldTypes.PLAIN_TEXT,
                             prefixIcon: const Icon(Icons.search),
+                            borderRadius: BorderRadius.zero,
                             controller: _countryController,
                             onChanged: (String? query) {
                               query = query!.trim().getComparisonSafeString();
@@ -134,6 +136,9 @@ class _CountrySelectorState extends State<CountrySelector> {
                                 contentPadding: const EdgeInsets.symmetric(
                                   horizontal: horizontalPadding,
                                 ),
+                                horizontalTitleGap: 0,
+                                leading: Text(country.emoji),
+                                minLeadingWidth: 30.0,
                                 trailing:
                                     selected ? const Icon(Icons.check) : null,
                                 title: TextHighlighter(