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.”- . 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 - “Everything is a widget.” Flutter’s slogan 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 the display and function of native controls [AND provides a much than what exists in native] Imitates broader set of widgets and features Renders into a canvas control Xamarin Forms: Can deploy to mobile, desktop* code and views directly into native controls [In some cases, that don’t exist in native controls] Transforms lacks desired controls and features 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: : UI is a function of app state; display re-renders whenever relevant state changes Declarative UI 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 out-of-the-box or via packages customization options are generally available Xamarin Forms: : Renders the UI; makes imperative adjustments to rendered UI based on app state Imperative UI 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 using platform-specific SDK code (wrapped in C#) to adjust native control functionality or renderers or to create custom controls in each platform customizations can require excessive developer effort 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). is an article that really brought into focus for me the impact of Flutter’s Hot Reload. Here “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 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 pub.dev 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 , , and for more details. Platform-specific behaviors and adaptations Building adaptive apps these posts Xamarin Forms: Access to host device features is generally available via the Xamarin.Essentials package or other packages, where Xamarin interfaces are usually generalized wrappers for native interfaces Nuget 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 language Dart Developed in or or ; *each platform you target has development machine requirements (run iOS only on a Mac) and required installations VS Code Android Studio IntelliJ Xamarin Forms: UI is developed in (like XML but with bindings) ; back-end code is developed in XAML and/or C# C# Developed in for Android and UWP with a networked Mac required for iOS (local network for debugging), or in for Android and iOS Visual Studio Visual Studio for Mac 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 and ]. 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”). MacOS Windows 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: , the first stable release, was released Flutter 1.0 12/4/2018 Flutter has been under rapid development but is a relatively new offering Flutter is most robust with its widget as app root, based on Material Design, applicable to all Flutter-supported platforms, not just Android MaterialApp is themed based on Apple’s Human Interface Guidelines, and is obligated to use a fallback font when displayed on non-Apple devices CupertinoApp Widgets generally do not adapt their display to match their platform, so the makes cross-platform app UI either themed like Material Design or Apple’s Human Interface Guidelines on every platform decision between those two Xamarin Forms: (formerly MonoTouch) was first released Xamarin.iOS 9/14/2009 (formerly Mono for Android) was first released Xamarin.Android 4/6/2011 was first introduced Xamarin.Forms 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, for Flutter seems to be growing where all others, aside from React Native, seem to be shrinking cross-platform development market share Development on the remains highly active as there is currently a lot of support for Flutter from Google and open-source contributors Flutter library Xamarin Forms --> .NET MAUI: Microsoft’s future plan for Xamarin.Forms is to incorporate it fully into .NET 6 (November 2021) and beyond as , for an even more cross-platform development approach (this will include MacOS as a target in addition to Android, iOS, Windows, Linux) .NET MAUI (Multi-platform App UI) “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 : ReactiveUI, a functional and reactive Model-View-ViewModel (MVVM) framework RxUI : Model-View-Update, an application architecture with a single flow of state MVU 7 – Similarities BOTH: Open-source in 2019 and 2020 cross-platform mobile framework usage Top 5 Have many packages/plugins available Have excellent documentation and community Flutter - sound in Dart 2.12 and Flutter 2 / Xamarin - nullable reference types in C# 8 null safety 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 made specifically to showcase some of . You could even explore their code if you so desired. open-source examples Flutter’s incredible UI capabilities high-profile real-life apps created with Flutter. There’s also a to showcase and make searchable thousands of apps built with Flutter, some of which are open-source and some of which are templates. Check out these website Flutter Architecture Mobile/Desktop Flutter App: Web Flutter App: options: Web rendering (HTML, CSS, Canvas, SVG) HTML (CanvasKit: Skia compiled to WebAssembly) WebGL 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 from parent to child. In determining its size, the child respect the constraints given to it by its parent. Children respond by to their parent object within the constraints the parent established.” — passes downsize constraints must passing up a size 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 ( ) but it has minimal maintainers Check it out Flutter Development First-Time Basics Choose desired (Android, iOS, Web, macOS, Linux, WPF, UWP) targets Choose main Integrated Development Environment ( ) (Visual Studio Code/Android Studio/IntelliJ) IDE 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 Set up Use the IDE to a new Flutter project (code for new app is in `lib/main.dart`) create 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! Run Make code changes There are also for common actions (b) VS Code can be configured so while running (a) contextual assists and macros (snippets) “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 to essentially handle dependency injection down the widget tree and then (Business Logic Component) for encapsulating business logic apart from UI concerns provider BLoC Provider - - “A wrapper around InheritedWidget to make them easier to use and more reusable.” https://pub.dev/packages/provider BLoC - (includes ) - “Bloc makes it easy to separate presentation from business logic, making your code fast, easy to test, and reusable.” https://pub.dev/packages/flutter_bloc https://pub.dev/packages/bloc 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: (also source of bloc image) (also source of cubit image) (github issue summarizing a referenced 2018 Dart conference BLoC video's concepts with screenshots and explanations) https://www.didierboelens.com/2018/08/reactive-programming-streams-bloc/ https://bloclibrary.dev/ https://bloclibrary.dev/#/coreconcepts https://bloclibrary.dev/#/flutterbloccoreconcepts https://github.com/tenhobi/flashcards/issues/12#issuecomment-373922966 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: (Bloc core concepts – streams, blocs, cubits) (Flutter Bloc concepts – BlocProvider, BlocBuilder, BlocListener) (BLoC architecture - Presentation, Business Logic & Data Layer + Model, Repository, DataProvider) https://www.youtube.com/watch?v=toPtm6eyyeE&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=3 https://www.youtube.com/watch?v=NqUx-NfTts4&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=4 https://www.youtube.com/watch?v=kLDfhamoqe0&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=5 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: (BLoC architecture - Presentation, Business Logic & Data Layer + Model, Repository, DataProvider) https://www.youtube.com/watch?v=kLDfhamoqe0&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=5 Testing in Flutter using BLoC Use the and packages and optionally the package for “==“ override to comparison by values between instances of types that extend Equatable, which can be good for state objects. test bloc_test equatable Create a folder with symmetry to and at the same level as the folder test/ lib/ Create test files with the same folder structure as in lib/, and with matching dart file names, except with “_test” (before “.dart”) – this suffix is what the test package and IDE looks for suffixing the names In any given test file, create a function, create a (to group together tests in a named group that may share setup steps) main group Declare an instance of the type being tested, and create and functions to create and dispose of the instance, passing mocks for dependencies setUp tearDown Create and functions to test scenarios and specified inputs for expected results test blocTest Execute a test group in the IDE (“ ” or “ ” appears above the group), or with command `flutter test` Run Debug Testing info based on video - (BLoC testing) and - https://www.youtube.com/watch?v=cVru6Gy4duQ&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=6 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, , 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, Inspect Widget 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: (a list of available debugging commands with explanations, also the source for the inspect widget gif) (collection of links about getting started with the DevTools) https://dartcode.org/ https://dartcode.org/docs/debugging-commands/ https://flutter.dev/docs/testing/debugging https://flutter.dev/docs/development/tools/devtools https://flutter.dev/docs/development/tools/devtools/network https://flutter.dev/docs/development/tools/flutter-fix Flutter Development – Release Deployments : configure and use your selected automated Continuous Delivery (CD) option to deploy to devices for environments prior to production All-in-one option (like Codemagic, Bitrise, Appcircle, App Center) : 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 Android : 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 iOS : 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) Deployment for Web Sources for release deployments info: - Android App Bundle (instead of APK) https://flutter.dev/docs/deployment/cd https://pub.dev/packages/flutter_appcenter_bundle https://developer.android.com/platform/technology/app-bundle 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 UI options and animations Flexible (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 blows away competitors with its speed for iterating/collaborating on UX (developer/designer/business analyst (BA)/client) Hot Reload Awesome DevTools renderingDart language compiles to efficient machine code and/or efficient JavaScript, both Just In Time (JIT) or Ahead Of Time (AOT) Performant Growing in developer cross-platform framework to learn FlutterWorking with Flutter is enjoyable for developers and collaborators adoption and community support (a) Active Google and open-source contributors Numerous resources 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 — data showing continued effort and support from Google and open-source contributors for improving Flutter — some downsides to Flutter — some counterpoints showing upsides to Flutter — 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” https://github.com/flutter/flutter/graphs/commit-activity https://betterprogramming.pub/why-flutter-isnt-the-next-big-thing-e268488521f4 https://medium.com/@carlolucera/why-flutter-may-be-the-next-big-thing-15ccf6a9c358 https://medium.datadriveninvestor.com/flutter-engage-flutter-2-2b4e8dde016f 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. Helpful Resources main starting point for documentation https://flutter.dev/docs browse packages and plugins (and view readme and documentation on each) https://pub.dev/ (especially “Flutter Widget of the Week” and “Flutter in Focus”) https://flutter.dev/docs/resources/videos How is Flutter different for app development (4 min) https://www.youtube.com/watch?v=l-YO9CmaSUM&t=1s Building your first Flutter Widget (10 min) https://www.youtube.com/watch?v=W1pNjxmNHNQ&list=PLjxrf2q8roU2HdJQDjJzOeO6J3FoFLWr2&index=2 ClipPath widget (1 min) https://www.youtube.com/watch?v=oAUebVIb-7s&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=74 animated_text_kit package (2 min) https://www.youtube.com/watch?v=foQTKCQqVWk&list=PLjxrf2q8roU23XGwz3Km7sQZFTdB996iG&index=102 Example coding experience that teaches about applying adaptive design in Flutter (Adaptive Layouts part 1) (46 min) https://www.youtube.com/watch?v=n6Awpg1MO6M Tons of other concise teaching videos! https://www.youtube.com/flutterdev Bloc core concepts — streams, blocs, cubits (15 min) — other videos in this playlist may be helpful regarding BLoC and testing https://www.youtube.com/watch?v=toPtm6eyyeE&list=PLptHs0ZDJKt_T-oNj_6Q98v-tBnVf-S_o&index=3 Dart language details https://dart.dev/guides/language/language-tour helpful walkthrough for Dart, looking primarily at the many constructor options https://medium.com/flutter-community/deconstructing-dart-constructors-e3b553f583ef details of Flutter 2.2 https://medium.com/flutter/announcing-flutter-2-2-at-google-i-o-2021-92f0fcbd7ef9 installation and development setup steps https://flutter.dev/docs/get-started/install crucial development shortcuts in VS Code https://medium.com/flutter-community/flutter-visual-studio-code-shortcuts-for-fast-and-efficient-development-7235bc6c3b7d concurrent debug setup (and wiki for Flutter contributors) https://github.com/flutter/flutter/wiki/Multi-device-debugging-in-VS-Code some guided Flutter coding lessons https://flutter.dev/docs/codelabs Flutter repository with a collection of examples and demos https://github.com/flutter/samples visual samples index https://flutter.github.io/samples places to ask for Flutter assistance or discuss Flutter https://flutter.dev/community searchable open listing of apps built with Flutter https://itsallwidgets.com/ searchable Flutter resources https://flutterx.com/ open events related to Flutter https://flutterevents.com/ -Tommy Elliott, Software Developer Team Lead at AWH.

What is Flutter and How Does it Work?

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

How to Build an App with Xamarin.Forms

XRP, Cardano, and PEPE Lose Momentum — Pepeto Emerges as Q4’s Best Crypto Presale Opportunity

Michael Saylor’s $21M BTC Prediction Ignites Market Hype, Pepeto Surpasses XRP in Growth Potential

Investors Shift from Solana and Litecoin to Pepeto — The Ethereum Meme Coin With 100x Potential

Aussivo Debuts Verification Layer For Cloud at Token2049, Pioneering Blockchain Transparency

How to Build an App with Xamarin.Forms

XRP, Cardano, and PEPE Lose Momentum — Pepeto Emerges as Q4’s Best Crypto Presale Opportunity

Michael Saylor’s $21M BTC Prediction Ignites Market Hype, Pepeto Surpasses XRP in Growth Potential

Investors Shift from Solana and Litecoin to Pepeto — The Ethereum Meme Coin With 100x Potential

Aussivo Debuts Verification Layer For Cloud at Token2049, Pioneering Blockchain Transparency

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps