469 reads

What is Flutter and How Does it Work?

by AWHSeptember 3rd, 2021

Too Long; Didn't Read

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. It is an open-source software development kit maintained primarily by Google. 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. It has several significant differences that allow for Flutter to have more flexibility in its UI and animation capabilities.

Companies Mentioned

Coin Mentioned

featured image - What is Flutter and How Does it Work?

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:

Can deploy to mobile, desktop*, web, embedded devices
Imitates the display and function of native controls [AND provides a much broader set of widgets and features than what exists in native]
Renders into a canvas control

Xamarin Forms:

Can deploy to mobile, desktop*
Transforms code and views directly into native controls [In some cases, lacks desired controls and features that don’t exist in native controls]
Renders native controls

*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:

Declarative UI: UI is a function of app state; display re-renders whenever relevant state changes
Hot Reload and Hot Restart are very reliable due to the canvas layer [Not just UI changes – almost any area of code being changed, except alterations to app plugin/package dependencies, appropriately affects Hot Reloading, Hot Reload is stateful; Hot Restart restarts app fresh]
Fancy/slick UI experience and customization options are generally available out-of-the-box or via packages

Xamarin Forms:

Imperative UI: Renders the UI; makes imperative adjustments to rendered UI based on app state
Hot Reload and Hot Restart sometimes lose critical app state, which leads to needing a full re-deploy
Some UI experiences with visual customizations can be done within Xamarin Forms, but other customizations can require excessive developer effort using platform-specific SDK code (wrapped in C#) to adjust native control functionality or renderers or to create custom controls in each platform

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:

Access to host device features is generally available via pub.dev plugin packages, where async messages get sent between the Flutter UI layer and the platform host layer that interprets a message into native calls and a response message; native or custom C/C++ APIs can also be called via plugin
Must-have platform-specific adaptations are applied automatically in library widgets/navigation/gestures in iOS and Android to match OS expectations, and Flutter often includes the ability to explicitly produce platform convention effects where desired; see Platform-specific behaviors and adaptations, Building adaptive apps, and these posts for more details.

Xamarin Forms:

Access to host device features is generally available via the Xamarin.Essentials package or other Nuget packages, where Xamarin interfaces are usually generalized wrappers for native interfaces
Due to the use of native controls, controls work as users expect for the iOS and Android platforms unless explicitly customized to do otherwise

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:

Both UI and back-end code are developed in the Dart language
Developed in VS Code or Android Studio or IntelliJ; *each platform you target has development machine requirements (run iOS only on a Mac) and required installations

Xamarin Forms:

UI is developed in XAML (like XML but with bindings) and/or C#;
back-end code is developed in C#
Developed in Visual Studio for Android and UWP with a networked Mac required for iOS (local network for debugging), or in Visual Studio for Mac for Android and iOS

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:

Flutter 1.0, the first stable release, was released 12/4/2018
Flutter has been under rapid development but is a relatively new offering
Flutter is most robust with its MaterialApp widget as app root, based on
Material Design, applicable to all Flutter-supported platforms, not just
Android
CupertinoApp is themed based on Apple’s Human Interface Guidelines, and is obligated to use a fallback font when displayed on non-Apple devices
Widgets generally do not adapt their display to match their platform, so the decision
between those two makes cross-platform app UI either themed like Material Design or Apple’s Human Interface Guidelines on every platform

Xamarin Forms:

Xamarin.iOS (formerly MonoTouch) was first released 9/14/2009
Xamarin.Android (formerly Mono for Android) was first released 4/6/2011
Xamarin.Forms was first introduced 5/28/2014
Much more development has gone into Xamarin
Controls in Xamarin.Forms each display as the platform-specific native control

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:

Looking to the future, cross-platform development market share for Flutter seems to be growing where all others, aside from React Native, seem to be shrinking
Development on the Flutter library remains highly active as there is currently a lot of support for Flutter from Google and open-source contributors

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)

“The next major version of Xamarin.Forms will [be] around September 2020 and continue to be updated through the release of .NET MAUI with .NET 6. After that, Xamarin.Forms will continue to receive priority servicing for 12 months.” (until November 2022, by which point a migration path will be available) - Xamarin
“As an evolution of Xamarin.Forms, you will be able to use all XAML with all its existing features, and we will continue to improve XAML to help you be even more productive. .NET MAUI will continue to support MVVM while providing developers options to use RxUI and MVU.” - Xamarin
RxUI: ReactiveUI, a functional and reactive Model-View-ViewModel (MVVM) framework
MVU: Model-View-Update, an application architecture with a single flow of state

7 – Similarities

BOTH:

Open-source
Top 5 in 2019 and 2020 cross-platform mobile framework usage
Have many packages/plugins available
Have excellent documentation and community
Flutter - sound null safety in Dart 2.12 and Flutter 2 / Xamarin - nullable reference types in C# 8

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:

HTML (HTML, CSS, Canvas, SVG)
WebGL (CanvasKit: Skia compiled to WebAssembly)
Auto (HTML for mobile, WebGL otherwise)
For Web, Dart compiles to JavaScript
Semantics widget for accessibility experience

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.”

App uses and combines Flutter widgets/plugins/packages to accomplish all aspects of the app
As desired, create custom widgets at any complexity level, with UI composed by any number of other reusable widgets
Any widget can rely on the state and rebuild what it renders when the state changes
State changes can occur from user interaction, completed async tasks or web requests, device sensors, etc.

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)

App must be restricted to platforms supported by Flutter
Support for importing multiple instances of Flutter is a recent addition (3/3/2021)
Some non-official efforts have been made to use Flutter for app UI, along with Xamarin.Android/Xamarin.iOS for app structure/packages/viewmodels (Check it out) but it has minimal maintainers

Flutter Development First-Time Basics

Choose desired targets (Android, iOS, Web, macOS, Linux, WPF, UWP)
Choose main Integrated Development Environment (IDE) (Visual Studio Code/Android Studio/IntelliJ)
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
Use the IDE to create a new Flutter project (code for new app is in `lib/main.dart`)
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!
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
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

Get to know why state management is needed in Flutter and what options exist: https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro
A highly recommended state management solution uses provider to essentially handle dependency injection down the widget tree and then BLoC (Business Logic Component) for encapsulating business logic apart from UI concerns
Provider - https://pub.dev/packages/provider - “A wrapper around InheritedWidget to make them easier to use and more reusable.”
BLoC - https://pub.dev/packages/flutter_bloc (includes https://pub.dev/packages/bloc) - “Bloc makes it easy to separate presentation from business logic, making your code fast, easy to test, and reusable.”

Within the bloc package, there are entities called blocs and a subset of blocs called cubits. With a bloc, it receives events via a stream from the UI and sends states via a stream to the UI. With a cubit, it receives individual calls to its functions from the UI (not via a stream) and sends states via a stream to the UI.

Info about state management in Flutter:
https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro

Sources and additional details about BLoC:
https://www.didierboelens.com/2018/08/reactive-programming-streams-bloc/
https://bloclibrary.dev/ (also source of bloc image)
https://bloclibrary.dev/#/coreconcepts (also source of cubit image)
https://bloclibrary.dev/#/flutterbloccoreconcepts
https://github.com/tenhobi/flashcards/issues/12#issuecomment-373922966 (github issue summarizing a referenced 2018 Dart conference BLoC video's concepts with screenshots and explanations)
https://pub.dev/packages/flutter_bloc/example

Some potentially useful related packages:
https://pub.dev/packages/bloc_code_generator
https://pub.dev/packages/form_bloc

Videos to learn about BLoC in Flutter:
https://www.youtube.com/watch?v=toPtm6eyyeE&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=3 (Bloc core concepts – streams, blocs, cubits)
https://www.youtube.com/watch?v=NqUx-NfTts4&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=4 (Flutter Bloc concepts – BlocProvider, BlocBuilder, BlocListener)
https://www.youtube.com/watch?v=kLDfhamoqe0&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=5 (BLoC architecture - Presentation, Business Logic & Data Layer + Model, Repository, DataProvider)

Detailed explanations and examples using both provider alone and BLoC approaches:
https://www.miquido.com/blog/flutter-architecture-provider-vs-bloc/

Flutter App State Architecture Using BLoC

This is the suggested folder structure for a Flutter App using BLoC for state management.

lib/

    business_logic/

        (optionally: blocs/ and cubits/) - note that the VS Code extension “bloc” uses these folders

    data/

        data_providers/

        models/

        repositories/

    presentation/

        (optionally: animations/ and pages/ and widgets/)

    main.dart

…platform folders, packages configuration, etc.…

To illustrate the data flow for a user interaction that makes a web request, let’s consider a user starting a Flutter App that shows the weather for a tapped city, then tapping a button to get the weather for Chicago; the following process occurs.

0) [main.dart] App starts up

1) [presentation] Show initial app state and receive the user interaction when they tap the button for Chicago weather

2) [business_logic] Communicate the Chicago selected event to the business logic component (aka bloc), and the bloc both calls the repository request for the Chicago weather model and sends a loading weather state to the presentation layer

3a) [presentation] The presentation layer builds and presents the display for the loading weather state

3b) [repositories] The repository request makes a data provider request for a particular data source’s raw data; there may be multiple data providers communicated with during a single repository request

4) [data_providers] The data provider executes the http get web request to a public weather API, and returns the raw response data to the repository code as its result, or throws an exception

5) [repositories] The repository layer handles any failure or uses a factory function on the model class to create a model instance from parsing a specific data source’s format of raw response data.

6) [models] The model factory function creates a model from the raw data

7) [repositories] The repository fine-tunes the model as appropriate and sends it as the response to the bloc

8) [business_logic] The bloc sends either a failure state or weather loaded state to the presentation layer

9) [presentation] The presentation layer builds and displays the appropriate UI for the new state (either a failure display or the Chicago weather details display)

Folder structure and example flow ideas based on video at:
https://www.youtube.com/watch?v=kLDfhamoqe0&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=5 (BLoC architecture - Presentation, Business Logic & Data Layer + Model, Repository, DataProvider)

Testing in Flutter using BLoC

Use the test and bloc_test packages and optionally the equatable package for “==“ override to comparison by values between instances of types that extend Equatable, which can be good for state objects.

Create a test/ folder with symmetry to and at the same level as the lib/ folder
Create test files with the same folder structure as in lib/, and with matching dart file names, except suffixing the names with “_test” (before “.dart”) – this suffix is what the test package and IDE looks for
In any given test file, create a main function, create a group (to group together tests in a named group that may share setup steps)
Declare an instance of the type being tested, and create setUp and tearDown functions to create and dispose of the instance, passing mocks for dependencies
Create test and blocTest functions to test scenarios and specified inputs for expected results
Execute a test group in the IDE (“Run” or “Debug” appears above the group), or with command `flutter test`

Testing info based on video - https://www.youtube.com/watch?v=cVru6Gy4duQ&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=6 (BLoC testing) and - https://pub.dev/packages/bloc_test

Tools to Evaluate and Optimize Flutter Apps

DevTools and other language features provided by Dart and Flutter in your IDE

Debugger, Memory Profiler, App Size Tool, Hot Restart, Auto Hot Reload on Save, Auto Format Document on Save, Inspect Widget, Observatory Timeline, Network View, Toggle Performance Overlay, Toggle Slow Animations, Toggle Debug Mode Banner, Toggle Repaint Rainbow, Light Bulb code suggestions/fixes, Snippets, Prompts to get packages when out of date, Fix deprecated API’s, Documentation in hovers/tooltips, Go to Definition (Ctrl + Click), Find References,

Also, just as a sidenote, in Dart, access modifiers like private/internal/protected don’t exist, so everything is public, except when a top-level or member field identifier starts with an underscore, that makes it private to its library, which is by default the dart file it exists in.

Sources regarding DevTools and many other features provided by Dart and Flutter:
https://dartcode.org/
https://dartcode.org/docs/debugging-commands/ (a list of available debugging commands with explanations, also the source for the inspect widget gif)
https://flutter.dev/docs/testing/debugging
https://flutter.dev/docs/development/tools/devtools (collection of links about getting started with the DevTools)
https://flutter.dev/docs/development/tools/devtools/network
https://flutter.dev/docs/development/tools/flutter-fix

Flutter Development – Release Deployments

All-in-one option (like Codemagic, Bitrise, Appcircle, App Center): configure and use your selected automated Continuous Delivery (CD) option to deploy to devices for environments prior to production
Deployment for Android: create App Bundle > generate Android Package (APK) using bundletool > deploy APK to configured devices using bundletool. Production testing options: create App Bundle > upload App Bundle to Google Play > release to internal test track (limited number of internal testers) or to alpha or beta channels to test the production bundle first
Deployment for iOS: set up Bundle ID and Application on App Store Connect > create build archive iOS App Store Package (IPA) > Validate and distribute IPA from Xcode (wait 30 mins) > in TestFlight, release to testers (or the App Store)
Deployment for Web: build the app for release > deploy `/build/web` folder to cloud hosting. It can also be configured to be installable, from a browser viewing the hosted website, as an offline-capable Progressive Web App (PWA)

Sources for release deployments info:
https://flutter.dev/docs/deployment/cd
https://pub.dev/packages/flutter_appcenter_bundle
https://developer.android.com/platform/technology/app-bundle - Android App Bundle (instead of APK)
https://flutter.dev/docs/deployment/android#test-the-app-bundle
https://developer.android.com/studio/command-line/bundletool#deploy_with_bundletool
https://developer.android.com/studio/publish/upload-bundle
https://flutter.dev/docs/deployment/ios
https://flutter.dev/docs/deployment/web

Flutter’s Pros and Cons

Flutter Pros:

Beautiful and Flexible UI options and animations (a) Augmented selection of ready-made UI compared to native controls. (b) Full control over the rendering stack. (c) Composition and declarative UI makes creating custom widgets and reusing widgets easy
One codebase can be reused to create an application targeting mobile, web, and desktop
Hot Reload blows away competitors with its speed for iterating/collaborating on UX (developer/designer/business analyst (BA)/client)
Awesome DevTools
Performant renderingDart language compiles to efficient machine code and/or efficient JavaScript, both Just In Time (JIT) or Ahead Of Time (AOT)
Growing in developer cross-platform framework adoption and community support (a) Active Google and open-source contributors
Numerous resources to learn FlutterWorking with Flutter is enjoyable for developers and collaborators

Flutter Cons:

State management approaches and complexities can be difficult to learn (provider and BLoC are most common)
Requires learning Dart language (a) not broadly used outside of Flutter and Google (but Dart does seem intuitive to pick up, has good documentation and learning resources, and IDE’s have several macros for speeding up development)
Comparatively immature framework. (a) May be difficult early to recruit talent specifically for Flutter or Dart. (b) Most Flutter desktop targets are still in Alpha or Beta. (c ) Flutter for Web currently has poor Search Engine Optimization (SEO) capabilities

https://github.com/flutter/flutter/graphs/commit-activity — data showing continued effort and support from Google and open-source contributors for improving Flutter
https://betterprogramming.pub/why-flutter-isnt-the-next-big-thing-e268488521f4 — some downsides to Flutter
https://medium.com/@carlolucera/why-flutter-may-be-the-next-big-thing-15ccf6a9c358 — some counterpoints showing upsides to Flutter
https://medium.datadriveninvestor.com/flutter-engage-flutter-2-2b4e8dde016f — Q&A with Flutter leadership (3/4/2021) with the following quote regarding SEO: “SEO is something we are looking into, but right now if you are building a website that needs SEO, flutter is not a good choice”

Summary

Flutter’s main selling points include:

Development efficiency (including an astoundingly powerful hot reload experience, amazing DevTools tooling, and numerous useful macros and quick actions),
User interface (UI) beauty and flexibility and ease of customization and animation due to its numerous out-of-the-box widgets and its declarative compositional structure,
Extensive range of targetable platforms using shared application code, with performant rendering in mobile platforms, desktop platforms, and web, and
Extensive development support and library of packages and plugins from Google and open-source contributors.

Also noteworthy, though mostly a side effect of the above points, Flutter has a very high and growing adoption among the cross-platform development community.

If you’re considering giving Flutter development a try, do it. Flutter is here to stay, and my bet is that you’ll enjoy creating with it, and you’ll be happy with the UI you can create, and you’ll be happy how quickly you can iterate on changes. You may even enjoy learning about it, considering the variety of resources that teach about it.
Thanks for reading, and I hope I helped you learn something new.