custom_country_picker 1.0.2

A Flutter package that provides an easy-to-use, highly customizable widget for selecting countries.

example/lib/main.dart

import 'package:custom_country_picker/country.dart';
import 'package:flutter/material.dart';

import 'country_select.dart';
import 'phone_number.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom Country Picker Example',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Custom Country Picker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController phoneController = TextEditingController();
  TextEditingController phone1Controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        appBar: AppBar(
          backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          title: Text(widget.title),
        ),
        body: Center(
            child: Padding(
                padding: EdgeInsets.symmetric(
                    horizontal: MediaQuery.of(context).size.width * 0.05),
                child: SingleChildScrollView(
                    child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                      Text('All countries with picker',
                          style: TextStyle(
                              fontSize:
                                  MediaQuery.of(context).size.width * 0.045,
                              fontWeight: FontWeight.bold)),
                      SizedBox(
                          height: MediaQuery.of(context).size.height * 0.005),
                      Padding(
                          padding: EdgeInsets.symmetric(
                              horizontal:
                                  MediaQuery.of(context).size.width * 0.15),
                          child: Stack(
                            alignment: Alignment.topLeft,
                            children: [
                              Container(
                                  margin: EdgeInsets.only(
                                      top: MediaQuery.of(context).size.width *
                                          0.035),
                                  decoration: BoxDecoration(
                                      border:
                                          Border.all(color: Colors.deepPurple),
                                      borderRadius: BorderRadius.circular(10)),
                                  child: CountrySelect(
                                      onChanged: (Country? country) {},
                                      language: 'en',
                                      initial: 'CI')),
                              Positioned(
                                  left:
                                      MediaQuery.of(context).size.width * 0.03,
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                        horizontal:
                                            MediaQuery.of(context).size.width *
                                                0.01,
                                        vertical:
                                            MediaQuery.of(context).size.width *
                                                0.002),
                                    color: Colors.white,
                                    child: Text('Country',
                                        style: TextStyle(
                                            fontSize: MediaQuery.of(context)
                                                    .size
                                                    .width *
                                                0.035)),
                                  ))
                            ],
                          )),
                      SizedBox(
                          height: MediaQuery.of(context).size.height * 0.05),
                      Text('All countries without picker',
                          style: TextStyle(
                              fontSize:
                                  MediaQuery.of(context).size.width * 0.045,
                              fontWeight: FontWeight.bold)),
                      SizedBox(
                          height: MediaQuery.of(context).size.height * 0.005),
                      Padding(
                          padding: EdgeInsets.symmetric(
                              horizontal:
                                  MediaQuery.of(context).size.width * 0.15),
                          child: Stack(
                            alignment: Alignment.topLeft,
                            children: [
                              Container(
                                  margin: EdgeInsets.only(
                                      top: MediaQuery.of(context).size.width *
                                          0.035),
                                  decoration: BoxDecoration(
                                      border:
                                          Border.all(color: Colors.deepPurple),
                                      borderRadius: BorderRadius.circular(10)),
                                  child: CountrySelect(
                                      onChanged: (Country? country) {},
                                      language: 'fr',
                                      usePicker: false,
                                      initial: 'CI')),
                              Positioned(
                                  left:
                                      MediaQuery.of(context).size.width * 0.03,
                                  child: Container(
                                    padding: EdgeInsets.symmetric(
                                        horizontal:
                                            MediaQuery.of(context).size.width *
                                                0.01,
                                        vertical:
                                            MediaQuery.of(context).size.width *
                                                0.002),
                                    color: Colors.white,
                                    child: Text('Country',
                                        style: TextStyle(
                                            fontSize: MediaQuery.of(context)
                                                    .size
                                                    .width *
                                                0.035)),
                                  ))
                            ],
                          )),
                      SizedBox(
                          height: MediaQuery.of(context).size.height * 0.05),
                      Text('List with all countries',
                          style: TextStyle(
                              fontSize:
                                  MediaQuery.of(context).size.width * 0.045,
                              fontWeight: FontWeight.bold)),
                      SizedBox(
                          height: MediaQuery.of(context).size.height * 0.005),
                      PhoneInputWidget(
                          controller: phoneController, label: 'Phone number'),
                      SizedBox(
                          height: MediaQuery.of(context).size.height * 0.05),
                      Text('List with some countries',
                          style: TextStyle(
                              fontSize:
                                  MediaQuery.of(context).size.width * 0.045,
                              fontWeight: FontWeight.bold)),
                      SizedBox(
                          height: MediaQuery.of(context).size.height * 0.005),
                      PhoneInputWidget(
                          countries: const ['CI', 'CM', 'SN', 'ML', 'BF'],
                          controller: phone1Controller,
                          label: 'Phone number')
                    ])))));
  }
}