148 lines
4.2 KiB
Markdown
148 lines
4.2 KiB
Markdown
# 🔧 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* |