A flutter package for showing a country code selector (default value)

Question

How to set country code selector (default value) based on selected country on the phone

    Widget build(BuildContext context) => new Scaffold(
     body: Center(
       child: CountryCodePicker(
         onChanged: print,
         // Initial selection and favorite can be one of code ('IT') OR dial_code('+39')
         initialSelection: 'IT',
         favorite: ['+39','FR'],
         // optional. Shows only country name and flag
         showCountryOnly: false,
         // optional. Shows only country name and flag when popup is closed.
         showOnlyCountryWhenClosed: false,
         // optional. aligns the flag and the Text left
         alignLeft: false,
       ),
     ),
 );

Answer 1

It looks like you are using the package country_code_picker.

You could get some useful information about the user's default language preference from window.locale from dart:ui, here you can properties like the countryCode and languagueCode, which could be useful for setting a default language. Albeit, it is not certain this is the users preferred language, but an indicator nonetheless.

It appears this package lists supported countries in a List<Map<String,String>> named codes that is exposed in the package. So to be safe the data from window.locale.countryCode should be checked against this list.

Example:

import 'dart:ui';

import 'package:country_code_picker/country_code_picker.dart';
import 'package:country_code_picker/country_codes.dart';
import 'package:flutter/material.dart';
import 'package:collection/collection.dart';

class CountryPickerWithLocale extends StatefulWidget {
  const CountryPickerWithLocale({Key? key, required this.onCountryChanged})
      : super(key: key);

  final Function(CountryCode) onCountryChanged;

  @override
  State<CountryPickerWithLocale> createState() =>
      _CountryPickerWithLocaleState();
}

class _CountryPickerWithLocaleState extends State<CountryPickerWithLocale> {
  late String userCountryCode;
  String fallbackCountryCode = "UK";

  @override
  void initState() {
    super.initState();

    // Get the language set as default on the users phone
    String? systemCountryCode = window.locale.countryCode;

    // The package you are using has supported countries defined inside a
    // "codes" map.
    Map<String,String>? supportedLanguage = codes.firstWhereOrNull((element) {
       return element["code"] == systemCountryCode;
    });
    
    // Use a fallback if the language is unsupported in the package, or if 
    // there are some issues with retrieving the country code from the locale.
    userCountryCode = supportedLanguage?["code"] ?? fallbackCountryCode;
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: CountryCodePicker(
        onChanged: widget.onCountryChanged,
        initialSelection: userCountryCode,
        showCountryOnly: false,
        showOnlyCountryWhenClosed: false,
        alignLeft: false,
      ),
    );
  }
}

class CountryPickerScreen extends StatelessWidget {
  const CountryPickerScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: CountryPickerWithLocale(
          onCountryChanged: (code) {
            print(code.code);
          },
        ),
      ),
    );
  }
}

// Some code to run the above example.
class App extends StatelessWidget {
  const App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(home: CountryPickerScreen());
  }
}

void main() => runApp(const App());