Hacker News Reader

Comment by fngjdflmdflg | Hacker News Reader

>As a result, GTK and GNOME’s design language clashed together. Instead of being as general-purpose as possible, GTK as a cross-platform toolkit contained an entire design language intended to be used only by a specific desktop, thus defeating the purpose of a cross-platform toolkit.

This is one of the things I like about Flutter. It supports both Material and iOS UI guidelines. There is also an ongoing effort called Blank Canvas[0] to provide easier support for creating arbitrary UI themes (although you can already do this albeit more difficultly). Being that Material looks awful to me (as an Android user, even) I'm glad that they support different UI Designs/guides.

[0] design doc: https://docs.google.com/document/d/1rS_RO2DQ_d4_roc3taAB6vXF...

View on HN

The only thing worse than modern Material is when there was a multi-year (?) period where Google didn't think buttons needed any affordance indicating they were buttons, not in shape, contrast, color, etc. and with touch UIs you don't even get hover feedback like you would on the web.

Reading between the lines, I can see that Google was inspired by the post-skeumorphic minimalism of iOS, but took the wrong lessons away from it. Some of that has been walked back, but far from enough.

To me Material looks like Google looked at iOS and compared it to their then rectangle-box based UI and said "Our UI is too bland compared to Apple. We must need tons of border radius and padding. And big splash animations when you touch a button!" Some people used to look down on Apple's UI as "fisher price" but Google has long taken that crown in my book. When I make flutter apps for side projects I just use the Apple based widgets (called Cupertino [0]).

[0] https://docs.flutter.dev/ui/widgets/cupertino

I remember being annoyed by those text buttons, looking at the latest iteration of Material, it looks like they keep the "text" button style but as a secondary option https://m3.material.io/components/all-buttons

Looking at the examples I think that it works in some contexts, but is a personal feel that I have.

Well, there are caveats to flutter. One, the packages are clearly Material first, with Cupertino not having the same coverage and integration. There's a lot of common iOS UI constructs that are missing or incomplete, and Material is the base-type: There's Scaffold, which is material, and CupertinoPageScaffold, which is the iOS version. Widgets also don't necessarily mix - in cupertino land you need to use cupertino scaffold and page with their transitions, as they have hardcodes dependencies on each other.

Second, cupertino is glitchy and just... wrong in so many aspects. Sizes, placement/paddings, animations... Placing an icon-only button in the trailer of an app bar doesn't align it with anything, and something as simple as a page animation is completely wrong: Click on a note in the Notes app, and the title and content of the new page follows each other - in a flutter app, they're on completely independent trajectories. Not to mention that mimicking a photo gallery with pinch zoom, dismiss and swipe to navigate is borderline impossible with flutters gesture stack, and existing packages and built-in Widgets don't get close[0]. Its handling of the screen rotation animation is also horrendous as it just stretches whatever widgets were present with no control.

In my opinion, cupertino is just a weak lookalike used to lure developers in, but isn't really good enough to convince users in a "real" app. The real utility of cupertino and its packages are in adding necessary iOS widgets to material or custom UI apps, like share panes.

[0]: Apple gets that one a bit wrong too though. Try to zoom in in the right edge of a picture in the Photos app, and start a swipe left from the middle of the screen. When the next image starts to show on the right side of the screen, change direction to swiping right. The previous image will come in from the left, but with a completely glitched out transition. Flutter is way worse though.

I appreciate you writing this. These are all valid criticisms of Flutter. Especially the bit about pinch-zoom. Proper zooming is a long missing feature from flutter. There is InteractiveViewer[0] but it does not actually cause a re layout of it's children and it also doesn't respect the ScrollBehavior of the platform. There is also Two Dimensional Scrollables[1] which is a new official Flutter package which could theoretically be used to create a better zoom widget, although this hasn't been done AFAIK. There are some packages that can do this though.

As for Cupertino being a bad reproduction of the real iOS behavior, is it really that noticeable to non-developers? If so, that is very sad to here. I actually found out about Flutter via an open source app that was using Cupertino. I really liked the feel of the UI so I looked at the source and found out it was using Flutter. I feel like most Android users do not care about apps feeling "native" as the definition of a native UI feel has changed so drastically over the past decade or so on Android, with major apps like WhatsApp, Youtube, Gmail and stock Samsung apps each having almost completely different UI designs. If there are behaviors in Flutter Cupertino that would confuse iOS users (not just look slightly different) that does in fact sound really bad.

>Its handling of the screen rotation animation is also horrendous as it just stretches whatever widgets were present with no control.

FWIW I can't reproduce this in my own Cupertino app. For example a 3 column grid becomes a 6 column grid when rotated.

[0] https://api.flutter.dev/flutter/widgets/InteractiveViewer-cl...

[1] https://pub.dev/packages/two_dimensional_scrollables

> There is InteractiveViewer[0] but it does not actually cause a re layout of it's children and it also doesn't respect the ScrollBehavior of the platform. There is also Two Dimensional Scrollables[1] which is a new official Flutter package which could theoretically be used to create a better zoom widget, although this hasn't been done AFAIK. There are some packages that can do this though.

I have played with InteractiveViewer, but you can't easily get BoxFit to behave right (if you zoom in on a widget having letter-/pillar-boxing, the letter-/pillar-boxing shouldn't be part of the content you're zooming into!), and it does not stack well with pages and dismissables. There are packages that try to hack around this (poorly) by monitoring position and toggling the activity of parent widgets, and there are some that have their own custom version of the whole thing (with usually quite primitive zoom behavior as a result), but I haven't found any that work well.

My test for this was that even though I could navigate a gallery page with zoom and dismiss reasonably well, my wife's much faster paced zoom/swipe navigation basically never worked. I also tried going the fully custom approach, with my own scrollables, gesture handling and transforms, but it was too much work in the end...

It would definitely be interesting to see if the two_dimensional_scrollables thing sorts it out. I'm not sure all the issues can be fully fixed without a change to flutters Gesture system though - being unable to distinguish pan from

> As for Cupertino being a bad reproduction of the real iOS behavior, is it really that noticeable to non-developers?

I recall showing a cupertino based app to a friend, and the moment he saw the app bar transition he just went "ew what is wrong with that", and the app bar blur looking different didn't help either.

For many of the other things, it just puts more work on the developer - like the trailer thing, where I ended up having offset the widgets pixel by pixel until it aligned with other apps and looked right.

The more consistent UX on iOS (note: "more", not "fully") makes it pretty easy to see when something sticks out, and transitions and their tracking in particular is something that has always been a few notches above the average on Apple devices.

Another thing that sticks out a lot are hero transitions. Native iOS apps tend to have content nicely expand from e.g. a small grid to a larger page. In Flutter, this is a pain because you might need to transition between both aspect ratios and fitments (e.g., BoxFit.cover to BoxFit.contain), while the Hero widget doesn't really give you an easy way to know both the source and target dimensions ahead of time to calculate the intermediate geometry and fitment, only the source and current dimensions. The best I have managed gets it mooostly right when the aspect ratio of the content ends up matching the aspect ratio of the screen, but it's visibly wonky when that's not the case - the image first expanding, then contracting again to obtain the right borders. The same goes in the other direction, with the widget dancing too much when dismissed.

I feel that a lot of things just bail out to a more material-style crossfade, which is not very Apple-esque.

> FWIW I can't reproduce this in my own Cupertino app. For example a 3 column grid becomes a 6 column grid when rotated.

Look at the widgets during the rotation. If you rotate from portrait to landscape, the widgets will first be stretched as flutter is transforming a render from the "before" position towards the new dimensions. Then, slightly past halfway it snaps to instead transforming an "after" render with the GridView relayout, which starts slightly too narrow and grows to the proper dimensions. Leaving the app in one orientation and returning in another can also lead to cursed frames. :)

While bailing out to a cross-fade for heros is bad, I wish Flutter would just only cross-fade for the rotation. Stretching is just... Cursed. At the same time, we should have more control so we can do things like the iOS camera app and react by just rotating some widgets in-place...

---

Disclaimer: It's been a year or so since I played with flutter last, and I am not currently during UI work so I might be slightly out of date and there might have been improvements since I looked at it last. I should also note that I have personally now also started to be able to pick apart many first-party Apple apps, breaking them horribly in numerous ways because I have gotten familiar with the problems. It's just that they usually don't break for regular end-users.

Ehh… “supports” is a strong word when talking about Flutter’s iOS theme.

The last time I tried it, it fell into some kind of UI uncanny valley — it looked mostly like iOS, but there were enough little things off that it just felt wrong.

Reply on news.ycombinator.com