[Question] Proper usage of ft.BoxDecoration with multi-page apps

[mvolar]

Question

Hello,

I found this guide on implementing BoxDecoration to get a background image, which works for this simple example. However, once I try to implement it on a multi page app, the image doesn't render. My app follows the Trello clone layout techniques, and I have tried setting the page decoration on all control levels by passing the Page control further down the chain:

Code sample

AppLayout

class AppLayout(ft.Row):
    def __init__(
        self,
        app,
        page: ft.Page,
        *args,
        **kwargs
    ):
        super().__init__(*args, **kwargs)
        self.app = app
        self.page = page

        self.divider = ft.Column([ft.Container(
                    bgcolor=ft.Colors.BLACK26,
                    height=2000,
                    width=1
        )])

        self.page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.COVER,
                                 opacity=0.2)
    )
        self.sidebar = navigation.NavRail(self.page)
        self.built_sidebar = self.sidebar.build()
        
        self.market_view = MarketView(self.page,self.app).build()

        self._active_view = self.newbet_view

        self.expand=True
        self.controls = [self.built_sidebar,self.divider,self.active_view]


        
    @property
    def active_view(self):
        return self._active_view

    @active_view.setter
    def active_view(self, view):
        self._active_view = view
        self.controls[-1] = self._active_view
        self.page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.COVER,
                                 opacity=0.2)
    )
        self.update()

    def set_market_view(self):
        self.active_view = self.market_view
        self.page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.COVER,
                                 opacity=0.5)
    )
        #self.sidebar.update()
        self.page.update()
 

MarketView:

class MarketView(ft.Container):
    def __init__(self,page: ft.Page,app):
        super().__init__()
        self.app = app
        self.page = page
        self.page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.COVER,
                                 opacity=0.2)
    )
        self.dropdown = DropDown()
        self.built_dropdown = self.dropdown.build()
        self.price_range = ft.RangeSlider(min=0,max=100,
                                        divisions=100,label="{value}",
                                        start_value=10,end_value=80)

        self.accept_button = ft.FloatingActionButton(icon=ft.Icons.CHECK, 
                                            text="Accept",
                                            on_click=self.accept_action,
                                            bgcolor=ft.Colors.LIME_300,
                                            expand=True,
                                            elevation=3
                                            )
        
        
        self.decline_button = ft.FloatingActionButton(icon=ft.Icons.BLOCK, 
                                            text="Decline",
                                            on_click=self.decline_action,
                                            bgcolor=ft.Colors.BLUE_ACCENT,
                                            expand=True,
                                            elevation=3
                                            )
        
        self.moving_row = ft.Row([self.accept_button,self.decline_button])
        bet = self.retrieve_random_bet()

        self.opponent = ft.Text(f"Opponent: {bet.instigator_name}")
        self.statement = ft.Text(f"Statement: {bet.statement}")
        self.ipay = ft.Text(f"{bet.instigator_name} pays {bet.ipay}")
        self.tpay = ft.Text(f"You would pay {bet.tpay}")
        self.due_date = ft.Chip(label=ft.Text(f"Due date: {bet.due_date}"),
                                bgcolor=ft.Colors.GREEN_200,
                                color=ft.Colors.GREEN_200)
        
        self.payrow = ft.Row([self.ipay,self.tpay])
        self.object = ft.Container(
            content=ft.Column(
                           [
                            self.opponent,
                            self.statement,
                            self.payrow,
                           self.due_date,
                           ],
                               alignment=ft.MainAxisAlignment.CENTER,
                               horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                             spacing=30 
                           ),
                 width=400,
                 height=400,
                 bgcolor=ft.Colors.BLUE_50,
                 padding=30,
                 border_radius=10,
                 animate_offset=ft.animation.Animation(duration=300, curve="easeIn"),
                 animate_opacity=ft.animation.Animation(duration=300, curve="easeIn")
                 )
            
            
       

    def accept_action(self,e):
        print("accepting")
        self.object.offset = ft.transform.Offset(1.5, 0)
        self.object.opacity = 0
        self.object.update()
        time.sleep(0.2)
        self.bet = self.retrieve_random_bet()
        self.statement.value = self.bet.statement
        self.object.offset = ft.transform.Offset(-1.5, 0)
        self.object.update()
        time.sleep(0.2)
        self.object.opacity = 1
        self.object.offset = ft.transform.Offset(0, 0)
        self.object.update()



    def decline_action(self,e):
        print("decline pressed")

    def retrieve_random_bet(self):
        bet: Bet = get_market_bet(category="none")
        return bet
    
    def build(self):
        self.page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.COVER,
                                 opacity=0.2)
    )
        self.bet = self.retrieve_random_bet()
        self.control = ft.Row([
            ft.Column([
            ft.Container(
        content=ft.Column(
                           [
                            self.built_dropdown,
                            ft.Row([self.object], expand=True, alignment=ft.MainAxisAlignment.CENTER),
                           self.moving_row,
                                                ],
                               alignment=ft.MainAxisAlignment.CENTER,
                               horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                             spacing=30 
                           ),
                 width=600,
                 height=500,
                 padding=5,
                 border_radius=10,
                 )
            ],
            alignment=ft.MainAxisAlignment.CENTER
        )
        ],
        expand=True,
        alignment=ft.MainAxisAlignment.CENTER,
        vertical_alignment=ft.CrossAxisAlignment.CENTER
        )
        return self.control
    

### Error message

_No response_

### ------------------------------------------------------

- [X] I have searched for answers to my question both in the issues and in previous discussions.

[ndonkoHenri]

Please share runnable code. (Will also be nice, if you could reduce the code size only on the essentials.)

[mvolar]

Thanks for the reply, minimal working code (only one view of my app and the essential route, however my widget styling remains):

import flet as ft
import datetime

class NewBetInterface(ft.Container):
    def __init__(self,page: ft.Page):#,cname,price,bet,date):
        super().__init__()

        self.page = page

        self.date_picker = ft.DatePicker(
        on_change=self.change_date,
        on_dismiss=self.date_picker_dismissed,
        first_date=datetime.datetime(2023, 10, 1),
        last_date=datetime.datetime(2024, 10, 1),
        )

        self.page.overlay.append(self.date_picker)
        self.br = 10

        self.target = ft.TextField(label="Target.",border=ft.InputBorder.UNDERLINE)
        self.statement = ft.TextField(label="Statement.",border=ft.InputBorder.UNDERLINE)
        self.ipay = ft.TextField(label="Ipay",border=ft.InputBorder.UNDERLINE,expand=True)
        self.tpay = ft.TextField(label="Tpay",border=ft.InputBorder.UNDERLINE,expand=True)
        self.payrow = ft.Row([self.ipay,self.tpay])

        self.date_button = ft.ElevatedButton(
        text=self.eval_date_picker(self.date_picker),
        icon=ft.Icons.CALENDAR_MONTH,
        on_click=lambda _: self.page.open(self.date_picker),
        bgcolor=ft.Colors.BLUE_50,
        expand=True,
        elevation=2
    )
        self.page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.FIT_WIDTH,
                                 opacity=0.8)
    )
    def eval_date_picker(self,e):
        if self.date_picker.value is not None:
            print("in eval")
            return self.date_picker.value.strftime('%d %b %Y')
        else:
            return "Pick Date"
        
    
    def change_date(self,e):
        print(f"Date picker changed, value is {self.date_picker.value}")
        self.date_button.text = self.eval_date_picker(self.date_picker)
        self.date_button.update()

    def date_picker_dismissed(self,e):
        print(f"Date picker dismissed, value is {self.date_picker.value}")
  
    def send_pressed(e,event):
        print("Send button clicked")
    
    def generate_pressed(e,event):
        print("Send button clicked")
  
    def decline_pressed(e,event):
        print("Decline button clicked")
        print(f"event: {event}")
        print(f"event: {e}")


    def build(self):
        self.page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.FIT_WIDTH,
                                 opacity=0.8))
        self.send_request = ft.FloatingActionButton(icon=ft.Icons.SEND, 
                                                    text="Send",
                                               on_click=self.send_pressed,
                                            bgcolor=ft.Colors.LIME_300,
                                            expand=True,
                                            elevation=3
                                            )
        self.generate_request = ft.FloatingActionButton(icon=ft.Icons.LINK, 
                                                    text="Generate one time link",
                                               on_click=self.generate_pressed,
                                            bgcolor=ft.Colors.BLUE_ACCENT,
                                            expand=True,
                                            elevation=3
                                            )
        self.generate_bet_row = ft.Row([self.send_request,self.generate_request],expand=True)
        self.object = ft.Row([
            ft.Column([
            ft.Container(
        content=ft.Column(
                           [
                               self.target,
                            self.statement,
                            self.payrow,
                           self.date_button,
                           self.generate_bet_row,

                           ],
                               alignment=ft.MainAxisAlignment.CENTER,
                               horizontal_alignment=ft.CrossAxisAlignment.CENTER,
                             spacing=30 
                           ),
                 width=500,
                 height=500,
                 bgcolor=ft.Colors.BLUE_50,
                 padding=30,
                 border_radius=10,
                 )
            ],
            alignment=ft.MainAxisAlignment.CENTER,
        )
        ],
        expand=True,
        alignment=ft.MainAxisAlignment.CENTER,
        vertical_alignment=ft.CrossAxisAlignment.CENTER
        )
        return self.object
    
class AppLayout(ft.Row):
    def __init__(
        self,
        app,
        page: ft.Page,
        *args,
        **kwargs
    ):
        super().__init__(*args, **kwargs)
        self.app = app
        self.page = page
        self.page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.COVER,
                                 opacity=1)
    )
        self.newbet_view = NewBetInterface(self.page).build()
        self._active_view = self.newbet_view
        self.expand=True
        self.controls = [self.active_view]
        self.date_button = ft.ElevatedButton(
        "Pick date",
        icon=ft.Icons.CALENDAR_MONTH,
        on_click=lambda _: self.date_picker.pick_date(),
    )
        
    @property
    def active_view(self):
        return self._active_view

    @active_view.setter
    def active_view(self, view):
        self._active_view = view
        self.controls[-1] = self._active_view
        self.page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.COVER,
                                 opacity=1)
    )
        self.update()

    def set_newbet_view(self):
        self.active_view = self.newbet_view
        self.page.update()



class TrelloApp(AppLayout):
    def __init__(self, page: ft.Page):
        self.page = page
        super().__init__(
            self,
            self.page,
            tight=True,
            expand=True,
            vertical_alignment="start",
        )
        self.page.on_route_change = self.route_change

    def initialize(self):
        self.page.views.append(
            ft.View(
                "/",
                [self],
            )
        )
        self.page.update()
        # create an initial board for demonstration if no boards
        self.page.go("/")

        
    def route_change(self, e):
        troute = ft.TemplateRoute(self.page.route)
        if troute.match("/"):
            self.page.go("/new_bet")
        elif troute.match("/new_bet"):
            self.set_newbet_view()
        else:
            print("Unknown route")
        self.page.update()


def main(page: ft.Page):

    page.title = "Stubet"
    page.padding = 0
    page.theme = ft.Theme(font_family="Kanit")
    page.theme.page_transitions.windows = "cupertino"

    app = TrelloApp(page)
    page.add(app)
    
    app.initialize()
    page.decoration = ft.BoxDecoration(
        image=ft.DecorationImage(src= "https://images.pexels.com/photos/259915/pexels-photo-259915.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1",
                                 fit = ft.ImageFit.COVER,
                                 opacity=1)
    )
    page.go("/new_bet")
    
ft.app(target=main, assets_dir="../assets")

This code generates this app: