Using Flutter to build a native-looking desktop app for macOS and Windows

I like flutter and would definitely pick it if I had to make a mobile app, but if you have to write a conditional at every step to pick the right component for each platform, I don't see the point of keeping one codebase any more. You're writing code twice, and you have to test it twice, and each underlying implementation can have its own quirks. It can only get worse if you have to work with platform-specific layouts that mean your larger views have to be conditionals as well. I can understand the impulse to have one common codebase for the logic, but these days you can do that with many languages - like Kotlin or Rust - while using the native UI toolkits. If you're writing what is essentially two view layouts, you might as well write them in the native toolkit and skip the overhead of flutter altogether.

Hi HN,<p>Author of the post here! Didn&#x27;t expect this to be posted here and making the rounds, so I will try to give some more context.<p>First, you can check a short presentation of the app&#x27;s features in a previous post: <a href="https:&#x2F;&#x2F;blog.whidev.com&#x2F;shortcut-keeper-app" rel="nofollow">https:&#x2F;&#x2F;blog.whidev.com&#x2F;shortcut-keeper-app</a> .<p>Then, I wrote on why I chose Flutter for this instead of native or Electron, and how it helped me ship an app on both stores in one month, here: <a href="https:&#x2F;&#x2F;blog.whidev.com&#x2F;building-a-flutter-desktop-app-in-one-month" rel="nofollow">https:&#x2F;&#x2F;blog.whidev.com&#x2F;building-a-flutter-desktop-app-in-on...</a><p>My main background is web development (JS, jQuery, Vue, WordPress, etc.) and I have been using Flutter for the past year or so for another mobile app (iOS and Android).<p>If you want to keep one thing from this, is that Flutter enabled me, a developer with no prior desktop dev experience, to:<p>- Build on my own a desktop app for macOS and Windows (Linux is also possible, and I will try it).<p>- Solve my own problem (that&#x27;s where the idea of the app came from), and the problem of a few hundred users in the past two months. Also bear in mind that it&#x27;s a paid app.<p>- Get it accepted and published on both platform stores in a short timeframe.<p>- Make it look native on both platforms by using two community packages and some conditional logic. Of course, I could use the default UI design (Material) or adapt my own design system, but, as I explain in the post, I consider it a huge advantage to feature an adaptive app design.<p>- Do this from a single codebase, with the same business logic: database calls, models, controllers, settings, etc. are all shared between the two versions.<p>Happy to answer any questions!<p>Minas<p>*edited formatting

That&#x27;s a great writeup. However, am I correct in understanding that the UI packages are not bindings for SwiftUI or UIKit? Would this &quot;native&quot; package then truly benefit from OS integration of keyboard shortcuts, accessibility settings etc.?<p>The biggest downside of Electron (or Cordova&#x2F;Capacitor for mobile apps) is not necessarily performance (as proven by VSCode), but the non-standard implementation of UI controls.<p>For example, if I change some accessibility settings on the OS level, all UI elements in all apps implementing truly native UI components would inherit the OS-level settings. The toggle button on iOS could be set to have an I and an O for the ON and OFF state. A web-based app would not respect that setting.<p>So, if we talk about native, the most important part is OS-level integration of the UI. I&#x27;m not sure if Flutter really is an alternative, if the only thing you get is a bit less memory consumption and a smaller download size.<p>Please correct me if I&#x27;m wrong.

Maybe a stupid question for Flutter users, but why are there two versions for every UI element in the source code? I&#x27;d expect that I initialize the theme once at application startup, and then the widget and layout engine works in &quot;Windows&quot; or &quot;macOS&quot; mode (or whatever else the theme decides to implement). What&#x27;s the point of using a cross-platform UI framework if I need to duplicate the code for each platform?

I&#x27;ve been doing some work with Flutter on Linux and I&#x27;ve been really impressed. I like Dart as a language, the VSCode support is superb, and Flutter seems well thought out. The two UI packages mentioned in this post look great too.

There&#x27;s a big difference between native-looking and native-feeling.

In case you&#x27;re wondering why 2 separate widget sets, it&#x27;s only needed if you want to follow each platform&#x27;s look and feel.<p>If you don&#x27;t care, or if your app has its own L&amp;F (e.g like Spotify app), you only need 1 widget sets (which you can adjust the theme).<p>As others have pointed out in the comments, Flutter is drawn like a game engine, as in everything is drawn on a canvas, so at the end of the day it&#x27;s just drawings, not native widgets.

I appreciate the time and knowledge that went into this, but I feel like I need to say that when the time comes I am absolutely going to start avoiding Flutter-based &quot;native&quot; apps just like I&#x27;m currently avoiding Electron based ones. I don&#x27;t like what they&#x27;re doing and I won&#x27;t be willing to spend any money on them.

On the Mac side the traffic lights have no anti-aliasing<p>On the windows side the maximize widget is messed up and there is a stray 1pm border top left.<p>If &quot;native looking&quot; is your goal then please take screenshots of your faked window borders and widgets and overlay them over the real thing and see where you went wrong.

If you want to go this route, I recommend exploring react-native as well.<p>Microsoft maintains desktop versions for Windows and macOS which are pretty functional. And you don&#x27;t need to create 2 entirely different UI layers (which kind of defeats the purpose IMHO) - you&#x27;ll be able to share 90% + (closer to 99% if you don&#x27;t care about re-arranging content but still getting native controls for each platform).

This is a nice in-depth article that shows it&#x27;s not impossible to create native-looking experiences using cross-platform tools. Kudos!<p>I would like to see more content like this, promoting cross-platform tools while not forgetting native platform capabilities and guidelines.<p>Question for the author: do you have anything to say about building&#x2F;signing&#x2F;publishing for both app stores? Is there any automation involved?

I have had pretty good luck banging out a glorified calculator app for one of my products using flutter. Started from zero with flutter&#x2F;dart and had a workable app in a couple weeks.<p>The code is pure crap since it was written while figuring out the framework. But easy enough to refactor into something more reasonable.<p>Now to add OTA updating over bluetooth for an ESP32 device to the app.

It may not matter in this context but did the flutter team ever figure out jank on iOS especially first run? Something always seems off with that vs native. This was an old issue, but they seemed to struggle with addressing it &#x2F; or it wasn&#x27;t needed for their use cases.

Flutter has massive battery drain issues on macOS and Google appears to be saying that it&#x27;s unfixable. That kills it for me unfortunately.<p><a href="https:&#x2F;&#x2F;github.com&#x2F;flutter&#x2F;flutter&#x2F;issues&#x2F;59327" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;flutter&#x2F;flutter&#x2F;issues&#x2F;59327</a><p><a href="https:&#x2F;&#x2F;github.com&#x2F;flutter&#x2F;flutter&#x2F;issues&#x2F;59327#issuecomment-673147157" rel="nofollow">https:&#x2F;&#x2F;github.com&#x2F;flutter&#x2F;flutter&#x2F;issues&#x2F;59327#issuecomment...</a>

My heart fluttered when I checked out the app size on Apple&#x27;s App Store: 19MB -- quite a nice surprise!<p>The equivalent Electron app would probably be 100MB+.

I love the idea of Flutter, but tying it to Dart just seems like a way to guarantee it&#x27;ll have a long slog to getting larger-scale usage. It feels like Google had a language that had no users and had to use it for _something_.

How would it look on other desktop platforms?

I think Flutter is going into the right direction. I developed some apps with it, it has rough edges but it gets you there. Dart is ok language, no issues for me going with it.<p>My only complaints are as follows:<p>- the dart formatter which is a cancer that wants to do things in only one way. The forced 2px indentation for example is unbearable for me. The maintainers are close-minded and refuse to understand that some people cannot operate with 2px indents. They will even delete your issues&#x2F;comments at this point.<p>- Flutter is backed by Google which likes to anihilate, sometimes without warning, projects that don&#x27;t go as planned. It is open source but still, without Google backing it, it would have never left the ground maybe.