import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Text("أنواع مختلفة من حقول الإدخال:", size=16, weight="bold"),
        
        # حقل نص عادي
        ft.TextField(
            label="نص عادي",
            width=400,
        ),
        
        # حقل كلمة مرور
        ft.TextField(
            label="كلمة المرور",
            password=True,  # إخفاء النص
            can_reveal_password=True,  # السماح بإظهار كلمة المرور
            width=400,
        ),
        
        # حقل متعدد الأسطر
        ft.TextField(
            label="ملاحظات متعددة الأسطر",
            multiline=True,  # تفعيل تعدد الأسطر
            min_lines=3,  # الحد الأدنى من الأسطر
            max_lines=5,  # الحد الأقصى من الأسطر
            width=400,
        ),
        
        # حقل مع عدد
        ft.TextField(
            label="العمر",
            keyboard_type=ft.KeyboardType.NUMBER,  # لوحة مفاتيح رقمية
            prefix_text="عمر: ",  # نص قبل الإدخال
            suffix_text=" سنة",  # نص بعد الإدخال
            width=400,
        ),
        
        # حقل بأيقونات
        ft.TextField(
            label="البحث",
            prefix_icon=ft.icons.SEARCH,  # أيقونة في البداية
            suffix_icon=ft.icons.CLEAR,  # أيقونة في النهاية
            width=400,
        ),
    )

ft.app(target=main)

import flet as ft

def main(page: ft.Page):
    # زر حالة التحميل
    loading_button = ft.ElevatedButton("تحميل البيانات")
    
    # زر معطل
    disabled_button = ft.ElevatedButton("زر معطل", disabled=True)
    
    # زر متغير اللون
    color_button = ft.ElevatedButton(
        text="تغيير اللون",
        bgcolor="blue",
        color="white",
    )
    
    # زر اعجاب
    like_button = ft.IconButton(
        icon=ft.icons.FAVORITE_BORDER,
        selected_icon=ft.icons.FAVORITE,
        icon_color="black",
        selected_icon_color="pink",
        tooltip="إعجاب",
    )
    
    # التبديل بين حالة التحميل
    def toggle_loading(e):
        loading_button.text = "جاري التحميل..." if loading_button.text == "تحميل البيانات" else "تحميل البيانات"
        loading_button.icon = ft.icons.PENDING if loading_button.text == "جاري التحميل..." else None
        loading_button.disabled = loading_button.text == "جاري التحميل..."
        page.update()
    
    # تغيير لون الزر
    def change_color(e):
        colors = ["blue", "green", "red", "purple", "orange"]
        current_index = colors.index(color_button.bgcolor) if color_button.bgcolor in colors else 0
        next_index = (current_index + 1) % len(colors)
        color_button.bgcolor = colors[next_index]
        page.update()
    
    # تبديل حالة الإعجاب
    def toggle_like(e):
        like_button.selected = not like_button.selected
        page.update()
    
    # ربط الأحداث بالأزرار
    loading_button.on_click = toggle_loading
    color_button.on_click = change_color
    like_button.on_click = toggle_like
    
    page.add(
        ft.Text("أزرار تغير حالتها:", size=16, weight="bold"),
        loading_button,
        disabled_button,
        color_button,
        ft.Row([like_button, ft.Text("أنقر للإعجاب")]),
    )

ft.app(target=main)

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Text("تأثيرات متقدمة للصور:", size=16, weight="bold"),
        
        ft.Row([
            ft.Column([
                ft.Image(
                    src="https://picsum.photos/200/200",
                    width=200,
                    height=200,
                    border_radius=10,  # تدوير زوايا الصورة
                ),
                ft.Text("زوايا دائرية", size=12),
            ], horizontal_alignment=ft.CrossAxisAlignment.CENTER),
            
            ft.Column([
                ft.Image(
                    src="https://picsum.photos/200/200",
                    width=200,
                    height=200,
                    border_radius=100,  # دائرة كاملة
                    fit=ft.ImageFit.COVER,
                ),
                ft.Text("صورة دائرية", size=12),
            ], horizontal_alignment=ft.CrossAxisAlignment.CENTER),
            
            ft.Column([
                ft.Container(
                    ft.Image(
                        src="https://picsum.photos/200/200",
                        width=200,
                        height=200,
                        color=ft.colors.BLUE,  # تطبيق لون
                        color_blend_mode=ft.BlendMode.COLOR,  # وضع المزج
                    ),
                    border_radius=10,
                    shadow=ft.BoxShadow(
                        spread_radius=1,
                        blur_radius=15,
                        color=ft.colors.BLUE_GREY_300,
                        offset=ft.Offset(0, 5),
                    )
                ),
                ft.Text("تأثير اللون مع ظل", size=12),
            ], horizontal_alignment=ft.CrossAxisAlignment.CENTER),
            
            ft.Column([
                ft.Container(
                    ft.Image(
                        src="https://picsum.photos/200/200",
                        width=200,
                        height=200,
                        fit=ft.ImageFit.COVER,
                        color=ft.colors.BLACK,
                        opacity=0.5,  # شفافية 50%
                    ),
                    gradient=ft.LinearGradient(
                        begin=ft.alignment.top_center,
                        end=ft.alignment.bottom_center,
                        colors=[ft.colors.TRANSPARENT, ft.colors.BLACK],
                    ),
                    border_radius=10,
                ),
                ft.Text("تدرج شفافية", size=12),
            ], horizontal_alignment=ft.CrossAxisAlignment.CENTER),
        ], wrap=True, spacing=20),
        
        ft.Divider(height=30),
        
        ft.Text("صورة تفاعلية:", size=16, weight="bold"),
        
        ft.Container(
            content=ft.Image(
                src="https://picsum.photos/300/200",
                width=300,
                height=200,
                fit=ft.ImageFit.COVER,
                border_radius=10,
            ),
            ink=True,  # تفعيل تأثير الحبر عند النقر
            tooltip="انقر لعرض صورة أكبر",
            on_click=lambda e: page.show_dialog(
                ft.AlertDialog(
                    content=ft.Image(
                        src="https://picsum.photos/600/400",
                        fit=ft.ImageFit.CONTAIN,
                    ),
                    actions=[
                        ft.TextButton("إغلاق", on_click=lambda e: page.dialog.open = False),
                    ],
                    actions_alignment=ft.MainAxisAlignment.END,
                )
            ),
        ),
    )

ft.app(target=main)

import flet as ft

def main(page: ft.Page):
    page.add(
        ft.Text("Stack - تكديس العناصر:", size=16, weight="bold"),
        
        # Stack أساسي
        ft.Container(
            content=ft.Stack(
                [
                    # الطبقة الخلفية (خلفية)
                    ft.Container(
                        width=300,
                        height=200,
                        bgcolor="blue",
                        border_radius=10,
                    ),
                    
                    # الطبقة المتوسطة (صورة)
                    ft.Container(
                        width=280,
                        height=180,
                        left=10,
                        top=10,
                        bgcolor="white",
                        border_radius=5,
                        alignment=ft.alignment.center,
                        content=ft.Image(
                            src="https://picsum.photos/250/150",
                            width=250,
                            height=150,
                            fit=ft.ImageFit.COVER,
                            border_radius=5,
                        ),
                    ),
                    
                    # الطبقة العلوية (نص)
                    ft.Container(
                        content=ft.Text("عنوان الصورة", color="white", weight="bold"),
                        bottom=0,
                        left=0,
                        right=0,
                        padding=10,
                        bgcolor=ft.colors.with_opacity(0.5, "black"),
                        border_radius=ft.border_radius.only(
                            bottom_left=10,
                            bottom_right=10,
                        ),
                    ),
                    
                    # زر في الزاوية العلوية
                    ft.Container(
                        content=ft.IconButton(
                            icon=ft.icons.FAVORITE_BORDER,
                            icon_color="red",
                        ),
                        top=0,
                        right=0,
                    ),
                ]
            ),
            width=300,
            height=200,
            margin=20,
        ),
        
        # مثال آخر (بطاقة معلومات)
        ft.Text("مثال آخر - بطاقة شخصية:", size=14),
        ft.Container(
            content=ft.Stack(
                [
                    # خلفية البطاقة
                    ft.Container(
                        width=350,
                        height=150,
                        bgcolor="#f0f0f0",
                        border_radius=10,
                    ),
                    
                    # نمط زخرفي
                    ft.Container(
                        width=150,
                        height=150,
                        right=0,
                        bgcolor=ft.colors.with_opacity(0.1, "blue"),
                        border_radius=ft.border_radius.only(
                            top_right=10,
                            bottom_right=10,
                        ),
                    ),
                    
                    # صورة شخصية
                    ft.Container(
                        content=ft.Container(
                            width=80,
                            height=80,
                            border_radius=40,
                            bgcolor="blue",
                            alignment=ft.alignment.center,
                            content=ft.Text("أ ب", size=30, color="white"),
                        ),
                        left=20,
                        top=35,
                    ),
                    
                    # معلومات الشخص
                    ft.Container(
                        content=ft.Column(
                            [
                                ft.Text("أحمد بن محمد", size=18, weight="bold"),
                                ft.Text("مطور تطبيقات", size=14, color="#666666"),
                                ft.Row(
                                    [
                                        ft.Icon(ft.icons.EMAIL, size=14, color="blue"),
                                        ft.Text("[email protected]", size=12),
                                    ],
                                    spacing=5,
                                ),
                                ft.Row(
                                    [
                                        ft.Icon(ft.icons.PHONE, size=14, color="blue"),
                                        ft.Text("+966 123 456 7890", size=12),
                                    ],
                                    spacing=5,
                                ),
                            ],
                            spacing=5,
                        ),
                        left=120,
                        top=30,
                    ),
                ]
            ),
            width=350,
            height=150,
            margin=10,
        ),
    )

ft.app(target=main)