Organizing Flutter for standalone and embedding

The flutter world is pretty straightforward if you are building new multi-channel applications. You can probably leverage 90% of the same Flutter/Dart code across your Native mobile and web applications. Flutter's out-of-the-box project organization may work with little modification.

Enterprises get a different experience when they already have iOS, Android, and web applications on different tech stacks with overlapping functionality.  Enterprises change their tech stack by incrementally replacing native or javascript functionality with Flutter modules.  The Flutter default project structure must be recast in this situation.

Organizing Flutter for Standalone and Embedded applications on YouTube

The rest of this article is converted in greater depth in the video.  The content exists here for search optimization and will be updated over time.

Default "greenfield" organization

This is the project structure for a new standalone application that can be deployed as web, Android, and iOS applications.  The shared Flutter code goes in /lib. Small standalone web, Android, and iOS wrapper code exist in the appropriate directories. Flutter covers the entire screen or fills the web browser essentially running in full screen on the target canvas.  This structure is understandable and easy to work with as long as you are running standalone applications.

The web app is packaged as static content, its own site. This means the web artifact can inserted or embedded in another website as an iFrame without any additional code.  Mobile is different by its very nature.

This project structure can also include macOS, Windows, and Linux deployable applications. I didn't include them because they clutter the image for the purposes of this narrative.

Video


Organizing for embedding and incrementalism

The default Flutter project structure only supports one target type for each platform. I usually want two different use cases or run time variants when doing incremental Flutter replacement of an existing application.  
  1. Flutter runs inside the company's real Natvie Applications.  This requires integration and the project is configured as a Module
  2. A standalone development or test application for development, demonstrations, or other uses. This project is configured as an Application
Note Flutter Web operates differently from the iOS and Android projects.  The web app is pretty much the same whether it runs standalone or inside another application.  It runs as a standalone application inside an HTML element or in an iFrame.  Nothing fancy is happening here.
  1. lib/package where all the real Flutter code is.
  2. /modules that are embedded in existing or 3rd part mobile applications. They require their own flutter configuration
  3. /apps Standalone applications that consume the flutter package in the first step. They may be destined for production or may only be used by developers and testers
The packaged Flutter/Dart code can be relatively referenced inside the source tree. This lets us isolate and embed/use the Flutter code without having to publish the package as an artifact.  We treat the Applications, the Modules, and the library as a small mono repository.

See Breaking Down the House - I mean Flutter Projects for a sample project structure

Future

Future discussions include inserting Flutter views into Mobile applications where the Flutter component fills only part of the canvas.

Video

Revision History

Comments

Post a Comment

Popular posts from this blog

Understanding your WSL2 RAM and swap - Changing the default 50%-25%

Image
The Windows Subsystem for Linux operates as a virtual machine that can dynamically grow the amount of RAM to a maximum set at startup time.  Microsoft sets a default maximum RAM available to 50% of the physical memory and a swap-space that is 1/4 of the maximum WSL RAM.  You can scale those numbers up or down to allocate more or less RAM to the Linux instance. The first drawing shows the default WSL memory and swap space sizing. The images below show a developer machine that is running a dev environment in WSL2 and Docker Desktop.  Docker Desktop has two of its own WSL modules that need to be accounted for.  You can see that the memory would actually be oversubscribed, 3 x 50% if every VM used its maximum memory.  The actual amount of memory used is significantly smaller allowing every piece to fit. Click to Enlarge The second drawing shows the memory allocation on my 64GB laptop. WSL Linux defaults to a maximum RAM size of 5
Read more

Installing the RNDIS driver on Windows 11 to use USB Raspberry Pi as network attached

Image
I do a lot of my development and configuration via ssh into my Raspberry Pi Zero over the RNDIS connection. Some models of the Raspberry PIs can be configured with  gadget drivers  that let the Raspberry pi emulate different devices when plugged into computers via USB. My favorite gadget  is the network profile that makes a Raspberry Pi look like an RNDIS-attached network device.  All types of network services travel over an RNDIS device without knowing it is a USB hardware connection. A Raspberry Pi shows up as a Remote NDIS (RNDIS) device when you plug the Pi into a PC or Mac via a USB cable. The gadget  in the Windows Device Manager picture shows this RNDIS Gadget connectivity between a Windows machine and a Raspberry Pi. The Problem Windows 11 and Windows 10 no longer auto-installs the RNDIS driver that makes magic happen. Windows recognizes that the Raspberry Pi is some type of generic USB COM device. Manually running W indows Update  or  Update Driver  does  not  install the RNDI
Read more

DNS for Azure Point to Site (P2S) VPN - getting the internal IPs

Image
I wanted to access all my Azure resources without making any of them visible to the Internet.   The easiest give my local machine access to everything on my Azure Virtual Network (VNET) was to connect to it over VPN. It turns out creating Azure VPN gateways and connecting to Azure VPN endpoints is easy.  There are some subtleties in getting DNS name resolution to work that can confuse when first starting out. Setting the Stage There are a few ways to get to Azure endpoints and resources that are blocked from the internet.  We can  Create a Point-to-Site connection from our local machines to Azure Network Gateways Create a Site-to-Site network connection from our local networks to Azure Network Gateways. Use Bastion Hosts Use Cloud Shell Leave everything open to the internet. I chose a Point-to-Site (P2S) VPN connection that connects from my laptop to a VNet Gateway.  That joins my laptop
Read more