Quick Start

Quick Start for Flutter/MX

In this overview we will take a "big picture" look at Flutter/MX, or f/mx, in the context of just a couple dozen lines of code, the f/mx solution to the standard Counter app. For the reader's convenience, we include the code here:

(defn make-app []
  (fx/material-app
    {:title "Flutter/MX Counter Demo"
     :theme (m/ThemeData .primarySwatch m.Colors/blue)}
    (fx/scaffold
      {:appBar (fx/app-bar
                 {:title (m/Text "Welcome to Flutter/MX World")})
       :floatingActionButton
       (cF (fx/floating-action-button
             {:onPressed (as-dart-callback []
                           (mswap! (fm* :z-counter) :value inc))
              :tooltip   "Increment"}
             {:host me} ;; todo: can we inject this automatically?
             (m/Icon m.Icons/add .color m.Colors/black)))}
      (fx/center
        (fx/column
          {:mainAxisAlignment m.MainAxisAlignment/center}
          (fx/text {:style (p/TextStyle .color m.Colors/black
                             .fontSize 18.0)}
            "You clicked the button this many times:")
          (fx/text!
            {:style (fx/in-my-context [me ctx]
                      (.-headline4 (.-textTheme (m.Theme/of ctx))))}
            {:name  :z-counter
             :value (cI 0)}
            (str (md/my-value))))))))

Let us walk through that line by line touching on the f/mx differences. This small example will let us get to them all.

camelCase vs lisp-case: syntax in a hybrid world

First, some background: Flutter/MX differs from other GUIs wrapped by Matrix: not all structure comes from the fmx API. Where we like, native Flutter widgets can be included. As well, CLJD alpha widgets can be included. Note here the (m/Text...) offered as the appBar :title for an f/mx scaffold:

(fx/scaffold
      {:appBar (fx/app-bar
                 {:title (m/Text "Welcome to Flutter/MX World")})

Note also the lisp-case, or kebab-case, spelling of scaffold and app-bar. Hold that thought.

Another example, with both the theme and appBar supplied as native Flutter widgets:

(fx/material-app {:title "Two Counters (MX)"
                 :theme (cF (ThemeData .primarySwatch Colors/blue))}
    (fx/scaffold
      {:appBar (AppBar .title (Text "Two Counters (MX)"))}

Another example is the native Flutter :style parameter here:

(fx/text {:style (p/TextStyle .color m.Colors/black
                             .fontSize 18.0)}
            "You clicked the button this many times:")

That is the background. And now the point: we at first tried having f/mx constructors identical to the native Dart constructor names, differentiated only by C:JD namespace, and the lack of visible differentiation proved terribly off-putting.

Besides, when Lisp programmers wrap a foreign library, they always produce a Lispy API.

an exception: names of parameters passed thru to Flutter

All that said, the astute reader will note that the Flutter parameter .appBar maintains its camelCase when converted to the fmx parameter :appBar. Why the exception? Two reasons:

1. now f/mx does not need to "wrap" every parameter name, or hope that a generic translator will suffice for all cases; and
2. we get a visual reminder that these parameters are for Flutter.

Summary

Two rules:

• for Matrix-powered constructors, use lisp-case. For native Dart or CLJD alpha/widget constructors use camelCase; and
• when specifying f/mx constructors, use camelCase for parameters that pass through to the native Dart constructor.