language_selector.dart

Go to the documentation of this file.

import 'package:flutter/material.dart';
import 'package:easy_localization/easy_localization.dart';
 
class LanguageSelector extends StatefulWidget {
  final Color? primaryColor;
  final Color? textColor;
  final double? borderRadius;
  
  const LanguageSelector({
    super.key, 
    this.primaryColor,
    this.textColor,
    this.borderRadius,
  });
 
  @override
  State<LanguageSelector> createState() => _ModernLanguageSelectorState();
}
 
class _ModernLanguageSelectorState extends State<LanguageSelector> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _rotationAnimation;
  bool _isOpen = false;
  
  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(milliseconds: 300),
      vsync: this,
    );
    _rotationAnimation = Tween<double>(begin: 0, end: 0.5).animate(
      CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
    );
  }
  
  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
 
  void _toggleDropdown() {
    setState(() {
      _isOpen = !_isOpen;
      if (_isOpen) {
        _controller.forward();
      } else {
        _controller.reverse();
      }
    });
  }
 
  @override
  Widget build(BuildContext context) {
    final Color primaryColor = widget.primaryColor ?? Theme.of(context).primaryColor;
    final Color textColor = widget.textColor ?? Colors.white;
    final double borderRadius = widget.borderRadius ?? 12.0;
    
    return Theme(
      data: Theme.of(context).copyWith(
        popupMenuTheme: PopupMenuThemeData(
          elevation: 20,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(borderRadius),
          ),
        ),
      ),
      child: PopupMenuButton<Locale>(
        offset: const Offset(0, 10),
        position: PopupMenuPosition.under,
        onOpened: () {
          _toggleDropdown();
        },
        onCanceled: () {
          _toggleDropdown();
        },
        onSelected: (Locale locale) {
          context.setLocale(locale);
          _toggleDropdown();
        },
        tooltip: 'Select language',
        child: Container(
          padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
          decoration: BoxDecoration(
            color: primaryColor,
            borderRadius: BorderRadius.circular(borderRadius),
            boxShadow: [
              BoxShadow(
                color: primaryColor.withValues(alpha: 0.3),
                blurRadius: 8,
                offset: const Offset(0, 3),
              ),
            ],
          ),
          child: Row(
            mainAxisSize: MainAxisSize.min,
            children: [
              Icon(
                Icons.language_rounded,
                color: textColor,
                size: 20,
              ),
              const SizedBox(width: 8),
              Text(
                _getLanguageName(context.locale.languageCode),
                style: TextStyle(
                  color: textColor,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(width: 4),
              RotationTransition(
                turns: _rotationAnimation,
                child: Icon(
                  Icons.arrow_drop_down,
                  color: textColor,
                ),
              ),
            ],
          ),
        ),
        itemBuilder: (BuildContext context) => <PopupMenuEntry<Locale>>[
          _buildLanguageMenuItem(context, 'en', 'English'),
          _buildLanguageMenuItem(context, 'ar', 'العربية'),
          _buildLanguageMenuItem(context, 'ur', 'اردو'),
        ],
      ),
    );
  }
  
  PopupMenuItem<Locale> _buildLanguageMenuItem(BuildContext context, String code, String name) {
    final bool isSelected = context.locale.languageCode == code;
    
    return PopupMenuItem<Locale>(
      value: Locale(code),
      child: Container(
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Row(
              children: [
                // _buildLanguageFlag(code),
                // const SizedBox(width: 12),
                Text(
                  name,
                  style: TextStyle(
                    fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                    fontSize: 16,
                  ),
                ),
              ],
            ),
            if (isSelected)
              Container(
                padding: const EdgeInsets.all(4),
                decoration: BoxDecoration(
                  color: widget.primaryColor ?? Theme.of(context).primaryColor,
                  shape: BoxShape.circle,
                ),
                child: Icon(
                  Icons.check,
                  color: Colors.white,
                  size: 12,
                ),
              ),
          ],
        ),
      ),
    );
  }
  
  // Widget _buildLanguageFlag(String code) {
  //   switch (code) {
  //     case 'en':
  //       return const CircleAvatar(
  //         radius: 12,
  //         backgroundColor: Colors.transparent,
  //         child: Text('🇬🇧', style: TextStyle(fontSize: 18)),
  //       );
  //     case 'ar':
  //       return const CircleAvatar(
  //         radius: 12,
  //         backgroundColor: Colors.transparent,
  //         child: Text('🇸🇦', style: TextStyle(fontSize: 18)),
  //       );
  //     case 'ur':
  //       return const CircleAvatar(
  //         radius: 12,
  //         backgroundColor: Colors.transparent,
  //         child: Text('🇵🇰', style: TextStyle(fontSize: 18)),
  //       );
  //     default:
  //       return const CircleAvatar(
  //         radius: 12,
  //         child: Icon(Icons.language, size: 12),
  //       );
  //   }
  // }
  
  String _getLanguageName(String code) {
    switch (code) {
      case 'en':
        return 'English';
      case 'ar':
        return 'العربية';
      case 'ur':
        return 'اردو';
      default:
        return 'Unknown';
    }
  }
}