Flutter Dial Code Picker #

A responsive Flutter package for picking country dial codes that automatically adapts to different screen sizes with extensive customization options.

🌟 Features #

🌍 Comprehensive Country List: 200+ countries with flags, names, codes, and dial codes
📱 Responsive Design: Automatically adapts to mobile and desktop screen sizes
🎨 Highly Customizable: Extensive styling and layout options
🔍 Smart Search: Search by country name, code, or dial code
📍 Positioned Popups: Context-aware positioning on larger screens
✅ Initial Country Selection: Pre-select and highlight countries
🎯 Multiple Display Modes: Bottom sheet, dialog, and responsive modes
♿ Accessibility: Full keyboard navigation and screen reader support

📱 Responsive Behavior #

The picker intelligently adapts to different screen sizes:

Device Type	Screen Width	Display Method	Description
Mobile	< 600px	Bottom Sheet	Full-width modal from bottom
Desktop/Tablet	≥ 600px	Positioned Popup	Appears below calling widget
Desktop/Tablet	≥ 600px	Dialog	Centered dialog (fallback)

🚀 Quick Start #

Installation #

Add this to your package's pubspec.yaml file:

dependencies:
  fl_dial_code_picker: ^0.0.1

Basic Usage #

import 'package:fl_dial_code_picker/fl_dial_code_picker.dart';

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Country? selectedCountry;
  final GlobalKey buttonKey = GlobalKey();

  void _showPicker() async {
    final country = await FlDialCodePicker.show(
      context: context,
      pickerType: PickerType.responsive,
      anchorKey: buttonKey, // For positioned popup on larger screens
      initialCountry: selectedCountry, // Pre-select current country
    );
    
    if (country != null) {
      setState(() {
        selectedCountry = country;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return ElevatedButton(
      key: buttonKey,
      onPressed: _showPicker,
      child: Text(selectedCountry?.dial ?? 'Select Country'),
    );
  }
}

🎨 Customization Examples #

Basic Styling #

final country = await FlDialCodePicker.show(
  context: context,
  title: "Choose Your Country",
  accentColor: Colors.blue,
  backgroundColor: Colors.white,
  searchPlaceholder: "Search countries...",
  maxWidth: 400,
  borderRadius: BorderRadius.circular(20),
);

Advanced Customization #

final country = await FlDialCodePicker.show(
  context: context,
  pickerType: PickerType.dialog,
  title: "🌍 Select Country",
  titleStyle: TextStyle(
    fontSize: 20,
    fontWeight: FontWeight.bold,
    color: Colors.purple,
    letterSpacing: 0.5,
  ),
  countryNameStyle: TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.w500,
  ),
  dialCodeStyle: TextStyle(
    fontSize: 14,
    color: Colors.purple,
    fontWeight: FontWeight.w600,
  ),
  maxWidth: 450,
  maxHeight: 600,
  borderRadius: BorderRadius.circular(25),
  padding: EdgeInsets.all(24),
  boxShadow: [
    BoxShadow(
      color: Colors.purple.withValues(alpha: 0.2),
      blurRadius: 15,
      offset: Offset(0, 8),
    ),
  ],
  leadingWidget: Icon(Icons.public, color: Colors.purple),
  trailingWidget: Container(
    padding: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
    decoration: BoxDecoration(
      color: Colors.purple.withValues(alpha: 0.1),
      borderRadius: BorderRadius.circular(12),
    ),
    child: Text("Required", style: TextStyle(fontSize: 12)),
  ),
);

Initial Country Selection #

// Pre-select a specific country
final usCountry = Country(
  name: "United States",
  flag: "🇺🇸",
  code: "US",
  dial: "+1",
);

final country = await FlDialCodePicker.show(
  context: context,
  initialCountry: usCountry, // This will highlight and scroll to US
  title: "Select Country",
);

📋 Available Parameters #

Basic Parameters #

context - The build context (required)
pickerType - Type of picker to show (defaults to responsive)
accentColor - Accent color for the picker
backgroundColor - Background color for the picker
anchorKey - GlobalKey for positioned popup on larger screens

Content Customization #

title - Optional title to display in the picker header
showCloseButton - Whether to show the close button (defaults to true)
showSearchField - Whether to show the search field (defaults to true)
searchPlaceholder - Placeholder text for the search field
searchDecoration - Custom decoration for the search field
initialCountry - Optional country to pre-select and highlight in the list

Styling Parameters #

titleStyle - Custom style for the title text
countryNameStyle - Custom style for country names in the list
dialCodeStyle - Custom style for dial codes in the list
borderRadius - Custom border radius for the picker
boxShadow - Custom box shadow for the picker
padding - Custom padding for the picker content

Layout Parameters #

maxWidth - Maximum width of the picker
maxHeight - Maximum height of the picker
leadingWidget - Optional widget to show before the title
trailingWidget - Optional widget to show after the title but before close button

🎯 Picker Types #

Responsive (Default) #

// Automatically chooses the best display method
final country = await FlDialCodePicker.show(
  context: context,
  pickerType: PickerType.responsive,
);

Bottom Sheet #

// Always shows as a modal bottom sheet
final country = await FlDialCodePicker.show(
  context: context,
  pickerType: PickerType.bottomSheet,
);

Dialog #

// Always shows as a centered dialog
final country = await FlDialCodePicker.show(
  context: context,
  pickerType: PickerType.dialog,
);

📊 Country Model #

The picker returns a Country object with the following properties:

class Country {
  final String name;      // Country name (e.g., "United States")
  final String flag;      // Country flag emoji (e.g., "🇺🇸")
  final String code;      // Country code (e.g., "US")
  final String dial;      // Dial code (e.g., "+1")
}

🖼️ Screenshots #

Dialog View #

Dialog View

Desktop Positioned Popup

Mobile Bottom Sheet #

Mobile Bottom Sheet

🔧 Advanced Features #

Custom Title Styling #

final country = await FlDialCodePicker.show(
  context: context,
  title: "🌍 Choose Your Country",
  titleStyle: TextStyle(
    fontSize: 22,
    fontWeight: FontWeight.bold,
    color: Colors.green,
    letterSpacing: 0.5,
    shadows: [
      Shadow(
        color: Colors.green.withValues(alpha: 0.3),
        offset: Offset(1, 1),
        blurRadius: 2,
      ),
    ],
  ),
);

Custom Search Field #

final country = await FlDialCodePicker.show(
  context: context,
  searchDecoration: InputDecoration(
    labelText: "Find your country",
    prefixIcon: Icon(Icons.search, color: Colors.blue),
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12),
    ),
  ),
);

Conditional Elements #

final country = await FlDialCodePicker.show(
  context: context,
  showCloseButton: false, // Hide close button
  showSearchField: false, // Hide search field
  title: "Quick Select",
);

📱 Responsive Breakpoints #

Mobile: Screen width < 600px
Desktop/Tablet: Screen width ≥ 600px

🧪 Example App #

Run the included example app to see all features in action:

cd example
flutter run

The example demonstrates:

✅ Responsive behavior across different screen sizes
✅ All picker types (responsive, bottom sheet, dialog)
✅ Custom styling and theming
✅ Initial country selection
✅ Positioned popups on larger screens
✅ Search functionality
✅ Accessibility features

🤝 Contributing #

Contributions are welcome! Please feel free to submit a Pull Request.

Development Setup #

Fork the repository
Create a feature branch
Make your changes
Add tests if applicable
Submit a pull request

📄 License #

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments #

Country data sourced from comprehensive international databases
Icons provided by Material Design
Built with Flutter framework

Made with ❤️ for the Flutter community