why doesn't the total price change realtime when . counter added and subtracted

[bobwatcherx]

Question

I made a shopping app. and use the buttons to increase and decrease . and when I change the counter value to a higher and lower number. but the total price has not changed. even though I've updated

Code sample

from flet import *



def main(page:Page):
    price = Text(1200,size=25,weight="bold")
    mycounter = Text(1,size=25,weight="bold")
    totalprice = Text(mycounter.value * price.value)

    def incrementbtn(e):
        mycounter.value +=1
        totalprice.value = mycounter.value * price.value
        print("harga",totalprice.value)
        print("counter",mycounter.value)
        page.update()

    def decrementbtn(e):
        mycounter.value -=1
        print("counter",mycounter.value)
        totalprice.value = mycounter.value * price.value
        page.update()
        if mycounter.value < 1:
            totalprice.value = 1 * price.value
            mycounter.value = 1
        print("total",totalprice.value)
        page.update()

    page.add(
    AppBar(
    title=Text("Flet Shopping",size=30,color="white"),
    bgcolor="blue"
    ),
    Column([

    Image(src="assets/sale.jpg"),
    Text(f"price is ${price.value}",size=25,weight="bold"),
    Text("buy this clothes",weight="bold",size=25),
    Row([
        IconButton("remove",
        bgcolor="red200",
        on_click=decrementbtn
        ),
        mycounter,
        IconButton("add",
        bgcolor="blue200",
        on_click=incrementbtn

        ),
        
    ],alignment="spaceBetween"),
    Row([
        Text(f"total price : ${totalprice.value}"),
        ElevatedButton("Pay Now",
        bgcolor="green",color="white"
        )
        ],alignment="spaceBetween")

        ])
    )

flet.app(target=main,assets_dir="assets")

Error message

do not want to change the text total price .  next to the green button

------------------------------------------------------

• I have searched for answers to my question both in the issues and in previous discussions.

[iron3oxide]

There are a lot of errors in the sample code, most stemming from the wrongful assumption that the value of a Text could be an Integer. I will reply with a modified version shortly.

[iron3oxide]

import flet as ft


def main(page: ft.Page):
    price = ft.Text("1200", size=25, weight=ft.FontWeight.BOLD)
    mycounter = ft.Text("1", size=25, weight=ft.FontWeight.BOLD)
    totalprice = ft.Text("total price: $1200")

    def calculate_total() -> str:
        if mycounter.value is None or price.value is None or int(mycounter.value) < 1:
            return "error"
        return f"total price: ${int(mycounter.value) * int(price.value)}"

    def incrementbtn(e):
        assert mycounter.value is not None
        mycounter.value = f"{int(mycounter.value) + 1}"
        totalprice.value = calculate_total()
        print("harga", totalprice.value)
        print("counter", mycounter.value)
        page.update()

    def decrementbtn(e):
        assert mycounter.value is not None
        mycounter.value = f"{int(mycounter.value) - 1}"
        print("counter", mycounter.value)
        totalprice.value = calculate_total()

        print("total", totalprice.value)
        page.update()

    page.add(
        ft.AppBar(
            title=ft.Text("Flet Shopping", size=30, color="white"), bgcolor="blue"
        ),
        ft.Column(
            [
                ft.Image(src="assets/sale.jpg"),
                ft.Text(f"price is ${price.value}", size=25, weight=ft.FontWeight.BOLD),
                ft.Text("buy this clothes", weight=ft.FontWeight.BOLD, size=25),
                ft.Row(
                    [
                        ft.IconButton(
                            "remove", bgcolor="red200", on_click=decrementbtn
                        ),
                        mycounter,
                        ft.IconButton("add", bgcolor="blue200", on_click=incrementbtn),
                    ],
                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                ),
                ft.Row(
                    [
                        totalprice,
                        ft.ElevatedButton("Pay Now", bgcolor="green", color="white"),
                    ],
                    alignment=ft.MainAxisAlignment.SPACE_BETWEEN,
                ),
            ]
        ),
    )


ft.app(target=main, assets_dir="assets")

As you can see, I had to change quite a bit to make it work. If you have any questions regarding my changes, feel free to ask them.

To answer your initial question though:
The total_price Text didn't change because you never added it to the page. You instead added another Text that you gave the value of total_price as its value. Since you never changed the value of the Text that actually got added to the page, it didn't update.

[bobwatcherx]

how about this code . when the paynow click is green, the total price still doesn't change

from flet import *
import webbrowser
import jinja2
import os
import midtransclient
import random
import string


snap = midtransclient.Snap(
    is_production=False,
    server_key='SB-Mid-server-222',
    client_key='SB-Mid-client-rFG90-wwww'
)


def main(page:Page):
    price = Text(1200,size=25,weight="bold")
    mycounter = Text(1,size=25,weight="bold")
    totalprice = Text(int(price.value) * int(mycounter.value))

    youname = TextField(label="name")
    youemail = TextField(label="email")
    youphone = TextField(label="phone")
    

    def incrementbtn(e):
        global totalprice
        mycounter.value  = int(mycounter.value) + 1
        totalprice = int(mycounter.value) * int(price.value)
        print("harga",totalprice)
        print("counter",mycounter.value)
        page.update()

    def decrementbtn(e):
        global totalprice
        mycounter.value  = int(mycounter.value) + 1
        
        print("counter",mycounter.value)
        totalprice = int(mycounter.value) * int(price.value)
        page.update()
        if mycounter.value < 1:
            totalprice = 1 * price.value
            mycounter.value = 1
        print("total",totalprice)
        page.update()


    def buynow(e):
        random_uid  = ''.join(random.choices(string.ascii_letters + string.digits, k=10))

        param = {
            "transaction_details": {
                "order_id": random_uid,
                "gross_amount": totalprice
            }, "credit_card":{
                "secure" : True
            },
             "customer_details": {
              "first_name": youname.value,
              "last_name": "",
              "email": youemail.value,
              "phone": youphone.value
            }
        }
        transaction = snap.create_transaction(param)
        transaction_token = transaction['token']
        env = jinja2.Environment(loader=jinja2.FileSystemLoader(searchpath='./'))
        template = env.get_template('index.html')
        rendered = template.render(json_data={'snap_token': transaction_token})
        with open('payment.html', 'w') as f:
            f.write(rendered)
        # Ubah file payment.html agar snap_token diisi dengan transaction_token
        with open('payment.html', 'r') as f:
            content = f.read()
            content = content.replace('const snap_token = "";', f'const snap_token = "{transaction_token}";')
        with open('payment.html', 'w') as f:
            f.write(content)

        # Buka browser default (Firefox) dan tampilkan halaman HTML
        browser = webbrowser.get('firefox')
        browser.open('file://' + os.path.realpath('payment.html'))
        
        dialog.open = False
        page.update()


    def completeregistration(e):
        
        page.dialog = dialog
        dialog.open = True
        page.update()



    dialog  = AlertDialog(
        title=Text("Complete you data",size=25,
                weight="bold"),
        shape=CountinuosRectangleBorder(
                radius=2
                ),
        content=Column([
            youname,
            youemail,
            youphone,
            Text(f"Total price is ${totalprice.value}",
                size=25,weight="bold"
                )
            ]),
        actions=[
            ElevatedButton("buy",
                bgcolor="blue",color="white",
            on_click=buynow
            )
        ],
        actions_alignment="end"        
            )

    page.add(
    AppBar(
    title=Text("Flet Shopping",size=30,color="white"),
    bgcolor="blue"
    ),
    Column([

    Image(src="assets/sale.jpg"),
    Text(f"price is ${price.value}",size=25,weight="bold"),
    Text("buy this clothes",weight="bold",size=25),
    Row([
        IconButton("remove",
        bgcolor="red200",
        on_click=decrementbtn
        ),
        mycounter,
        IconButton("add",
        bgcolor="blue200",
        on_click=incrementbtn

        ),
        
    ],alignment="spaceBetween"),
    Row([
        ElevatedButton("Pay Now",
        bgcolor="green",color="white",
        on_click=completeregistration
        )
        ],alignment="spaceBetween")
        ])
    )

flet.app(target=main,assets_dir="assets")

[iron3oxide]

Again, you never actually add totalprice to the page so updates to it won't be visible. Also, you still seem to treat it as an Integer in some places even though it isn't.

On another note: is this a side project or do you plan to run this as an actual web shop?

[bobwatcherx]

thanks it worked fine . I only make limited testing only for learning. this will be useful for other people who have the same case thanks

[iron3oxide]

Alright, no problem. If you ever want to do this for more than just testing, maybe you could try writing a flet storefront for a headless e-commerce system like medusajs or saleor?

If you don't have any more questions, please mark this thread as the answer, so other people can see at a glance that this discussion is resolved.