Replies: 2 comments
-
|
Please share runnable code. (Will also be nice, if you could reduce the code size only on the essentials.) |
Beta Was this translation helpful? Give feedback.
0 replies
-
|
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:
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
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
MarketView:
Beta Was this translation helpful? Give feedback.
All reactions