Blank screen when building an app to both 'windows' and 'apk'

[Jorge-lopz]

Description

After the last flet update, I tried building my app for both windows and apk, and, to my surprise, they didn't work as expected and I was presented with a blank screen (empty dark grey, to be precise, as I use dark theme in the app). The building process works fine, though, no errors reported and both .exe and .apk files are created.

Running the app from the play button on the IDE (Pycharm), 'flet run' and 'flet run --android' works just fine.

I even tried simplifying my code the most I could and leave just a single screen (Flet View), but nothing works. I have also tried to build other projects i found online and most of them didn't work, even the simplest of them. Some of them did work, but they were just 10 lines of code, a screen with a Text element.

Simplified code to reproduce the issue:

from flet import *
import flet as ft

# ---------------------------------------------------- MAIN --------------------------------------------------------- #

def main(page: ft.Page):
    page.title = 'Test'
    page.theme_mode = ft.ThemeMode.DARK  # The default theme mode
    page.go('/welcome')

    def route_change(e) -> None:
        page.views.clear()

        if page.route == ('/welcome'):
            page.views.append(welcome(page))

        # Other routes and their respective layout

        page.update()

    page.on_route_change = route_change
    page.go(page.route)

# --------------------------------------------------- LAYOUTS ------------------------------------------------------- #

def welcome(page: ft.Page):
    welcomeContent = (ft.Column(controls=[
        Row(controls=[ft.Image(src=LOGO, error_content=Text("Logo", italic=True))],
            width=200, height=200),
        Row(height=30),
        Row(controls=[
            Text(" WELCOME TO", color=BlackORWhiteText(page.theme_mode), weight=FontWeight.W_600,
                 size=24, font_family='Calibri')], alignment=MainAxisAlignment.CENTER),
        Row(controls=[
            Text("HELPING HANDS", color=BlackORWhiteText(page.theme_mode), weight=FontWeight.W_700,
                 size=35, font_family='Calibri')], alignment=MainAxisAlignment.CENTER),
        Row(height=15),
        Row(spacing=25, controls=[
            OutlinedButton("Login", on_click=lambda _: page.go('/login'),
                           style=OutlinedButtonStyle(page.theme_mode)),
            OutlinedButton("Register", on_click=lambda _: page.go('/register'),
                           style=OutlinedButtonStyle(page.theme_mode))
        ], alignment=ft.MainAxisAlignment.CENTER)
    ],
        expand=True, alignment=ft.MainAxisAlignment.CENTER, horizontal_alignment=ft.CrossAxisAlignment.CENTER))

    ctrl = Container(expand=True, content=welcomeContent, margin=-10,
                     gradient=RadialGradientStyle(page.theme_mode))

    return (View(
        route='/welcome',
        padding=10,
        spacing=25,
        controls=[SafeArea(ctrl, expand=True)],
        vertical_alignment=MainAxisAlignment.CENTER,
        horizontal_alignment=CrossAxisAlignment.CENTER)
    )

# ---------------------------------------------------- STYLES -------------------------------------------------------- #

LOGO = f"https://raw.githubusercontent.com/Paco-Rubio/HAssets/main/Helping%20Hands.png"
BUTTONTEXTCOLOR = 'BLACK'
BUTTONBGCOLOR = ft.colors.with_opacity(1, ft.colors.WHITE)
BUTTONOVERLAYCOLOR = ft.colors.with_opacity(0.1, ft.colors.BLACK)

def BlackORWhiteText(theme):
    if theme == "DARK":
        return "WHITE"
    else:
        return "BLACK"

def OutlinedButtonStyle(theme):
    if theme == 'DARK':
        return (
            ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=20), side=ft.BorderSide(1.5, color='#ffffff'),
                           color=BUTTONTEXTCOLOR, bgcolor=BUTTONBGCOLOR, overlay_color=BUTTONOVERLAYCOLOR))
    else:
        return (
            ft.ButtonStyle(shape=ft.RoundedRectangleBorder(radius=20),
                           side=ft.BorderSide(1.5, color='#000000'),
                           color=BUTTONTEXTCOLOR, bgcolor=BUTTONBGCOLOR, overlay_color=BUTTONOVERLAYCOLOR))

def RadialGradientStyle(theme):
    if theme == 'DARK':
        return ft.RadialGradient(
            center=ft.Alignment(0, -1.25),
            radius=1.4,
            colors=[
                "#3A8096",
                "#050A10",
            ])
    else:
        return ft.RadialGradient(
            center=ft.Alignment(0, -1.25),
            radius=1.4,
            colors=[
                # "#3A8096",
                '#E0E3E7',
            ])

ft.app(main)

Windows build log (flet build windows):

Flutter bootstrap directory: C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl
Creating Flutter bootstrap project...OK
Customizing app icons and splash images...Copying C:\Users\jlpen\Desktop\Helping Hands Flet - copia\assets\icon.ico to C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\images
OK
Generating app icons...Resolving dependencies in C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl... (3.2s)
Got dependencies in C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl.
Building package executable... (3.8s)
Built flutter_launcher_icons:flutter_launcher_icons.
  ════════════════════════════════════════════
     FLUTTER LAUNCHER ICONS (v0.13.1)
  ════════════════════════════════════════════

• Creating default icons Android
• Overwriting the default Android launcher icon with a new icon
• Overwriting default iOS launcher icon with new icon
Creating Icons for Web...
Creating Icons for Windows...
Creating Icons for MacOS...

✓ Successfully generated launcher icons
OK
Packaging Python app...Building package executable... (2.3s)
Built serious_python:main.
Running package command
Creating asset directory: C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\app
Copying Python app from C:\Users\jlpen\Desktop\Helping Hands Flet - copia to C:\Users\jlpen\AppData\Local\Temp\serious_python_temp9be08557
Installing dependencies [flet-embed~=0.18.0] with pip command to C:\Users\jlpen\AppData\Local\Temp\serious_python_temp9be08557\__pypackages__
Extracting Python distributive from C:\Users\jlpen\AppData\Local\Temp\cpython-3.11.6+20231002-x86_64-pc-windows-msvc-shared-install_only.tar.gz to C:\Users\jlpen\AppData\Local\Temp\hostpython3.11_2359bdea
Compiling Python sources at C:\Users\jlpen\AppData\Local\Temp\serious_python_temp9be08557
Delete unnecessary files with extensions: [.py, .c, .h, .typed, .exe]
Delete unnecessary files and directories: [__pycache__, bin]
Creating app archive at C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\app/app.zip from C:\Users\jlpen\AppData\Local\Temp\serious_python_temp9be08557
Deleting temp directory C:\Users\jlpen\AppData\Local\Temp\serious_python_temp9be08557
Deleting Python directory C:\Users\jlpen\AppData\Local\Temp\hostpython3.11_2359bdea
OK
Building Windows app...['C:\\Users\\jlpen\\FlutterSDK\\flutter\\bin\\flutter.BAT', 'build', 'windows']
Resolving dependencies... 
  fl_chart 0.65.0 (0.66.0 available)
  flutter_lints 2.0.3 (3.0.1 available)
  flutter_native_splash 2.3.7 (2.3.9 available)
  js 0.6.7 (0.7.0 available)
  lints 2.1.1 (3.0.0 available)
  matcher 0.12.16 (0.12.16+1 available)
  material_color_utilities 0.5.0 (0.8.0 available)
  meta 1.10.0 (1.11.0 available)
  package_info_plus 4.2.0 (5.0.1 available)
  path 1.8.3 (1.9.0 available)
  petitparser 5.4.0 (6.0.2 available)
  test_api 0.6.1 (0.7.0 available)
  toml 0.14.0 (0.15.0 available)
  web 0.3.0 (0.4.0 available)
  web_socket_channel 2.4.0 (2.4.3 available)
  xml 6.3.0 (6.5.0 available)
Got dependencies!
16 packages have newer versions incompatible with dependency constraints.
Try `flutter pub outdated` for more information.

windows/flutter/CMakeLists.txt does not use FLUTTER_TARGET_PLATFORM, updating.
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\ZERO_CHECK.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\plugins\serious_python_windows\CopyPythonDLLs.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\flutter\flutter_assemble.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\flutter\flutter_wrapper_plugin.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\plugins\audioplayers_windows\audioplayers_windows_plugin.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\flutter\flutter_wrapper_app.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\plugins\screen_retriever\screen_retriever_plugin.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\plugins\serious_python_windows\serious_python_windows_plugin.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\VC\Tools\MSVC\14.38.33130\include\format(42): warning STL4038: The contents of <format> are available only with C++20 or later. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\plugins\serious_python_windows\serious_python_windows_plugin.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\plugins\url_launcher_windows\url_launcher_windows_plugin.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\plugins\window_manager\window_manager_plugin.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\plugins\window_to_front\window_to_front_plugin.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\runner\helping_hands_flet_copia.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\ALL_BUILD.vcxproj]
C:\Program Files\Microsoft Visual Studio\2022\Community\MSBuild\Microsoft\VC\v170\Microsoft.CppBuild.targets(541,5): warning MSB8029: El directorio intermedio o el directorio de salida no pueden estar en el directorio temporal, ya que podr�a dar lugar a problemas con la compilaci�n incremental. [C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl\build\windows\x64\INSTALL.vcxproj]
Building Windows application...                                   241,8s
√  Built build\windows\x64\runner\Release\helping_hands_flet_copia.exe (0.1MB).
OK
Copying build to build\windows directory...OK
Deleting Flutter bootstrap directory C:\Users\jlpen\AppData\Local\Temp\flet_flutter_build_tGvMXtoqTl
Success!

Results:

As I said, a blank screen:

Expected

A simple welcoming screen:

Flet version (pip show flet):

Name: flet
Version: 0.18.0
Summary: Flet for Python - easily build interactive multi-platform apps in Python
Home-page: 
Author: Appveyor Systems Inc.
Author-email: hello@flet.dev
License: Apache-2.0
Location: C:\Users\jlpen\AppData\Local\Programs\Python\Python311\Lib\site-packages
Requires: cookiecutter, flet-runtime, packaging, qrcode, watchdog, websocket-client, websockets
Required-by: flet-fastapi

Operating system:

Windows 11 Pro, 23H2, 22631.3007

[taaaf11]

I cannot reproduce the problem with the given code... The app runs fine. Except the text Welcome to ... does not appear. Change the return of BlackORWhiteText to ft.colors.WHITE and ft.colors.BLACK. Actually, the values of ft.colors.WHITE (and the other one) is "white" and "black", not "WHITE" or "BLACK". Try this solution...

[Jorge-lopz]

Wait, you built the app and it worked?

Building the app rn, I'll let you know as soon as it finishes.

[taaaf11]

Nope. I hope it works 🥹

Also, @Paco-Rubio did you make the changes I told in my above comments?

[Jorge-lopz]

I changed the BlackORWhiteText function. I also changed any "black", "white", "dark" and "light" I could find to the corresponding flet expression and..... IT WORKED!!!

I'm going to apply the same concept to the full project (that is way bigger than this code), and if it works I'll then close the issue.

Btw, I have two doubts you might be able to answer @taaaf11 : 1 - Could I move functions like 'welcome' or 'BlackORWhiteText' to separate python files? (To better organise the code into separate files ("main.py", "styles.py", "views.py")? Will the built app have access to all of them after importing them?

2 - How can i change the name of the installed apk on the phone (both the name shown during installation and the final app name)?

Anyways, it finally works on both Windows and Android!! I can't believe the smallest mistake can cause such trouble. Thanks a lot @taaaf11 .

[taaaf11]

@Paco-Rubio Is the apk on your android working fine?

[taaaf11]

@Paco-Rubio

Btw, I have two doubts you might be able to answer

1. Yes you can move them to other files. But I have a little improvement... You are using camelCase for function definitions, while they should be used for class names. Function names should be in lowercase.
2. There are command line options for flet.exe, you can have a look at them. Try with --project options. The name of the directory (or folder) in which you are having "reduces" into app name. This is what I've observed.

P.S: Tell me when --project works for you... It is something I am struggling with too. And the app just gets the name of the "main" directory in lowercase.

[Jorge-lopz]

Okk, again, thanks a lot, closing this issue now.

[FeodorFitsner]

I guess dealing with "white", "blank" or "black" screens is getting high priority now. :) We need to see a proper error if something goes wrong.

[Jorge-lopz]

Ok, can confirm that putting the project back together and building it still doesn't work.

I have applied changes to all "black", "white", "dark" and "light" occurrences, but still nothing. I'm trying to gradually simplify the code to see what actually breaks the app.

[taaaf11]

I guess dealing with "white", "blank" or "black" screens is getting high priority now. :) We need to see a proper error if something goes wrong.

@FeodorFitsner I think "raise" a warning when user gives unexpected values like, "BLACK" instead of "black", so that this can prevent heavy confusions...

[Jorge-lopz]

Update, i was able to build a different simplified version of the app (*) . After this, I kept adding some other parts to the code to progressively complicate it and test the app every time (the built version that is).

Everything was going good, too good to be true, but then I turn of my computer.

Now I start it again and, just to check, i build the app again (no changes made since the last correctly built version) and... It doesn't work.

I really don't understand, now not even the simplified version from the start works. @FeodorFitsner @taaaf11

[taaaf11]

@Paco-Rubio You can have a conversation with me on my email, if you want to... This issue is going long... here is my mail taafuuu@gmail.com. Create a repo that contains the simplified version of the code. I will review it...

[jsyoo3722]

Is there any updates on this thread? If anyone has found the solution to this issue, I would appreciate it if you share it. I'm having the same issue with my app.

"flet build windows" and "flet build apk" both result in blank app windows. flet pack and pyinstaller work great in the meantime.

[taaaf11]

@jsyoo3722 Create a repository with the repro code so that I can review it.

[Jorge-lopz]

Ok, update, this time a positive one, i guess... @jsyoo3722 After literal days of testing and compiling, I finally found the error.

Turns out that using this line in your code breaks the compiled app (both windows and apk): 'from flet.security import encrypt, decrypt'. The reason it took me so long to figure it out was that this exact line was copied from the official flet documentation (https://flet.dev/docs/guides/python/encrypting-sensitive-data#encrypting-data). I also had the required dependencies (cryptography) installed.

Combining the "white" and "black" fixes and removing this import fixed the issue and I'm now able to compile my entire codebase into a fully functioning app.

If any more help is needed or any other questions arise regarding this topic, @ me and I'll be willing to help.

[jsyoo3722]

@taaaf11 Thank you for your kind offer, but I'll try digging up and try to figure out which code is causing the error by adding each line of codes from the scratch. It's just an app that I'm creating for fun anywas. So, I'll do some more work myself before wasting your time. I really appreciate your offer.

@Paco-Rubio Thank you for sharing what you have found out. I'll just try doing the same thing, and share what happened to cause the error in my case.

[taaaf11]

@jsyoo3722 Like I mentioned my mail above, you can ask me any time without hesitance.

[FeodorFitsner]

Try building app with the latest Flet 0.19.0. It has error reporting now if the app could not be started.

[ixenion]

Try building app with the latest Flet 0.19.0. It has error reporting now if the app could not be started.

Where can I see these "error reportings"? Have same issue: successfully build .apk, but got blank white screen. And Iv even tested it on blank project aka "flet create ." - same issue

[Marmaduke1st]

Can i ask how you get the log information of flet build windows ?? I cant seem to find any info on it.

[ixenion]

Can i ask how you get the log information of flet build windows ?? I cant seem to find any info on it.

My issue was solved in flet v0.23.2

[whattfkk]

`import flet as ft

def main(page): def handle_nav_change(e): if e.control.selected_index == 0: page.controls = [] elif e.control.selected_index == 1: page.controls = [ft.Text("Commute!")] elif e.control.selected_index == 2: page.controls = [ft.Text("Notes!")] elif e.control.selected_index == 3: page.controls = [login_field, password_field, login_button] page.update()

login_field = ft.TextField(label = 'Username')
password_field = ft.TextField(label = 'Password', password = True, can_reveal_password=True)
login_button = ft.ElevatedButton(text = "Sign in")

page.title = "Star"
page.navigation_bar = ft.NavigationBar(
    on_change=handle_nav_change,
    destinations=[
        ft.NavigationBarDestination(icon= 'chat_outlined', selected_icon='chat_rounded', label="Chats"),
        ft.NavigationBarDestination(icon='explore_outlined', selected_icon='explore_rounded', label="Find"),
        ft.NavigationBarDestination(
            icon='bookmark_border',
            selected_icon='bookmark',
            label="Notes",
        ),
        ft.NavigationBarDestination(icon='person_outlined', selected_icon='person_rounded', label="You"),
    ],
)
page.add(ft.Text('mrak'))

ft.app(target=main) `

hi guys, i have a problem this app doesn't launch after flet build windows, what should i do? help me please

[whattfkk]

oh, and NavigationBar example from flet.dev also doesn't launch after build