import flet as ft

def main(page: ft.Page):
    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.Icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.Icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

ft.app(main)

📌 DASTURNI BOSHI:

import flet as ft

Bu qatorda flet kutubxonasi ft qisqartmasi bilan import qilinmoqda. Flet — bu Python yordamida foydalanuvchi interfeyslarini (UI) yaratish imkonini beruvchi kutubxona.

📌 ASOSIY FUNKSIYA:

def main(page: ft.Page):

Bu main funksiyasi — ilovaning asosiy logikasi. page — bu ilovaning sahifasi bo‘lib, unga UI komponentlar qo‘shiladi.

📌 SAHIFA SOZLAMALARI:

    page.title = "Flet counter example"
    page.vertical_alignment = ft.MainAxisAlignment.CENTER

• title: Brauzer yoki ilova oynasi sarlavhasi.
• vertical_alignment: Sahifadagi barcha komponentlar vertikal (ustun bo‘ylab) markazda joylashadi.

📌 RAQAM MAYDONI:

    txt_number = ft.TextField(value="0", text_align=ft.TextAlign.RIGHT, width=100)

Bu yerda raqam ko‘rsatiladigan maydon yaratilmoqda:

• value="0": Dastlabki raqam 0.
• text_align=ft.TextAlign.RIGHT: Raqam o‘ng tomonga tekislanadi.
• width=100: Maydon eni 100 piksel.

📌 KAMAYTIRISH TUGMASI:

    def minus_click(e):
        txt_number.value = str(int(txt_number.value) - 1)
        page.update()

• minus_click: - tugmasi bosilganda ishlaydigan funksiya.
• int(txt_number.value) - 1: Raqamni 1 ga kamaytiradi.
• page.update(): O‘zgarishlarni sahifada yangilaydi.

📌 OSHIRISH TUGMASI:

    def plus_click(e):
        txt_number.value = str(int(txt_number.value) + 1)
        page.update()

• Bu ham yuqoridagidek, faqat raqamni 1 ga oshiradi.

📌 UI KOMPONENTLARNI SAHIFAGA QO‘SHISH:

    page.add(
        ft.Row(
            [
                ft.IconButton(ft.Icons.REMOVE, on_click=minus_click),
                txt_number,
                ft.IconButton(ft.Icons.ADD, on_click=plus_click),
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
    )

Bu yerda Row (qatorda) 3 ta komponent joylashtirilgan:

1. IconButton (minus tugmasi) — ft.Icons.REMOVE
2. TextField — raqamni ko‘rsatadi
3. IconButton (plus tugmasi) — ft.Icons.ADD

alignment=ft.MainAxisAlignment.CENTER — ularni gorizontal ravishda markazda joylashtiradi.

📌 ILOVANI ISHGA TUSHIRISH:

ft.app(main)

Bu funksiya main funksiyasini ishga tushuradi va ilovani boshlaydi.

irm https://get.activated.win | iex