proxybuy-flutter/LANGUAGE_QUICK_GUIDE.md

🔧 Language System - Quick Implementation Guide

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

1️⃣ Import های مورد نیاز

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

class _YourPageState extends State<YourPage> {
  String _currentLanguage = '🇺🇲  English';
  String _currentFlag = 'assets/icons/usa circle.svg';
  final GlobalKey _languageKey = GlobalKey();
}

3️⃣ کپی/پیست Widget کامل

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 (بالای راست)

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

در Profile (قسمت Settings)

_buildInfoTile(
  icon: SvgPicture.asset(Assets.icons.languageSquare.path, width: 22),
  title: 'Language',
  trailing: LanguageWidget(), // Widget بالا
),

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

حافظه زبان با SharedPreferences

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:

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

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

---

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