# 🔧 Language System - Quick Implementation Guide

## ⚡ سریع‌ترین راه اضافه کردن انتخاب زبان

### 1️⃣ Import های مورد نیاز
```dart
import 'package:flutter_svg/flutter_svg.dart';
import '../../widgets/language_selection_dialog.dart';
import '../../gen/assets.gen.dart';
import '../../res/colors.dart';
```

### 2️⃣ اضافه کردن State Variables
```dart
class _YourPageState extends State<YourPage> {
  String _currentLanguage = '🇺🇲  English';
  String _currentFlag = 'assets/icons/usa circle.svg';
  final GlobalKey _languageKey = GlobalKey();
}
```

### 3️⃣ کپی/پیست Widget کامل
```dart
GestureDetector(
  key: _languageKey,
  onTap: () {
    showLanguageSelectionOverlay(
      context,
      _currentLanguage,
      (language, flag) {
        setState(() {
          _currentLanguage = language;
          _currentFlag = flag;
        });
      },
      _languageKey,
    );
  },
  child: Row(
    mainAxisSize: MainAxisSize.min,
    children: [
      AnimatedSwitcher(
        duration: const Duration(milliseconds: 300),
        child: ClipRRect(
          key: ValueKey(_currentFlag),
          borderRadius: BorderRadius.circular(4),
          child: _currentFlag.endsWith('.svg')
            ? SvgPicture.asset(_currentFlag, width: 24, height: 18)
            : Image.asset(_currentFlag, width: 24, height: 18, fit: BoxFit.cover,
                errorBuilder: (context, error, stackTrace) => Container(
                  width: 24, height: 18,
                  decoration: BoxDecoration(
                    color: AppColors.greyBorder.withOpacity(0.2),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: Icon(Icons.flag, color: AppColors.textSecondary, size: 12),
                ),
              ),
        ),
      ),
      const SizedBox(width: 8),
      AnimatedSwitcher(
        duration: const Duration(milliseconds: 300),
        child: Text(
          _currentLanguage,
          key: ValueKey(_currentLanguage),
          style: TextStyle(
            fontSize: 15,
            fontWeight: FontWeight.w500,
            color: AppColors.textPrimary,
          ),
        ),
      ),
      const SizedBox(width: 8),
      SvgPicture.asset(Assets.icons.arrowRight.path, color: AppColors.textPrimary),
    ],
  ),
),
```

## 🎯 مواقع استفاده

### در Onboarding (بالای راست)
```dart
Container(
  padding: EdgeInsets.fromLTRB(width/15, height/20, width/15, 0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Text('Skip'), // دکمه Skip
      LanguageWidget(), // Widget بالا
    ],
  ),
)
```

### در Profile (قسمت Settings)
```dart
_buildInfoTile(
  icon: SvgPicture.asset(Assets.icons.languageSquare.path, width: 22),
  title: 'Language',
  trailing: LanguageWidget(), // Widget بالا
),
```

## ⚙️ تنظیمات اختیاری

### حافظه زبان با SharedPreferences
```dart
Future<void> _saveLanguage(String languageCode) async {
  final prefs = await SharedPreferences.getInstance();
  await prefs.setString('selected_language', languageCode);
}

Future<void> _loadLanguage() async {
  final prefs = await SharedPreferences.getInstance();
  final savedLang = prefs.getString('selected_language') ?? 'en';
  // set initial language based on savedLang
}
```

### اضافه کردن زبان جدید
در `language_selection_dialog.dart`:
```dart
final List<Map<String, String>> languages = [
  {'name': '🇺🇲  English', 'code': 'en', 'flag': 'assets/icons/usa circle.svg'},
  {'name': '🇦🇪  العربية', 'code': 'ar', 'flag': 'assets/icons/arab circle.svg'},
  {'name': '🇮🇷  فارسی', 'code': 'fa', 'flag': 'assets/icons/iran circle.svg'},
  ];
```

## 🚨 نکات مهم

1. **GlobalKey ضروری است** برای positioning صحیح overlay
2. **AnimatedSwitcher** برای animation های smooth
3. **Error handling** برای asset های مفقود
4. **ValueKey** برای performance بهتر

## 🔍 Debug

```dart
print('Current language: $_currentLanguage');
print('Current flag: $_currentFlag');
print('Target position: ${_languageKey.currentContext?.findRenderObject()}');
```

---
*راهنمای سریع - نسخه 1.0*