DevTopics

Flutter is a free and open-source mobile UI framework created by Google and released in May. In a few words, it allows you to create a native mobile application with only one codebase. This means that you can use one programming language and one codebase to create two different apps (for iOS and Android).I began as a front-end web developer before switching to Flutter development.

I believe there were some ideas that made it simpler for me to adopt Flutter. Additionally, there were some novel ideas that were unique.

In this article, I want to share my experience and encourage anyone who is having trouble deciding between two ecosystems by demonstrating how concepts can be learned and how they can transfer between ecosystems.

Ideas That Were Transferred

This section highlights similarities between Flutter and front-end web development. It explains the abilities you already possess that will help you if you begin using Flutter.

Implementing User Interfaces (UIs)

You put together HTML elements and give them CSS styling in order to implement a specific UI in front-end web. In Flutter, you create widgets and give them properties to give them UIs.

The Color class in Dart uses “rgba” and “hex,” just like CSS. Like CSS, Flutter measures space and size in pixels. For almost all CSS properties and their values, Flutter provides Dart classes and enums. There are also Column and Row widgets in Flutter. These are display:Flutter flex’s equivalents in CSS. Use the MainAxisAlignment and CrossAxisAlignment properties to set the justify-content and align-items styles. Wrap the affected child widget(s) of the Column/Row in an Expanded or Flexible to change the flex-grow style.

Flutter has a class called CustomPaint that is equivalent to the Canvas API in web development for more complex user interfaces. With CustomPaint, you can use a painter to create any UI you like. CustomPaint is typically used when you need something extremely complex. Additionally, when a widget combination fails, CustomPaint is the preferred option.

Multiple Screen Resolutions Development

Mobile apps run on devices, while websites run on browsers. As a result, you must keep the platform in mind when creating for either platform. The same features (camera, location, notifications, etc.) are implemented differently by each platform.

The responsiveness of your website is something you as a web developer consider. You manage how your website appears on larger and smaller screens by using media queries.

You have the MediaQuery helper class if you are moving over from mobile web development to Flutter. You can get the current device orientation from the MediaQuery class (landscape or portrait). It also provides you with other device information, such as the devicePixelRatio and the current viewport size. You can learn more about the configuration of the mobile device by combining these values. You can use them to alter the appearance of your mobile app across a range of screen sizes.

Working with Debuggers, Editors, and Command Line Tools

There are developer tools in desktop browsers. An inspector, a console, a network monitor, etc. are some of these tools. The web development process is enhanced by these tools. The same is true for Flutter’s DevTools. Among other features, it has a widget inspector, debugger, and network monitor.

Similar IDE support is available. One of the most well-liked IDEs for web development is Visual Studio Code. For VS Code, there are numerous web-related extensions. VS Code is supported by Flutter too. So you don’t need to switch to another IDE while transitioning. For VS Code, there are extensions for Dart and Flutter. Also compatible with Android Studio is Flutter. Flutter DevTools are supported by both VS Code and Android Studio. The Flutter tooling is finished thanks to these IDE integrations.

The majority of JavaScript front-end frameworks include a command-line interface (CLI). Angular CLI, Create React App, Vue CLI, etc. are a few examples. Additionally, Flutter includes a unique CLI. You can build, create, and develop Angular projects using the Flutter CLI. For analyzing and testing Flutter projects, it has commands.

Additional Thoughts On Flutter

A cross-platform tool for creating desktop, mobile, or web applications is called Flutter. Flutter apps have perfect pixelation. No matter the target platform, Flutter uses the same user interface (UI) for all apps. This is so because the Flutter engine is present in every Flutter app. The Flutter UI code is rendered by this engine. Each device has a canvas that you can paint on thanks to Flutter. For the purpose of handling events and interactions, the engine communicates with the target platform.

Flutter works well. It performs at a high level. This is due to the fact that it was created using Dart and makes use of its features.

Flutter is a wise choice for many applications thanks to its many advantages. Cross-platform apps reduce costs and time spent on development and upkeep. Flutter (and cross-platform solutions) might not always be the best option, though.

If you want users to use platform developer tools with your application, avoid using Flutter. Device-specific tools, such as Android developer options, are referred to as platform developer tools here. Developer tools for browsers are also included. If you want browser extensions to communicate with the website, don’t use Flutter for web. Flutter should not be used for websites with a lot of content.

Conclusion

This article reviewed the transferable skills from front-end web development to using Flutter. We also covered key ideas in app development that web developers must understand.

For web developers, Flutter is easier to use because both involve implementing UIs. Starting with Flutter will show you that it offers a positive developer experience. Try out Flutter! Utilize it to create mobile applications, and of course, show off what you create.

Tags: Flutter, web development

It’s time again for a Flutter stable release and they are incredibly proud to announce Flutter 3! Only three months ago, they announced Flutter support for Windows. Now they have announced that Flutter will be stable for macOS and Linux, in addition to Windows!

It is said that Flutter has merged 5248 pull requests! They have announced several things as part of this release, including the update on Flutter’s support for macOS and Linux, significant performance improvements, mobile and web updates — and much more! In addition, they have announced about the reduction in support for older versions of Windows, and a short list of breaking changes. In today’s discussion we will deep dive into the latest Flutter release. So, let’s get down to business!

Flutter 3 brought joy to desktop platforms

With the release of Flutter 3, the labor of adding platforms is complete as developers on the stable channel can now build apps for macOS as well as Linux devices and expect first-class support. For Linux, this effort has been assisted by Canonical, developers of Ubuntu, who have been using Flutter to create core experiences within Ubuntu, including parts of the setup flow. Meanwhile, part of supporting macOS is that both Flutter and the underlying Dart programming language now have native support for Apple Silicon. Better yet, you can ship Flutter apps in the Universal Binary format, allowing them to run effectively on both Apple Silicon and Intel based Macs. This Apple Silicon support also extends to developers, with the Flutter and Dart SDKs both now ready to run on the latest generations of Mac Linux and macOS have reached stable and these following features have been included:

macOS system menu bar

You can now create platform-rendered menu bars on macOS using the PlatformMenuBar widget, which supports insertion of platform-only menus, and control over what appears in the macOS application menus.

Full support for international text input

International text input, including for languages that make use of text input method editors (IMEs) such as Chinese, Japanese, and Korean is fully-supported on all three desktop platforms, including third-party input methods such as Sogou and Google Japanese Input.

Accessibility

Flutter has included new accessibility services. Windows, macOS, and Linux all of them support this accessibility services such as screen-readers, accessible navigation, and inverted colors.

Universal binaries by default on macOS

As of Flutter 3, Flutter macOS desktop apps are built as universal binaries, with native support for both existing Intel-based Macs and Apple’s latest Apple Silicon devices.

Deprecating Windows 7/8 for development

With this release, they have been raising the recommended Windows version for development to Windows 10. While they aren’t blocking development on older versions (Windows 7, Windows 8, Windows 8.1), these versions are no longer supported by Microsoft and they will provide limited testing on these releases. But while they promised to offer ‘best effort’ support for older versions, they encouraged us to upgrade.

Mobile updates

Udates to mobile platforms includes the following:

Foldable phone support

The Flutter 3 release supports foldable mobile devices. In a collaboration spearheaded by Microsoft, new features and widgets will allow you to create dynamic and delightful experiences on foldable devices.

As part of this work, MediaQuery now contains a list of DisplayFeatures, describing the bounds and states of device elements like hinges, folds, and cutouts. Additionally, the DisplayFeatureSubScreen widget now positions its child widget without overlapping the bounds of DisplayFeatures, and has already been integrated with the framework’s default dialogs and pop-ups, making Flutter aware and responsive to these elements out of the box.

iOS variable refresh rate support

Flutter now supports variable refresh rate on iOS devices with ProMotion displays, including iPhone 13 Pro and iPad Pro. On these devices, Flutter apps can render at refresh rates reaching 120 hz, which were previously limited to 60 hz. This results in a smoother experience during fast animations such as scrolling. See flutter.dev/go/variable-refresh-rate for more details.

Simplified iOS releases

They have added new options to the flutter build ipa command to simplify releasing iOS apps. When you’re ready to distribute to TestFlight or the App Store, run flutter build ipa to build an Xcode archive (.xcarchive file) and an app bundle (.ipa file). You can optionally add –export-method ad-hoc, –export-method development, or –export-method enterprise. Once the app bundle is built, upload it to Apple through the Apple Transport macOS app or on the command line using xcrun altool (run man altool for App Store Connect API key authentication instructions). After uploading, your app is available for release to TestFlight or the App Store. After setting up your initial Xcode project settings, such as display name and app icon, you no longer need to open Xcode to release your app.

Web updates

Updates for web apps include the following:

Image decoding

Flutter web now automatically detects and uses the ImageDecoder API in browsers that support it. As of today, most Chromium-based browsers (Chrome, Edge, Opera, Samsung Browser, and more) have added this API.

The new API decodes images asynchronously off the main thread using the browser’s built-in image codecs. This speeds up image decoding by 2x, and it never blocks the main thread, removing all jank that was previously caused by images.

Web app lifecycles

The new lifecycle API for Flutter web apps gives you the flexibility to control the bootstrap process of your Flutter app from the hosting HTML page, and helps Lighthouse analyze the performance of your app.

Conclusion

Now that Flutter 3 has reached the six major platforms — Android, iOS, Web, Windows, macOS, and Linux — the big question some may have is “what’s next?” For Google, creating support for those platforms was intended to give Flutter a strong foundation to build upon. Now that the foundation has been laid, Google will continue to build upon it in two key avenues: improving developer productivity and expanding what Flutter can do.

Tags: Flutter, Flutter 3