custom_country_picker 1.0.1

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: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text('All countries', 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) {},
                             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'
              )
            ]
          )
        )
      )
    );
  }
}