Select residence country by searchable name (#64)

frontend/app/lib/kyc/country.dart

@@ -0,0 +1,163 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+import 'package:country_picker/country_picker.dart';
+
+import '../generated/i18n/app_localizations.dart';
+
+class CountryField extends StatelessWidget {
+  const CountryField({
+    super.key,
+    required this.value,
+    required this.onChanged,
+    this.enabled = true,
+  });
+
+  final String value;
+  final ValueChanged<String> onChanged;
+  final bool enabled;
+
+  @override
+  Widget build(BuildContext context) {
+    final l = AppLocalizations.of(context)!;
+    final country = CountryService().findByCode(value);
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.stretch,
+      children: [
+        Text(l.kycCountry, style: Theme.of(context).textTheme.labelLarge),
+        const SizedBox(height: 8),
+        Semantics(
+          label: l.kycCountry,
+          child: OutlinedButton(
+            onPressed: !enabled
+                ? null
+                : () async {
+                    final code = await showDialog<String>(
+                      context: context,
+                      builder: (_) => _CountrySearch(selected: value),
+                    );
+                    if (context.mounted && code != null) onChanged(code);
+                  },
+            style: OutlinedButton.styleFrom(
+              shape: RoundedRectangleBorder(
+                borderRadius: BorderRadius.circular(14),
+              ),
+            ),
+            child: Row(
+              children: [
+                Expanded(
+                  child: Text(
+                    country == null
+                        ? l.kycCountrySelect
+                        : _name(context, country),
+                  ),
+                ),
+                const SizedBox(width: 8),
+                const Icon(Icons.expand_more),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}
+
+String _name(BuildContext context, Country country) =>
+    country.getTranslatedName(context) ?? country.name;
+
+class _CountrySearch extends StatefulWidget {
+  const _CountrySearch({required this.selected});
+
+  final String selected;
+
+  @override
+  State<_CountrySearch> createState() => _CountrySearchState();
+}
+
+class _CountrySearchState extends State<_CountrySearch> {
+  final _query = TextEditingController();
+  final _countries = {
+    for (final country in CountryService().getAll())
+      country.countryCode: country,
+  }.values.toList();
+
+  @override
+  void dispose() {
+    _query.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final l = AppLocalizations.of(context)!;
+    return Focus(
+      autofocus: true,
+      onKeyEvent: (_, event) {
+        if (event is KeyDownEvent &&
+            event.logicalKey == LogicalKeyboardKey.escape) {
+          Navigator.of(context).pop();
+          return KeyEventResult.handled;
+        }
+        return KeyEventResult.ignored;
+      },
+      child: Dialog.fullscreen(
+        child: Scaffold(
+          appBar: AppBar(
+            leading: BackButton(onPressed: () => Navigator.of(context).pop()),
+            title: TextField(
+              key: const ValueKey('country-search'),
+              controller: _query,
+              autofocus: true,
+              decoration: InputDecoration(
+                labelText: l.kycCountrySearch,
+                prefixIcon: const Icon(Icons.search),
+              ),
+              onChanged: (_) => setState(() {}),
+            ),
+            toolbarHeight: 96,
+            actions: [
+              if (_query.text.isNotEmpty)
+                IconButton(
+                  tooltip: l.kycCountryClearSearch,
+                  icon: const Icon(Icons.clear),
+                  onPressed: () => setState(_query.clear),
+                ),
+            ],
+          ),
+          body: _list(context),
+        ),
+      ),
+    );
+  }
+
+  Widget _list(BuildContext context) {
+    final search = _query.text.trim().toLowerCase();
+    final countries = _countries.where((country) {
+      return _name(context, country).toLowerCase().contains(search) ||
+          country.name.toLowerCase().contains(search) ||
+          country.countryCode.toLowerCase() == search;
+    }).toList()..sort((a, b) => _name(context, a).compareTo(_name(context, b)));
+    if (countries.isEmpty) {
+      return Center(
+        child: Padding(
+          padding: const EdgeInsets.all(24),
+          child: Text(AppLocalizations.of(context)!.kycCountryEmpty),
+        ),
+      );
+    }
+    return ListView.builder(
+      itemCount: countries.length,
+      itemBuilder: (context, index) {
+        final country = countries[index];
+        final isSelected = country.countryCode == widget.selected;
+        return ListTile(
+          title: Text(_name(context, country)),
+          selected: isSelected,
+          trailing: isSelected ? const Icon(Icons.check) : null,
+          onTap: () => Navigator.of(context).pop(country.countryCode),
+        );
+      },
+    );
+  }
+}

frontend/app/lib/kyc/profile.dart

@@ -2,6 +2,8 @@ import 'package:flutter/material.dart';
 
 import 'package:sxchnge_kyc/sxchnge_kyc.dart';
 
+import 'country.dart';
+
 import '../generated/i18n/app_localizations.dart';
 
 class ProfileForm extends StatelessWidget {
@@ -48,17 +50,11 @@ class ProfileForm extends StatelessWidget {
           onChanged: (value) => update(birth: value.trim()),
         ),
         const SizedBox(height: 16),
-        TextFormField(
+        CountryField(
           key: const ValueKey('kyc-country'),
-          initialValue: p.profile.residenceCountry,
+          value: p.profile.residenceCountry,
           enabled: !p.busy,
-          maxLength: 2,
-          textCapitalization: TextCapitalization.characters,
-          decoration: InputDecoration(
-            labelText: l.kycCountry,
-            helperText: l.kycCountryHelp,
-          ),
-          onChanged: (value) => update(country: value.trim().toUpperCase()),
+          onChanged: (value) => update(country: value),
         ),
         if (!p.profile.isComplete) Text(l.kycProfileRequired),
       ],