Examples of Flutter/MX, including ports of samples
from the ClojureDart repo.
Please see our WIP Wiki, or just ping @kennytilton on the #clojurians or #fluttercommunity Slacks and we can pair to get you rolling.
If you just want to run the thing...
First, complete the ClojureDart "Flutter Quick Start". Help with that can be had in the #ClojureDart channel on the #Clojurians Slack. Or ping @kennyilton on that Slack or the Flutter Community Slack.
git clone https://github.com/kennytilton/flutter-mx-sandbox
In a terminal:
- start a sim:
open -a Simulator
You should see a Simulator appear. I get an iPhone 12 by default. Explore the open
command for alternatives.
BEWARE! If you forget this step to open a simulator, the next command will run for ages and open a tab in your browser. Close everything and start over.
In a terminal:
cd flutter-mx
, or wherever you cloned it;
Next, we build the app and start a "watch" to rebuild when the source changes.
HEADS UP! This next command does not return. Use Control-C to kill the process when through exploring:
clj -M -m cljd.build flutter
After a few minutes (just the first time, thirty seconds on subsequent start-ups) you should see these last lines of output:
An Observatory debugger and profiler on iPhone 12 is available at: http://127.0.0.1:61081/v17dEYvUuuQ=/
The Flutter DevTools debugger and profiler on iPhone 12 is available at: http://127.0.0.1:9100?uri=http://127.0.0.1:61081/v17dEYvUuuQ=/
Now check the simulator you opened earlier. You should see our "hello, world" app in the sim:
Mr. Kernighan co-authored "The C Programming Language" with Dennis Ritchie, and contributed the bit on "hello, world".
The code for our hello-world
is here.
To try a different example:
- Edit
main.cljd
and change the namespacehello
in(hello/make-app)
to one of the namespaces listed above in the NS requires. Tryxcounter
to see the standard Flutter Counter app, ortodo
to see the TodoMVC classic. - Save your changes.
- Now switch back to the "watch" terminal and wait a few seconds until you see that the app has been rebuilt.
- Now hit RETURN.
- Check the sim to see the new app.
Here is a TodoMVC medium screenshot:
Our TodoMVC
extends the official spec to include a bit of async handling, in the form of an XHR request: we require an async XHR lookup of the text of a ToDo against the OpenFDA Adverse Events registry. If the lookup succeeds, the text color of the Todo must be set to red. There is no point to this, except as a demonstration of how to make a non-reactive API such as XHR reactive, thus handling async gracefully.
Well, it also demonstrates the power of reactive programming: if we change a ToDo item, a new lookup is triggered automatically, and the text color gets reconsidered automatically once the new lookup responds.
Here is how I work. We will extend this section greatly as we help others get started on Matrix:
- start with the above;
- edit this project in IntelliJ+Cursive, with the Flutter plug-in installed;
-
- IMPORTANT: tell IntelliJ to use clj formatting for .cljd files; more Cursive support is on the way;
- after making changes, I save in IntelliJ and look at the "build" terminal for errors;
- if all is well, I switch to the terminal and just hit ENTER to see the changed app;
- if I am curious about some CLJD issue, such as how to run the Math
abs
method, I do this: -
- add snippets of code to the main function, after the test suite runner;
-
- save;
-
- check the "build" for errors;
-
- switch to the build terminal and hit Return to trigger a sim reload;
-
- check the Flutter console for print output.
Ping @kennytilton on #clojurians or #fluttercommunity Slack for help!