Docs: adding a custom Flutter package to a Flet app

[vrescobar]

This is mostly a "docs" bug if something as I cannot find the way to import a dart/flutter existing module in flet directly. I looked for it but I cannot find any documented way.

I would like to know how to do that even if that is somehow a bit hacky and it isn't an explicit bridge and that means that it needs to recompile flet or something similar.

[vrescobar]

Now I just saw there is a Q&A forum, so I cross posted it there, however I will keep this open if doc improvement is needed

https://github.com/flet-dev/flet/discussions/2536

[auphof]

@FeodorFitsner is there any preliminary documentation, I could help towards getting towards a release and in that process may solve why I cant make part of it work.

Flutter Animated Text Kit integration into FLET

I have a POC partially working for integrating https://pub.dev/packages/animated_text_kit in a web view ie flet run example_animated_text_kit -w . Whilst non of the attributes are really implemented, my initial priority was to see if I can build and get a functioning flutter component. after building as outlined below in Build process

✅ flet run example_animated_text_kit -w works 😀😀😀 see animated GIF below

however 🧐 ❌ flet run example_animated_text_kit works but runs an existing flet from $HOME/.flet/bin/flet-0.22.0/flet/flet and it does not know about the new component

if i set export FLET_VIEW_PATH=$HOME/dev/SANDBOX/SANDBOX-flet/modules/flet/client/build/linux/x64/release/bundle ❌ flet run example_animated_text_kit fails with error FileNotFoundError: [Errno 2] No such file or directory: '/home/sllau/dev/SANDBOX/SANDBOX-flet/modules/flet/client/build/linux/x64/release/bundle/flet'

the following confirms there is no flet executable in ls -la $FLET_VIEW_PATH, I am obviously not building it correctly but believe I have followed /flet/CONTRIBUTING.md in repo. I have the web version working

Environment

WSL2 Ubuntu 22.04 on Windows 11 host Flet working repo branch: https://github.com/auphof/flet/commit/fe51c68599b58132dafd4294571dddf3b31d45ec

Build process

from what i have seen this is the process I am using for building and I presume I have got something wrong in building for use in my WSL2 Ubuntu22.04 development environment

cd $HOME/dev/SANDBOX/SANDBOX-flet/modules/flet/client
printenv | grep FLET
#confirm FLET_VIEW_PATH FLET_WEB_PATH
export FLET_VIEW_PATH=$HOME/dev/SANDBOX/SANDBOX-flet/modules/flet/client/build/linux/x64/release/bundle
export FLET_WEB_PATH="$HOME/dev/SANDBOX/SANDBOX-flet/modules/flet/client/build/web"


cd $HOME/dev/SANDBOX/SANDBOX-flet/modules/flet/client
# Following works ✅
flutter build web -v --output $HOME/dev/SANDBOX/SANDBOX-flet/modules/flet/sdk/python/packages/flet/src/flet/web
# Test working flutter component ✅
pushd $HOME/dev/SANDBOX/SANDBOX-flet
flet run example_animated_text_kit -w
popd

# Following FAILS ❌
flutter build linux -v  # Fails trying to copy to `/usr/local/flet`
# [   +1 ms] CMake Error at cmake_install.cmake:66 (file):
# [   +3 ms]   file INSTALL cannot copy file
# [   +1 ms]   "/home/sllau/dev/SANDBOX/SANDBOX-flet/modules/flet/client/build/linux/x64/release/intermediates_do_not_run/flet"
# [        ]   to "/usr/local/flet": Permission denied.
# Notes 📝
# The directory `/usr/local/flet` does not exist as it appears flet client runs from  `$HOME/.flet/bin/flet-0.22.0/flet/flet
# see output of `ps -ax | grep flet`

WORKING (Partially) Animated Text Kit

[auphof]

@ndonkoHenri I have found your very useful youtube tutorials, they should be listed in https://flet.dev/docs/extend/integrating-existing-flutter-packages/

1. Dev Setup | Flet Contribution
2. Building Lottie Flet Control From Lottie Flutter Package | Flet Contribution

with regard to my issue above in WSL2 U22.04 where I have build to web ✅ working but not build to ❌ linux (--debug) , however build to Linux (--profile) does work ✅. unfortunately the profiling build does not allow hot reload of dart (trying to build custom flutter components into flet

I am as per DEV Setup tutorial running 1 terminal in flet/client with flutter run -d linux --debug and another in flet/sdk/python/playground then use poetry run flet run main.py -p 8550

I have setup a clean Ubuntu22.04 Desktop instance in VirtualBox and have had the same result. build to web ✅ working but not build to ❌ linux (--debug) , however build to Linux (--profile) does work ✅.

HOWEVER I can get it to work when i SSH into the Virtualbox U22.04 VM with the Virtualbox still running flet/client with flutter run -d linux --debug and then in my remote SSH session from powershell in windows i cd to flet/sdk/python/playground then use poetry run flet run main.py -p 8550 and SUCCESS ✅🎉. I can in the VM Restart the flutter run with R and it hot compiles any changed dart.

I particularly note in the 1st Tutorial @ https://www.youtube.com/watch?v=tqf8dEQwBns&t=919s you are on a MAC where you run flutter run -d macos . As I am running on linux and if i step debug in the above instances I can see it is a complicated matrix of execution choices. With the knowledge of what works in the VM I tried to apply this to the WSL2 U22.04 distro, but have still not been able to make that work

It is much more efficient to use the WSL2 distro . If anyone has any pointers or suggestions I would appreciate that 🙏.

I can also be of assistance to debug and refine the Linux implementation, if that is of help

A Short video showing the issues and then the success Flet Dev 240429 with comments.mp4

[auphof]

I believe there is an issue when building the flet/client for debugging the client and making it very difficult for further flutter module development in a Linux WSL2 distro

This issue is preventing the build and testing of additional flutter modules into flet. I have raised it as a separate issue #3152 , as this issue is about improving the documentation