matrix

kennytilton 2023-05-02T18:16:48.622729Z

New f/mx vid: https://youtu.be/OkotzUNKkUE 🍿 !

Benjamin C 2023-05-02T23:57:14.561079Z

Hey @hiskennyness, I'm looking to set a font size relative to it's parent height. Looks like in Flutter land you do this like so:

LayoutBuilder(
  builder: (BuildContext context, BoxConstraints constraints) {
    double textSize = constraints.maxHeight * 0.1; // 10% of container height
    return Text(
      'Hello, World!',
      style: TextStyle(
        fontSize: textSize,
      ),
    );
  },
)
I'm not sure how thot translates to f/mx. Any ideas?

👀 1
Benjamin C 2023-05-06T02:11:48.905869Z

Made a little helper:

(defn expose-layout [child-or-children-thunk]
  (fx/layout-builder
    {:builder (fx/->CBAsIs
               (fn [ctx ^m/BoxConstraints box-constraint]
                 (fx/fx-render ctx (child-or-children-thunk
                                    {:min-h (.-minHeight box-constraint)
                                     :max-h (.-maxHeight box-constraint)
                                     :min-w (.-minWidth box-constraint)
                                     :max-w (.-maxWidth box-constraint)}))))}))
So that now all I have to do is something like this:
(fu/expose-layout 
  (fn [{:keys [max-w]}]
    (fx/sized-box {:width (/ max-w 2)})))
Thanks again for your speedy help with this :).

kennytilton 2023-05-06T02:22:14.803829Z

Nice. I have been meditating on the verbosity of even CLJD-macrofied code and thinking there is a big opportunity for CLJD somewhere in Flutter, possibly as a prototyping language. Which just happens to compile to a production app. 🙂

kennytilton 2023-05-03T06:37:42.116169Z

"Builds a widget tree that can depend on the parent widget's size." Ha, this is funny. Cells got created over a layout challenge. The parent needed one property of a child to decide one of its properties, but the child needed a parent property to decide one of its own. There was no cycle, but neither parent nor child could decide their layouts in toto on their own. "the framework calls the https://api.flutter.dev/flutter/widgets/ConstrainedLayoutBuilder/builder.html function at layout time" That scares me. But I panic easily. 🙂 Lemme give it a try. Prolly needs a new factory macro to support the interesting builder parameter, the BoxConstraints.

kennytilton 2023-05-06T15:34:22.606799Z

I meant to say, functions all the way down are great for things like expose/layout , totally crushing boilerplate. And devs/teams can roll their own little DSL, shallow enough for new hires to get up to speed in short order.

👍🏻 1
kennytilton 2023-05-03T08:14:12.459429Z

Ah, just looked at the FAB example which has a parallel pattern with an explicit :builder property. Feeling better! 🙂 One thing I suspect is that Flutter itself will be calling the builder itself whenever it has a new BoxConstraints for us to adjust to, so we may not even need f/mx reactivity. But lemme see what I can implement. Every new example helps. ..... OK, latest f/mx is set up to run new layout builder by default. clj -M:cljd flutter -d macos Or one of the desktop/web device options will let you conveniently resize window to see fontsize tracking window size. 🛏️ time. 🙂

kennytilton 2023-05-03T08:14:42.259049Z

I'll move that to the f/mx sandbox when I am up.

kennytilton 2023-05-03T08:16:28.625329Z

ps. Yeah, we do not need reactivity to handle the BoxConstraint, but the built widget can have whatever reactivity it needs off the size. I make the color sensitive to the size in an update. Moving it to the sandbox now.

kennytilton 2023-05-03T13:26:19.474339Z

OK, haha, just noticed we can test resizing in the sim by rotating it. 🤦 OK, the sandbox is set up to run the layout builder sample...as soon as I push. 🤦 Need more

Benjamin C 2023-05-03T18:55:25.287729Z

👍🏻 Thank you!

kennytilton 2023-05-03T19:06:30.986369Z

Heads up! I switched the f/mx repo back to defaulting to the Flutter standard, the Counter demo. Modify main to launch x029/make-app if needed. The example is also now in the sampler repo. Make the same mod to main to run it there. Happy coding!

👍🏻 1