Localize Text, RTL Layouts, Placeholders and Plural Forms

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

void main() => runApp(const LocalizedApp());

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

  @override
  State<LocalizedApp> createState() => _LocalizedAppState();
}

class _LocalizedAppState extends State<LocalizedApp> {
  Locale _locale = const Locale('en');
  int _itemCount = 1;

  void _toggleLocale() {
    setState(() {
      _locale = _locale.languageCode == 'en'
          ? const Locale('ar') // Demonstrates RTL layout mirroring
          : const Locale('en');
    });
  }

  @override
  Widget build(BuildContext context) {
    final isRtl = _locale.languageCode == 'ar';

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      locale: _locale,
      supportedLocales: const [Locale('en'), Locale('es'), Locale('ar')],
      localizationsDelegates: const [
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      theme: ThemeData(
        useMaterial3: true,
        colorSchemeSeed: const Color(0xFF8467D7),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text(isRtl ? 'معاينة التعريب' : 'Localization Preview'),
          actions: [
            IconButton(
              icon: const Icon(Icons.language),
              tooltip: 'Switch Language',
              onPressed: _toggleLocale,
            ),
          ],
        ),
        body: Padding(
          padding: const EdgeInsetsDirectional.all(16.0), // Mirrors in RTL
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              // User Card with Directional Avatar Alignment
              Card(
                child: Padding(
                  padding: const EdgeInsetsDirectional.all(16.0),
                  child: Row(
                    children: [
                      const CircleAvatar(child: Icon(Icons.person)),
                      const SizedBox(width: 12),
                      Expanded(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(
                              isRtl ? 'الملف الشخصي' : 'User Profile',
                              style: const TextStyle(fontSize: 12, color: Colors.grey),
                            ),
                            Text(
                              // In English: "Chirag Raval (Lead)"
                              // In RTL/Arabic: "راوال، شيراغ (المسؤول)"
                              isRtl ? 'راوال، شيراغ (المسؤول)' : 'Chirag Raval (Lead Engineer)',
                              style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              const SizedBox(height: 16),

              // Interactive Plural Counter
              Card(
                child: Padding(
                  padding: const EdgeInsetsDirectional.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Text(
                        isRtl
                            ? (_itemCount == 0 ? 'لا توجد عناصر' : '$_itemCount عناصر')
                            : (_itemCount == 0
                                ? 'No items'
                                : _itemCount == 1
                                    ? '1 item'
                                    : '$_itemCount items'),
                        style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                      ),
                      const SizedBox(height: 12),
                      Row(
                        children: [
                          OutlinedButton.icon(
                            onPressed: () {
                              if (_itemCount > 0) setState(() => _itemCount--);
                            },
                            icon: const Icon(Icons.remove, size: 14),
                            label: Text(isRtl ? 'إنقاص' : 'Decrement'),
                          ),
                          const SizedBox(width: 8),
                          ElevatedButton.icon(
                            onPressed: () => setState(() => _itemCount++),
                            icon: const Icon(Icons.add, size: 14),
                            label: Text(isRtl ? 'زيادة' : 'Increment'),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}