Видео

thanks😍 cool👍️

the code not work

This was mighty useful. One question though: The use of UserControl is deprecated. How to define the class in that case?

Gracias por el video hay segunda parte?

How do you use Hot reload? reflex run does not activate hot reloading on my local

i joined your patreon, where can i download this

Man, your videos are amazing. Do you have a course about flet?

Very instructive code in its structuring. In version Flet 0;23.2 to create a data row we need to use data = ft.DataRow(cells[]), instread of ft.DataRow() (in def fill_data_table(self) ). Thank you very much

17:59

Very good job! I created an apk using the procedure detailed on the flet website but the database is not created when installing the app. I would appreciate your help.

Please share the written final code

Thanks good video. Would like to study at a slower pace. Is the source code available?

How did you fix the websocket connection error to the backend at the end of the video?

import reflex as rx class Content(rx.State): # dumy data for show ... links: list[dict[str, str]] = [ {"label": "Usage", "link": "#usange", "color": "hsl(160.1 84.1% 39.4%)"}, {"label": "Postion and placement", "link": "#position", "color": "gray"}, {"label": "With oter overlays", "link": "#overlays", "color": "gray"}, {"label": "Manage focus", "link": "#focus", "color": "gray"}, {"label": "Examples", "link": "#1", "color": "gray"}, {"label": "Show on focus", "link": "#2", "color": "gray"}, {"label": "Show on hover", "link": "#3", "color": "gray"}, {"label": "With form", "link": "#usange", "color": "gray"}, ] # ... keep track of menu item via indexing index: int = 0 # ... the dynami postion that changes with on_click envet position_y: str = "10px" async def toggle_menu_item(self, index: int, item: dict[str, str]): # ... first, update the link list(color key) self.links = [ ( {**data, "color": "gray"} if data["label"] != item["label"] else {**data, "color": "hsl(160.1 84.1% 39.4%)"} ) for data in self.links ] # ... second, update the position of the indicator # ... 30 is the height of the item within the menu.. # ... 10 is the offset taken from the height of the indicator.. self.position_y = f"{10 + (index * 30)}px" # start off by creating the TOC header ... def item_header(): return rx.hstack( rx.icon(tag="puzzle", size=12), rx.text( "Menu Item 안녕", font_size="12px", color_scheme="gray", weight="medium" ), width="200px", height="30px", justify="start", align="center", border_left="1px solid hsl(0, 0%, 20%)", border_radius="0px 5px 5px 0px", padding_left="15px", bg="hsl(0, 0%, 13%)", ) # ... create a function for each menu item def item(index: int, data: dict[str, str]): return rx.hstack( rx.link( rx.text( data["label"], font_size="12px", color=data["color"], # on_click=Content.toggle_menu_item(index, data), on_click=Content.toggle_menu_item(index, data), ), href=data["link"], # optionally... text_decoration="none", ), width="200px", height="30px", justify="start", align="center", border_left="1px solid hsl(0, 0%, 20%)", border_radius="0px 5px 5px 0px", padding_left="15px", _hover={"bg": "hsla(0, 0%, 18%, 0.81)"}, ) # ... create the dynamic indicator for the menu def indicator(): return rx.box( width="10px", height="10px", border_radius="10px", border="1px solid hsl(160, 84%, 39%)", bg="hsl(0, 0%, 10%)", position="absolute", left="-4.5px", top=Content.position_y, transition="all 200ms ease-in", ) @rx.page("/", "Index Page") def index(): # return rx.text("Hello.") return rx.center( rx.vstack( item_header(), rx.vstack( # ... place the indicator within relative vstack indicator(), # ... user a for each logic to iterate over the data rx.foreach( Content.links, lambda data, index: item(item, data), ), spacing="0", position="relative", ), spacing="0", # position="relative", ), display="flex", width="100%", height="100vh", bg="hsl(0, 0%, 10%)", ) app = rx.App(theme=rx.theme(accent_color="gray")) app.add_page(index) (venv) PS C:\work\pyside6\test1> reflex run Warning: Windows Subsystem for Linux (WSL) is recommended for improving initial install times. ──────────────────────────────────────────────────────────────────────────────────────── Starting Reflex App ──────────────────────────────────────────────────────────────────────────────────────── Traceback (most recent call last): File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\event.py", line 200, in __call__ values.append(Var.create(arg, _var_is_string=isinstance(arg, str))) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\vars.py", line 610, in create raise VarTypeError( reflex.utils.exceptions.VarTypeError: No JSON serializer found for var <function item at 0x000001BF623E5440> of type <class 'function'>. The above exception was the direct cause of the following exception: Traceback (most recent call last): File "<frozen runpy>", line 198, in _run_module_as_main File "<frozen runpy>", line 88, in _run_code File "C:\work\pyside6\test1\venv\Scripts eflex.exe\__main__.py", line 7, in <module> File "C:\work\pyside6\test1\venv\Lib\site-packages\typer\main.py", line 338, in __call__ raise e File "C:\work\pyside6\test1\venv\Lib\site-packages\typer\main.py", line 321, in __call__ return get_command(self)(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages\click\core.py", line 1157, in __call__ return self.main(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages\typer\core.py", line 728, in main return _main( ^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages\typer\core.py", line 197, in _main rv = self.invoke(ctx) ^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages\click\core.py", line 1688, in invoke return _process_result(sub_ctx.command.invoke(sub_ctx)) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages\click\core.py", line 1434, in invoke return ctx.invoke(self.callback, **ctx.params) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages\click\core.py", line 783, in invoke return __callback(*args, **kwargs) ^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages\typer\main.py", line 703, in wrapper return callback(**use_params) ^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages eflex eflex.py", line 283, in run _run(env, frontend, backend, frontend_port, backend_port, backend_host, loglevel) File "C:\work\pyside6\test1\venv\Lib\site-packages eflex eflex.py", line 209, in _run prerequisites.get_compiled_app() File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\utils\prerequisites.py", line 292, in get_compiled_app app._apply_decorated_pages() File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\app.py", line 799, in _apply_decorated_pages self.add_page(render, **kwargs) File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\app.py", line 518, in add_page component = self._generate_component(component) ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\app.py", line 451, in _generate_component raise e File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\app.py", line 440, in _generate_component return component if isinstance(component, Component) else component() ^^^^^^^^^^^ File "C:\work\pyside6\test1\test1\test1.py", line 106, in index rx.foreach( File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\components\core\foreach.py", line 85, in create component.children = [component._render().render_component()] ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\components\tags\iter_tag.py", line 124, in render_component component = self.render_fn(arg, index) ^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\test1\test1.py", line 108, in <lambda> lambda data, index: item(item, data), ^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\test1\test1.py", line 65, in item on_click=Content.toggle_menu_item(index, data), ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ File "C:\work\pyside6\test1\venv\Lib\site-packages eflex\event.py", line 202, in __call__ raise EventHandlerTypeError( reflex.utils.exceptions.EventHandlerTypeError: Arguments to event handlers must be Vars or JSON-serializable. Got <function item at 0x000001BF623E5440> of type <class 'function'>.

Hey,thank you ❤. Is there anyway I can change color of textfield basing on the type of value? Say red if string,and black if float?

i have not started but does'nt it look kinda slow ? with the animated side bar menu , when the dot changes from one option to another one the transition is quite slow

❤❤

thanks

is that androis ios simulator in vscode? or xcode ios simulator?

This for Android application or desktop?

Very good your project

how to display the default keys in using a def?

Amazing work

شكرا لك على المشاركة

Can i add checkbox on every line ? , how ?

awesome man i just started reflex and i love your videos i appreciate ❤

شكرا جزيلا و فضلا منك شرح oop مستوى متقدم 🙏

I think this is hard. Why doesn't Flet use HTML for layout work?

is this also responsive on mobile and desktop?

please can you make a video on integrating django and flet? it will be really helpful.....

Lovely. Can we get a tutorial on building an e-commerce web app

Thank you. Will there be more videos about Flet?

The seconde one Thank you So helpfull

Am the first to comment.😂 Nice video

need source code

Try FastHTML a new fullstack framework for python

Good! Very good!

its good but please give more information like if i am then just show me a single page of sign in other show me single page of register or when in sign or log in then open a next page where from application runs

Thanks for the great video! When I tried flet build web, I got errors. Then I tried to create the most basic project and include in my requirements only flet and Pyrebase4, and the build still failed. When I removed pyrebase from the requirements the build passed. Is there an issue with building using Pyrebase4? Could you make a video on publishing our app?

You have the passion and innate ability to teach things like programming in Rust expressing things with comments in the code. Thanks a lot for you commitment and time in creating videos like this!

how do you covert this into an apk?

Would be great if you try to do the same app and testing on an android enviroment. Get access in android it's pretty hard.

Do you know how to fix the names of datatable headers?

Hello, do you know how to fix the datatable headers?

thanks a lot, please make cool stuff anymore!

Hi!, i've got a 2 questios, 1) why do you use async for database? and 2) Im builing a crud app, the thing is i have got several paes, and in each one, the user can insert/delete or update data. If the user changes de table in one of the pages, the other pages dont reflect the new changes, do you have any suggestions in how to aproach this? Thank, i love ur videos

Its really amazing to see the pages(routing)update on the go.

nice tutorial

Hi, I followed you on GitHub since June. I’ve just discovered you had a RUclips Channel. Really impressive. Could you share the code on your videos on GitHub because please ?