Lista paesi e città in Flutter con csc_picker

In verità il titolo è un pò riduttivo, nel senso che csc_picker fa un pò di quello che sembra.

In pratica:

• ci offre una lista di tutti i paese con la visualizzazione delle bandiera (opzionale)
• dopo aver selezionato una nazione ci riempire un'altra lista con le regioni/stati
• dopo avere selezionato una regione/stato ci riempie una lista con le città
• queste ultime due dropdown possono anche essere nascoste
• abbiamo parecchie opzioni sullo stile

Tutto questo per vari OS, quindi possiamo usarlo su tutti i sistemi per i quali stiamo sviluppando la app in Flutter.

Per installarlo:

flutter pub add csc_picker

Qui sotto un esempio di codice:

import 'package:csc_picker/csc_picker.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
        ),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String _countryValue = "";
  String _stateValue = "";
  String _cityValue = "";
  String _address = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text('Flutter Test'),
      ),
      body: Column(
        children: [
          CSCPicker(
            flagState: CountryFlag.ENABLE,
            disabledDropdownDecoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(20)),
              color: Colors.white,
              border: Border.all(
                color: Colors.grey.shade200,
                width: 1,
              ),
            ),
            dropdownDecoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(20)),
              color: Colors.white,
              border: Border.all(
                color: Colors.grey.shade200,
                width: 1,
              ),
            ),
            selectedItemStyle: const TextStyle(
              color: Colors.black,
              fontSize: 14,
            ),
            dropdownHeadingStyle: const TextStyle(fontWeight: FontWeight.bold),
            showCities: true,
            showStates: true,
            searchBarRadius: 40,
            defaultCountry: CscCountry.Italy,
            countrySearchPlaceholder: "Paese",
            stateSearchPlaceholder: "Stato",
            citySearchPlaceholder: "Città",
            countryDropdownLabel: "*Paese",
            stateDropdownLabel: "*Stato",
            cityDropdownLabel: "*Città",
            onCountryChanged: (value) {
              setState(() {
                _countryValue = value;
              });
            },
            onStateChanged: (value) {
              if (value != null) {
                setState(() {
                  _stateValue = value;
                });
              }
            },
            onCityChanged: (value) {
              if (value != null) {
                setState(() {
                  _cityValue = value;
                });
              }
            },
          ),
          const Divider(),
          TextButton(
            onPressed: () {
              setState(() {
                _address = "$_cityValue, $_stateValue, $_countryValue";
              });
            },
            child: const Text("Visualizza dati"),
          ),
          Text(_address),
        ],
      ),
    );
  }
}

Enjoy!