world_language_picker 1.0.0

A customizable Flutter language picker supporting 50+ world languages with native emoji flags, instant search, and zero external dependencies.

example/lib/main.dart

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

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

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

//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       debugShowCheckedModeBanner: false,
//       theme: ThemeData(
//         useMaterial3: true,
//         colorScheme: ColorScheme.fromSeed(seedColor: const Color(0xFF6366F1)),
//       ),
//       home: const HomeScreen(),
//     );
//   }
// }

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

//   @override
//   State<HomeScreen> createState() => _HomeScreenState();
// }

// class _HomeScreenState extends State<HomeScreen> {
//   Language? _selectedLanguage;

//   String _getCountryFlagEmoji(String countryCode) {
//     final int firstLetter = countryCode.codeUnitAt(0) - 0x41 + 0x1F1E6;
//     final int secondLetter = countryCode.codeUnitAt(1) - 0x41 + 0x1F1E6;
//     return String.fromCharCode(firstLetter) + String.fromCharCode(secondLetter);
//   }

//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       backgroundColor: const Color(0xFFF8FAFC),
//       appBar: AppBar(
//         title: const Text('World Language Picker'),
//         centerTitle: true,
//       ),
//       body: SafeArea(
//         child: Padding(
//           padding: const EdgeInsets.all(24.0),
//           child: Column(
//             children: [
//               const Spacer(),
//               Container(
//                 padding: const EdgeInsets.all(24),
//                 decoration: BoxDecoration(
//                   color: Colors.white,
//                   borderRadius: BorderRadius.circular(24),
//                   border: Border.all(color: const Color(0xFFE2E8F0)),
//                 ),
//                 child: Column(
//                   children: [
//                     Container(
//                       width: 72,
//                       height: 72,
//                       alignment: Alignment.center,
//                       decoration: const BoxDecoration(
//                         color: Color(0xFFEEF2FF),
//                         shape: BoxShape.circle,
//                       ),
//                       child: _selectedLanguage != null
//                           ? Text(
//                               _getCountryFlagEmoji(_selectedLanguage!.countryCode),
//                               style: const TextStyle(fontSize: 38),
//                             )
//                           : const Icon(Icons.translate_rounded, color: Color(0xFF6366F1), size: 32),
//                     ),
//                     const SizedBox(height: 16),
//                     Text(
//                       _selectedLanguage != null ? _selectedLanguage!.nativeName : 'No Language Selected',
//                       style: const TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
//                     ),
//                   ],
//                 ),
//               ),
//               const Spacer(),
//               ElevatedButton.icon(
//                 onPressed: () async {
//                   final language = await WorldLanguagePicker.showBottomSheet(
//                     context,
//                     initialLanguage: _selectedLanguage,
//                     primaryColor: const Color(0xFF6366F1),
//                   );
//                   if (language != null) {
//                     setState(() => _selectedLanguage = language);
//                   }
//                 },
//                 icon: const Icon(Icons.language),
//                 label: const Text('Select Language'),
//               ),
//             ],
//           ),
//         ),
//       ),
//     );
//   }
// }

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        useMaterial3: true,
        colorScheme: ColorScheme.fromSeed(
          seedColor: const Color(0xFF6366F1),
          brightness: Brightness.light,
        ),
      ),
      home: const HomeScreen(),
    );
  }
}

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  Language? _selectedLanguage;

  String _getCountryFlagEmoji(String countryCode) {
    final int firstLetter = countryCode.codeUnitAt(0) - 0x41 + 0x1F1E6;
    final int secondLetter = countryCode.codeUnitAt(1) - 0x41 + 0x1F1E6;
    return String.fromCharCode(firstLetter) + String.fromCharCode(secondLetter);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFF8FAFC),
      appBar: AppBar(
        title: const Text(
          'World Language Picker',
          style: TextStyle(fontWeight: FontWeight.w700, fontSize: 20),
        ),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      body: SafeArea(
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 24.0, vertical: 32.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              const Spacer(),

              // Selected Language Display Card
              AnimatedContainer(
                duration: const Duration(milliseconds: 300),
                padding: const EdgeInsets.all(24),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(24),
                  border: Border.all(color: const Color(0xFFE2E8F0)),
                  boxShadow: [
                    BoxShadow(
                      color: const Color(0xFF64748B).withValues(alpha: 0.08),
                      blurRadius: 24,
                      offset: const Offset(0, 8),
                    ),
                  ],
                ),
                child: Column(
                  children: [
                    // Flag Container / Default Icon
                    Container(
                      width: 72,
                      height: 72,
                      alignment: Alignment.center,
                      decoration: const BoxDecoration(
                        color: Color(0xFFEEF2FF),
                        shape: BoxShape.circle,
                      ),
                      child:
                          _selectedLanguage != null
                              ? Text(
                                _getCountryFlagEmoji(
                                  _selectedLanguage!.countryCode,
                                ),
                                style: const TextStyle(fontSize: 38),
                              )
                              : const Icon(
                                Icons.translate_rounded,
                                color: Color(0xFF6366F1),
                                size: 32,
                              ),
                    ),
                    const SizedBox(height: 16),
                    Text(
                      _selectedLanguage != null
                          ? _selectedLanguage!.nativeName
                          : 'No Language Selected',
                      style: const TextStyle(
                        fontSize: 22,
                        fontWeight: FontWeight.bold,
                        color: Color(0xFF0F172A),
                      ),
                    ),
                    const SizedBox(height: 4),
                    Text(
                      _selectedLanguage != null
                          ? '${_selectedLanguage!.name} (${_selectedLanguage!.code.toUpperCase()})'
                          : 'Tap below to select your language',
                      style: const TextStyle(
                        fontSize: 14,
                        color: Color(0xFF64748B),
                      ),
                    ),
                  ],
                ),
              ),

              const Spacer(),

              // Picker Trigger Button
              ElevatedButton.icon(
                onPressed: () async {
                  final language = await WorldLanguagePicker.showBottomSheet(
                    context,
                    initialLanguage: _selectedLanguage,
                    primaryColor: const Color(0xFF6366F1),
                  );

                  if (language != null) {
                    setState(() {
                      _selectedLanguage = language;
                    });
                  }
                },
                icon: const Icon(Icons.language, size: 20),
                label: const Text(
                  'Select Language',
                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.w600),
                ),
                style: ElevatedButton.styleFrom(
                  backgroundColor: const Color(0xFF6366F1),
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.symmetric(vertical: 18),
                  elevation: 0,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}