What is Flutter?  What are its pros and cons?  Why is it worth learning about and using?  How does it work?  How does it compare to its competition (like Xamarin Forms, which I have experience using)?  How can I learn about it and start using it?
I have recently started to dig in and learn about Flutter. There is a lot to learn and so much information that I want to share, so I will get right to it and answer the obvious.

What is Flutter?

“Flutter is Google's UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase.”- Flutter. It is an open-source software development kit (SDK), maintained primarily by Google, used for developing cross-platform applications primarily for Android, iOS, Linux, Mac, Windows, and web. Flutter enables a developer to construct a very flexible and slick UI while allowing the definition for the UI and business logic to be reused to build for and deploy to multiple platforms. In a lot of ways, it’s like other cross-platform development frameworks (for me, I think of Xamarin Forms), but it has several significant differences that allow for Flutter to have more flexibility in its UI and animation capabilities.

Flutter’s slogan - “Everything is a widget.”

Flutter uses an aggressive composition strategy in which everything from your top-level root application down to your tiniest UI element is a widget.  Widgets can be reused in as many places as desired, and each utilized widget becomes part of a widget tree that is used to render each frame of your application’s display.  Most widgets the app developer creates are composed of various other widgets, and this widget composition approach, similar to how React websites compose their UI from components, enables flexibility, consistency, code reuse, and efficient performance.
Since I came to Flutter from working with Xamarin Forms, as I continue to explain Flutter’s capabilities, I will show many equivalent details corresponding to Xamarin Forms too, which I hope helps to highlight what makes Flutter different.

1 – Deployment Targets and How it Works

Flutter:
Xamarin Forms:
*As of Summer 2021, Flutter desktop deployments for UWP are in an alpha release stage and in beta stage for WPF, MacOS, and Linux.  Xamarin Forms deployments for MacOS are in the preview release stage, and UWP is stable, and Xamarin Forms does have some web platform support in the early stages too.
There is a rarely used approach where a native mobile control could be hosted within a Flutter app (think a Google Maps control), but performance for native control hosting in Flutter is slow and should (typically) be avoided. [See Rendering native controls in a Flutter app]
The canvas control in mobile apps typically takes up the full available screen space of the app (with a SafeArea widget to leave room for platform-specific needs on the top and bottom of the screen).
When iOS or Android OS updates include UI differences for native controls, Xamarin apps will typically immediately see those changes reflected; Flutter apps (wherever trying to approximate native control appearance) would need to wait for the development of an updated Flutter version that modifies the visual display or functionality in Flutter’s controls when building for that platform to reflect the corresponding platform native controls, then for the app developer to apply the updated Flutter version to the app then release the updated app in the corresponding app store.  However, to use newly introduced control features outside of default settings, Xamarin apps would follow the same pattern as Flutter, except the Xamarin library update would simply wrap the new features, not having to build matching functionality.

2 – UI Approach and Hot Reload

Flutter:
Xamarin Forms:
Flutter for Web currently supports hot restart, but not hot reload. See more at Building a web application with Flutter.
Animations and transitions are much easier and more flexible in Flutter due to the flexibility of its vast widget library, the numerous ways widgets can be nested to render UI, and the way that declarative UI allows widgets complete flexibility in how they re-render given specific app state.
Flutter has several widgets specifically built to animate transitions or visual changes, either automatically or in custom ways (like AnimatedContainer and Hero widgets).
Here is an article that really brought into focus for me the impact of Flutter’s Hot Reload.
“In Flutter, you can edit anything […]. Your UI, your services, your business logic. Anything. And then you save it, the changes are synchronized to your device, and you can use them immediately. Even if you write brand new code and set a breakpoint when you save it, that breakpoint will be hit like it was always there.” - BetterProgramming.
For details on Hot Reload special cases, check this out.

3 – Device Access and Platform-Specifics

Flutter:
Xamarin Forms:
Some commonly used Flutter plugins include camera, webview_flutter, geolocator, http, shared_preferences, url_launcher, device_info_plus, share_plus, connectivity_plus, path_provider, sensors_plus, and sqflite.
Flutter automatically handles things like overscroll behavior differences, iconography differences, Android back button behavior, differences in text-editing, text selection, and gestures relating to text, but leaves options for platform conventions like the positioning of switch controls at the left or right of a line in the hands of the app developer (sometimes even providing a platform-based option that follows platform convention).

4 – Development Language and Options

Flutter:
Xamarin Forms:
Flutter for Android requires a full installation of Android Studio to supply its Android platform dependencies, although you may develop the code in other editors. [Android Setup For MacOS and Windows]. After trying out Flutter using Visual Studio Code (on both Windows and Mac machines), I am very satisfied with it as my Flutter development environment, especially after installing a few crucial extensions (“Flutter,” “Dart,” “bloc,” and “Git History”).
Flutter for UWP is in the alpha stage and requires installation of the latest Visual Studio (with the appropriate workload/tools installed). Windows setup here.
Flutter for iOS and for MacOS must be built and run on a Mac and requires installation of Xcode and CocoaPods on the development machine.  While shared code Flutter development can occur on a Windows machine, and testing with hot reload can occur for Android on a Windows machine, Flutter building, and testing and signing for iOS and for MacOS must occur from a Mac. iOS setup here.

5 – History and Cross-Platform UI

Flutter:
Xamarin Forms:
Apart from the must-have platform-specific interactions and a few widgets with a platform-based display option, widgets generally do not adapt their display to match their platform. Typically, the decision between either MaterialApp or CupertinoApp near the top of your widget tree makes cross-platform app UI either themed like Material Design or Apple’s Human
Interface Guidelines on every platform, unless you write two versions of UI to best meet platform-specific display expectations or use non-standard UI.  From what I have seen in various discussion threads, it seems that MaterialApp is both more robust (fewer bugs) and more widely used with Flutter than CupertinoApp is, so unless you are quite certain you want to make every platform use controls that look like native iOS controls, I would advise using MaterialApp, at least while starting out with Flutter.
There are some package attempts like flutter_platform_widgets to make it easier to use MaterialApp and corresponding widgets for some platforms, and CupertinoApp and corresponding widgets for others, but in my review of those approaches, it severely complicates the UI development and essentially equates to writing two versions of much of the display, which I would generally try to avoid.

6 – Future Expectations

Flutter:
Xamarin Forms --> .NET MAUI:
Microsoft’s future plan for Xamarin.Forms is to incorporate it fully into .NET 6 (November 2021) and beyond as .NET MAUI (Multi-platform App UI), for an even more cross-platform development approach (this will include MacOS as a target in addition to Android, iOS, Windows, Linux)

7 – Similarities

BOTH:

Showcase for Flutter Capabilities

Why is Flutter worth learning about and using?  We have already seen some details about what it is and how it works, and I have brought up some great aspects of Flutter, but I would be remiss if I did not bring up some vibrant app examples for you to see in action.  Luckily for us, a
development team named gskinner has built, for public review, a set of open-source examples made specifically to showcase some of Flutter’s incredible UI capabilities.  You could even explore their code if you so desired.
Check out these high-profile real-life apps created with Flutter. There’s also a website to showcase and make searchable thousands of apps built with Flutter, some of which are open-source and some of which are templates.

Flutter Architecture

Mobile/Desktop Flutter App:
Web Flutter App:
Web rendering options:
One of the things that makes Flutter architecture unique among cross-platform frameworks is that it brings a rendering layer into the framework itself. That gives the opportunity to eliminate the inherent UX constraints in either native UI or wrappers for commonalities among multiple platforms of native UI while also putting more burden on the framework (or community) to provide the necessary building blocks for cross-platform app user experience (UX).
Another thing to notice here is that in Mobile and Desktop targets, Flutter includes the Engine layer, which connects to the device operating system for key functionality, and Embedder layer, which handles platform-specific details and connections, whereas in Web targets, the OS is inaccessible, and the only embedding needed is a translation layer into browser-compatible content and interactions.

Flutter Layout

“To perform layout, Flutter walks the render tree in a depth-first traversal and passes downsize constraints from parent to child. In determining its size, the child must respect the constraints given to it by its parent. Children respond by passing up a size to their parent object within the constraints the parent established.” — Flutter
“Constraints go down. Sizes go up. Parent sets position.” — Flutter
The tree in this diagram represents the widget tree for the app, where the top is the app’s root widget, and the bottom are the leaves (widgets without children).  This approach allows the layout process to be both efficient and intuitive.

Flutter Usage Approaches

Flutter App:
The whole app is built using Flutter: “Everything is a widget.”
Flutter Module in Native App:
Flutter module imported into existing native Android or iOS app to render a part of the app’s UI in Flutter (or just to run shared Dart logic)

Flutter Development First-Time Basics

  1. Choose desired targets (Android, iOS, Web, macOS, Linux, WPF, UWP)
  2. Choose main Integrated Development Environment (IDE) (Visual Studio Code/Android Studio/IntelliJ)
  3. Set up development machine(s) for desired targets, set up IDE, set up testing devices if applicable (a) Verify development machine setup with the `flutter doctor` command
  4. Use the IDE to create a new Flutter project (code for new app is in `lib/main.dart`)
  5. Run the app from the IDE on test device(s); emulator(s); browser(s); or desktop app; or any variety of multiple can be configured to launch/run simultaneously, each with hot reload active!
  6. Make code changes while running (a) There are also contextual assists and macros (snippets) for common actions (b) VS Code can be configured so “save” or “save all” after changed file causes both auto-reformat and stateful hot reload
  7. Create app widgets, state management, and tests, and find and include desired packages/plugins
Note that step 7 here can be done mostly while the app is running to get immediate insight into the impact of your changes; just hot restart after modifying used packages.
Machine setup instructions: https://flutter.dev/docs/get-started/install
IDE setup instructions: https://flutter.dev/docs/development/tools/vs-code
Instructions for new app creation: https://flutter.dev/docs/get-started/test-drive?tab=vscode
Sources and info on multiple device simultaneous launching/running/debugging:
https://github.com/flutter/flutter/wiki/Multi-device-debugging-in-VS-Code
https://www.jacoboakes.com/flutter_multiple_device_debugging/
https://stackoverflow.com/questions/51669258/flutter-hot-reload-to-multiple-devices
Hot Reload and special cases: https://flutter.dev/docs/development/tools/hot-reload#special-cases

Hello World

This image shows a glimpse at code for a basic Flutter app.

Flutter Development – State Management