Improper UI rendering

[maxilon001]

Testing on the flet android app, I get the following:

But Testing on the web I get the following:

It's the same code.

import flet as ft

imgsrc='/storage/emulated/0/Download/3007c29193e1470f940b9a517c9097ed.png'

class Image:
  def __init__(self,image=None,scale=1,borderRadius=360):

    self.imageObj=ft.Image(src=image,border_radius=ft.border_radius.all(borderRadius),)

    self.image=ft.Container(self.imageObj,scale=ft.Scale(scale),border_radius=ft.border_radius.all(borderRadius),bgcolor='00ffffff',offset=ft.Offset(0,0))

class ProgressThumb:
  def __init__(self,color='blue'):
    self.thumb=ft.Container(content=ft.Image( src=imgsrc,scale=ft.Scale(0 )),border_radius=ft.border_radius.all(360),bgcolor='red' )
    self.thumbHouse=ft.Container(content=self.thumb,border_radius=ft.border_radius.all(360),bgcolor='black', border=ft.border.all(8, color=color),scale=ft.Scale(0.06), offset=ft.Offset(x=None,y=0.465 ))

class ProgressRing(ProgressThumb):
  def __init__(self,value=0, borderRadius=360,strokeWidth=3   ,scale=1,img='/storage/emulated/0/Download/3007c29193e1470f940b9a517c9097ed.png' ,color='blue'):

    ProgressThumb.__init__(self,color=color)

    pad=0 
    self.ringObj=ft.ProgressRing(value=value,stroke_width=strokeWidth,scale=ft.Scale(0.93 ), bottom=pad,top=pad,left=pad, right =pad )

    self.ring=ft.Container(content=ft.Stack([self.ringObj,self.thumbHouse,ft.Image( src=img,scale=ft.Scale(0 ))]),scale=ft.Scale(scale),border_radius=ft.border_radius.all(borderRadius), alignment=ft.alignment.center,bgcolor='#00ffffff',)

class TimerText:
  def __init__(self,text='3.00  3.40',borderRadius=360,scale=1):
    self.text=ft.Text(text,size=10 )

    self.timerText=ft.Container(ft.Stack([ft.Row([self.text], alignment='center',offset=ft.Offset(x=None,y=14.9)),ft.Image( src=imgsrc,scale=ft.Scale(0))]),border_radius=ft.border_radius.all(borderRadius),scale=ft.Scale(scale))

class TrackUi(Image, ProgressRing,TimerText):
  def __init__(self,
    ringValue=0,
    ringStrokewidth=3  ,
    imageSrc='',
    border_radius=360,
    ringScale=1,
    imageScale=1,
    scale=1,
    text="3:00   4:56",
    textScale=1
  ):

    self.textScale=textScale
    self.text=text
    self.ringValue=ringValue
    self.ringStrokewidth=ringStrokewidth
    self.imageSrc=imageSrc
    self.border_radius=border_radius
    self.scale=scale
    self.ringScale=ringScale
    self.imageScale=imageScale

    Image.__init__(self,image=self.imageSrc,borderRadius=self.border_radius,scale=self.imageScale,)

    ProgressRing.__init__(self,value=self.ringValue,strokeWidth=self.ringStrokewidth,scale=self.ringScale,)

    TimerText.__init__(self,self.text,scale=textScale)

    self.track=ft.Stack(controls=[self.ring,self.timerText,self.image], scale=ft.Scale(scale))

def main(page):
  sc=0.6
  trackObj=TrackUi(imageSrc=imgsrc,imageScale=sc,ringValue=1,ringScale=sc+0.2, scale=1 ,textScale=sc+0.1)
  track=trackObj.track
  page.add(track)
  page.theme_mode='dark'
  page.update()

if __name__=='__main__':
  ft.app(main)

Please how do I fix this.

[ndonkoHenri]

But Testing on the web I get the following:

Can you provide more details to this? Which browser? How you got there etc.

[maxilon001]

But Testing on the web I get the following:

Can you provide more details to this? Which browser? How you got there etc.

I used to cli command

flet run --web -r

And tested on multiple browsers Chrome,Opera Mini,Via But I got a similar result. I have been able to manage the situation by restructuring the app and adding the image file to assets folder and making reference to the file in the assets folder from the app instead of using the absolute path to the file that is not in the assets folder. After restructuring the app it no longer collapses if the image isn't available or if absolute path is used.

With absolute path:

With reference to the image file in the assets folder:

[ndonkoHenri]

I have been able to manage the situation by restructuring the app and adding the image file to assets folder and making reference to the file in the assets folder from the app instead of using the absolute path to the file that is not in the assets folder.

That's actually the way to go, as per the docs.

If your issue has been resolved, please close the issue.