Breaking Down the House - I mean Flutter Projects

Flutter makes it easy to create code that can be deployed on web, mobile, or PC-type native applications.  The Flutter templates are the perfect starting place in a greenfield scenario where you don't intend to embed Flutter in another application.  The default templates don't work as well when you want to drop your Flutter code into existing applications written with other tools while at the same time supporting standalone development apps or test jigs.

Here is my opinionated view on organizing code if you are building a simple application that works across channels and that may be embedded in existing applications on some platforms.

Video

The Various Flutter Directories

Flutter maintains or creates various directories based on your target environments. Flutter supports having multiple target environments in the same project.  It has an opinionated file structure that prescribes where platform-specific / non-flutter pieces go.
  • Core Code
    • /lib: Flutter Code
    • /test: Tests for Flutter Code
  • Web: 
    • /web: Where a standalone web app goes or one embedded with iFrames or as elements. This is HTML plus javascript. Portions are persisted into version control.
  • Standalone Native - Portions are persisted into version control.
    • /android: A standalone Android application (wrapper) for new development or as a test jig for other code. Java or Kotlin code that is editable in Android Studio or other Android tools.
    • /ios: A standalone iOS application (wrapper) for new development or as a test jig for other code. Swift or Objective-C code that is editable in XCode.
    • /macos: Standalone Mac application. I've never used this and it isn't shown. 
    • /windows: Standalone Windows application. I've never used this and it isn't shown. 
    • /linux: Standalone Linux application.  I've never used this and it isn't shown.
  • Embedded Native - Created at build time and never persisted to version control.
    • /.android: Android support pieces when you are building a module that can be run inside an existing Android application.  
    • /.ios: iOS support pieces when you are building a module that can be run inside an existing iOS application.  
Mobile Native standalone applications and modules targeting being embedded cannot exist in the same project. This means you can't have a full Android app and Android module destined for an AAR in the same project.  No /.android and /android.  You can try it but it doesn't end well.


This picture shows 5 different target environments.  It is an invalid configuration that we will rework in the next section.

Standalone programs, test jigs, and legacy embedding

We're going to take that simple single project and break it apart so that we can get the two different deployment models: standalone applications and Flutter embedded in existing mobile native applications.  We will have one project that holds almost all the Flutter code, one for standalone applications using that code, and one that lets us package Flutter into modules for inclusion in existing applications

Split the code along functional lines. 
  1. A package project that is the Flutter code library for use on various platforms.   This represents all the business functionality and common application scaffolding for the Flutter pieces. It can contain platform-specific code that can be switched out based on the target environment, Android, iOS, and web.  Common code across module and application deployments goes in one of these packages. Flutter scaffolding, MaterialApp, Themes, and other pieces can go here possibly including any startup code that is common across several targets

  2. An application project usually either a production app or an application can be used by developers as a test jig. Application projects are standalone applications or wrappers for the package/library project.  Applications include the main application, scaffolding, and other pieces required for standalone applications.

    You might have a standalone deployable web app and Mobile native test jigs in the same application. You can do this because the Android, iOS and, web directories represent a platform and it is up to you how to use the created applications.  You could break this into separate application projects but there is often no need for that. Module projects have dependencies that hold the real application functionality.

  3. A module project that describes an archive/component will be embedded in existing native applications. It holds all the module configurations for the various mobile native platforms.  This is a module wrapper for the package project.

    You can define a module for Android and iOS and build both out of the same project.  Module projects have dependencies that point to the packages containing real application functionality.

Relative Package dependencies

All of these projects are in the same repository. The applications and modules can all refer to the packages via relative references. This has the side effect of supporting hot reload in the apps when package changes are made.  There is no need to publish the packages and then pull them back down again to build the modules or applications.

Video

Revision History

Created 2024 05


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