Case Study: Cloning Swift UI's Image view

Swift UI has a view called Image, which roughly approximates Flutter's Image widget. This case study is intended to help you clone other Swift UI views in this package by showing you the analysis and approach that was used to clone the Image widget.

Investigating the Swift UI API

Let's begin with the most basic use of the Image view. In it's simplest form, an Image view displays a bitmap from the app's asset bundle, identified by a string name.

Image("logo")

Right off the bat we see a likely difference between a Flutter Image and a Swift UI Image. With a traditional Flutter image, the developer is likely to need to specify an asset directory path, has to specify the extension, and the developer needs to use the .asset() named constructor:

Image.asset("assets/images/logo.png");

We'd like for Flutter developers to be able to retain the concision of Swift UI, for example:

Image("logo");

To achieve this concision, the swift_ui Image widget must do a few things:

• Offer a default constructor that takes a String as a required unnamed parameter.
• Search the asset bundle for any file named "logo", regardless of extension

Additionally, to make it possible for the developer to avoid declaring a directory path, like "assets/images/", there needs to be some kind of tool to configure a search path for all images within a scope. Here's an example of what such a tool might look like:

SwiftUiImagePath(
  "assets/images",
  child: Any(
    child: Number(
      child: OfDescendants(
        child: Image("logo"),
      ),
    ),
  ),
);

TODO: continue write-up