Posted on

Flutter For Front-End Web Developers

I started as a front-end web developer and then became a Flutter developer. I think there were some concepts that helped me adopt Flutter easier. There were also some new concepts that were different.

In this article, I want to share my experience and inspire anyone feeling paralyzed with choosing one ecosystem over the other by showing how concepts transfer over and any new concepts are learnable.

Concepts That Transferred Over

This section shows places where front-end web development and Flutter resemble. It explains skills that you already have that are an advantage to you if you start Flutter.

1. Implementing User Interfaces (UIs)

To implement a given UI in front-end web, you compose HTML elements and style them with CSS. To implement UIs in Flutter, you compose widgets and style them with properties.

Like CSS, the Color class in Dart works with “rgba” and “hex”. Also like CSS, Flutter uses pixels for space and size units.

In Flutter, we have Dart classes and enums for almost all CSS properties and their values. For example:

Flutter also has Column and Row widgets. These are the Flutter equivalent for display: flex in CSS. To configure justify-content and align-items styles, you use MainAxisAlignment and CrossAxisAlignment properties. To adjust the flex-grow style, wrap the affected child(ren) widget(s) of the Column/Row, in an Expanded or Flexible.

For the advanced UIs, Flutter has the CustomPaint class – it is to Flutter what the Canvas API is to web development. CustomPaint gives you a painter to draw any UI as you wish. You will usually use CustomPaint when you want something that is really complex. Also, CustomPaint is the go-to way when a combination of widgets doesn’t work.

2. Developing For Multiple Screen Resolutions

Websites run on browsers and mobile apps run on devices. As such, while developing for either platform, you have to keep the platform in mind. Each platform implements the same features (camera, location, notifications, etc.) in different ways.

As a web developer, you think about your website’s responsiveness. You use media queries to handle what your website looks like in smaller and wider screens.

Coming over from mobile web development to Flutter, you have the MediaQuery helper class. The MediaQuery class gives you the current device orientation (landscape or portrait). It also gives you the current viewport size, the devicePixelRatio, among other device info. Together, these values give you insights about the mobile device’s configuration. You can use them to change what your mobile app looks like at various screen sizes.

3. Working with Debuggers, Editors, and Command Line Tools

Desktop browsers have developer tools. These tools include an inspector, a console, a network monitor, etc. These tools improve the web development process. Flutter too has its own DevTools. It has its widget inspector, debugger, network monitor, among other features.

IDE support is also similar. Visual Studio Code is one of the most popular IDE for web development. There are many web-related extensions for VS Code. Flutter too supports VS Code. So while transitioning, you don’t need to change IDE. There are Dart and Flutter extensions for VS Code. Flutter also works well with Android Studio. Both Android Studio and VS Code support Flutter DevTools. These IDE integrations make Flutter tooling complete.

Most front-end JavaScript frameworks come with their command-line interface (CLI). For example: Angular CLI, Create React App, Vue CLI, etc. Flutter also comes with an exclusive CLI. The Flutter CLI permits you to build, create, and develop Angular projects. It has commands for analyzing and testing Flutter projects.

Concepts That Were New

This section talks about Flutter-specific concepts that are easier or non-existent in web development. It explains ideas you should keep in mind as you enter Flutter.

How To Handle Scrolling

When developing for the web, default scrolling behavior is handled by web browsers. Yet, you are free to customize scrolling with CSS (using overflow).

This is not the case in Flutter. Widget groups don’t scroll by default. When you sense that widget groups might overflow, you have to proactively configure scrolling.

In Flutter, you configure scrolling by using peculiar widgets that permit scrolling. For example: ListView, SingleChildScrollView, CustomScrollView, etc. These scrollable widgets give you great control over scrolling. With CustomScrollView, you can configure expert and complex scroll mechanisms within the application.

On Flutter’s side, using ScrollViews is inevitable. Android and iOS have ScrollView and UIScrollView to handle scrolling. Flutter needs a way to unify the rendering and developer experience by using its ScrollViews, too.

It may help to stop thinking about the flow of document structure and instead consider the application as an open canvas for a device’s native painting mechanisms.

2. Setting Up Your Development Environment

To create the simplest website, you can create a file with a .html extension and open it in a browser. Flutter is not that simple. To use Flutter, you need to have installed the Flutter SDK and have configured Flutter for a test device. So if you want to code Flutter for Android, you need to set up the Android SDK. You will also need to configure at least one Android device (an Android Emulator or a physical device).

This is the same case for Apple devices (iOS and macOS). After installing Flutter on a Mac, you still need to set up Xcode before going further. You will also need at least an iOS simulator or an iPhone to test Flutter on iOS. Flutter for desktop is also a considerable setup. On Windows, you need to set up the Windows Development SDK with Visual Studio (not VS Code). On Linux, you will install more packages.

Without extra setup, Flutter works on browsers. As a result, you could overlook the extra setup for target devices. In most cases, you would use Flutter for mobile app development. Hence, you would want to setup at least Android or iOS. Flutter comes with the flutter doctor command. This command reports the status of your development setup. That way, you know what to work on, in the setup, if need be.

This doesn’t mean that development in Flutter is slow. Flutter comes with a powerful engine. The flutter run command permits hot-reloading to the test device while coding. But then you will need to press R to actually hot-reload. This is not an issue. Flutter’s VS Code extension permits auto-hot-reload on file changes.

3. Packaging and Deployment

Deploying websites is cheaper and easier compared to deploying mobile applications. When you deploy websites, you access them through domain names. These domain names are usually renewed annually. However, they are optional.

Today, many platforms offer free hosting.

For example: DigitalOcean gives you a free subdomain onĀ .ondigitalocean.com.

You can use these domains if you are building a documentation website. You can also use them when you are not worried about branding.

In Flutter’s world with mobile applications, you usually in most cases deploy your app to two places.

You have to register a developer account on each of these platforms. Registering a developer account requires a fee or subscription and identity verification.

For App Store, you need to enroll for the Apple Developer program. You need to maintain an annual subscription of $99. For Google Play, you need to make a one-time $25 payment for the account.

These stores review every app reviewed before it goes live.

Also bear in mind that users don’t easily consume app updates. Users must explicitly update installed applications. This is in contrast to the web where everyone just gets to see the latest deployed version of a website.

Managing deployed applications is relatively more demanding than managing deployed websites. However, this shouldn’t scare you. After all, there are millions of apps deployed on either stores so you can add yours, too.

Additional Thoughts On Flutter

Flutter is a cross-platform tool to build desktop, mobile, or web applications. Flutter apps are pixel-perfect. Flutter paints the same UI on each app irrespective of the target platform. This is because each Flutter app contains the Flutter engine. This engine renders the Flutter UI code. Flutter provides a canvas for each device and allows you to paint as you want. The engine communicates with the target platform to handle events and interactions.

Flutter is efficient. It has high-performance levels. This is because it is built with Dart and it leverages Dart’s features.

With these many benefits, Flutter is a good choice for many applications. Cross-platform apps save money and time during production and maintenance. However, Flutter (and cross-platform solutions) might not be an optimum choice in some cases.

Donā€™t use Flutter if you want users to use platform developer tools with your application. Platform developer tools here mean device-specific tools like Android developer options. It also includes browser developer tools.

Don’t use Flutter for web if you expect browser extensions to interact with the website.

Also, don’t use Flutter for content-heavy websites.

Conclusion

This was a review of skills that carry over from front-end web development to working with Flutter. We also discussed app development concepts that you have to learn as a web developer.

Flutter is simpler for web developers because they both involve implementing UIs. If you start Flutter, you will find out that it gives you a good developer experience. Give Flutter a try! Use it to build mobile apps and of course, showcase what you build.

Cheers!

Flutter For Front-End Web Developers originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

Posted on

Flutter vs React Native. How to Cover All Mobile Platforms in 2022 With No Hassle

Mobile app development is a must for any business that pursues top-notch customer experience. When we hear about a new exciting product or service appearance, in most cases, we wonā€™t ask ourselves whether the company provides mobile app support or not. Instead, we grub our smartphones, always at hand, to decide if a new app is worthy of becoming our day-to-day companion. The current state of technology frees us from the need to reinvent the wheel. Thereā€™s no more need to hire several teams to build mobile apps for different platforms since the cross-platform approach helps erase the difference between them. Today, we will look at Flutter and React Native to decide who outplays who in terms of community, performance, and other factors.

Who Is Who in the World of Cross-platform Development

Flutter is Googleā€™s invention. One of the main distinctive features of Flutter enables programmers to use the same code base for creating an app that will work in browsers and on mobile devices. So if you're on a tight budget and want to cut costs of reaching both mobile and web users, it can be a decent choice.

Posted on

Flutter vs. React Native in 2022: Detailed Framework Comparison

Native applications work smoothly on mobile devices. Their graphic transitions take less time for UI rendering compared to the cross-platforming. The reason is simple: their code can communicate straight to the mobile OS core, enabling UI methods.

In the meantime, the native mobile platforms (OS) are written in different languages. For instance, Android OS is a mix of Java, C, and C++. In comparison, the iOS platform is built with Objective C and Swift. So, native mobile development requires the knowledge of a few languages like Swift and Java simultaneously. That's a big deal, as not many companies could afford to hire developers for each platform.

Posted on

Flutter Web Development: All You Need to Know

A Google offering, Flutter is a UI library that was initially offered as a tool to enable the development of functional cross-platform mobile apps with the capacity to offer seamless performance akin to that of a native app. An emerging framework used for crafting beautiful cross-platform mobile applications, Flutter allows development teams to target both iOS and Android platforms with a single code base. This helps save a significant amount of time and resources. 

It now also includes the development of web apps for mobile as well as desktops. Further, Flutterā€™s web support even helps develop complex standalone web applications with graphically rich and interactive content to reach end-users on a broad variety of devices. Also, as part of web support, it even offers a delivery model based on browsers for the existing Flutter mobile applications.

Posted on

Is Flutter a Good Choice for Creating iOS Apps?

Recently, Flutter app development has become a new easy, and productive way to create applications. Lots of the teams considering it as a possible technology for the next project, which is no surprise, since it has advantages of the native framework while being cross-platform. In this article, we will focus on how Flutter development is different in general and how Flutter mobile development for iOS works in particular.

Now developers are offered a lot of possibilities by the growing number of frameworks. Flutter app development is one of the most recent options that has become available for both Android and iOS engineers. The market is full of well-established technologies as well as new ones. The foundation teams and communities work on their constant improvement and develop new front-end frameworks that make programmersā€™ work easier and faster. Suddenly, a new big player has arrived and its name is Flutter.

Posted on

Build Live Video Mobile Apps With Flutter

Many cameras can stream video using Motion JPEG. This is a stream of JPEG images that can be displayed in sequence to form a video. Many IP cameras use a GET HTTP request to an IP address. The camera I am using in this example is a RICOH THETA 360Ā° camera that requires a POST command. More information on how this particular camera handles MotionJPEG is available in the community. Regardless of whether you use an HTTP GET or a POST request to start the motionJPEG stream, the processing is the same.

Motion JPEG Resolution and Framerate

Motion JPEG sends a stream of JPEG images at a specified resolution and framerate. Changing the resolution and framerate affects both the data transmission requirements and the latency.

Posted on

What Is FlutterFlow? Build Flutter and Firebase Apps Visually

It is a tool that allows you to build mobile apps without writing any code.

FlutterFlow offers a simple drag-and-drop interface that makes building all sorts of apps for iOS and Android easy. Besides, users need to be able to create their content, and for that, it also exports the generated flutter code. You can even switch from FlutterFlow to a GitHub repository!

Posted on

Flutter vs React Native: What Is the Best Language for Food Delivery App Development?


Mobile apps are no longer our future; they are our reality entirely involved in our life. Spending over 90% of the smartphone time on mobile apps, they have proved to be the most efficient tool to connect to your customers and ensure they get the best experience. Mobile apps are working strategies for any segment, but with global changes happening since 2019, the on-demand economy, particularly food delivery, is now much more dependent on mobile apps. The field has skyrocketed in the past two years and needs highly productive apps to meet customer requirements. In these terms, we have searched for the best alternative platform for creating the most responsive food delivery application. And we are still facing a choice: Flutter or React Native. 

Flutter vs React Native: Why Consider Them?

Service providers have hard times deciding how to build the best experience for customers. The Food-delivery app needs to be simple and attractive. To make it happen faster with less expense, you can go for building an app from scratch or choosing a cross-platform framework. The two most popular platforms, Flutter and React Native, are the answer to the question ā€œHow to create a food delivery app?ā€

Posted on

How to Create a Chat App With Backendless SDK for Flutter

In this article, we are going to demonstrate how to create a simple peer-to-peer (p2p) chat application with the Backendless SDK for Flutter. This will give you an overview of the process needed to integrate your Backendless server-side with your Flutter chat app client-side.

Flutter is a popular hybrid frontend framework for mobile and web app development. With the Backendless SDK for Flutter, Backendless is easily integrated as a powerful Codeless backend and real-time database for any Flutter app.

Posted on

How to Implement Flutter Barcode Scanner From Scratch

About two years ago, I wrote an article sharing how to build a Flutter barcode plugin with Dynamsoft Barcode Reader step by step. At that time, Flutter was still under development and only supported Android and iOS. Nowadays, Google has released Flutter 2, which allows developers to build apps for mobile, web, and desktop from a single codebase. If you want to build cross-platform apps, it is worth putting much effort into Flutter from now on. Since the new Flutter is not compatible with the old one, I decide to refactor the APIs of the Flutter barcode plugin and add a new method to support barcode scanning by video stream in real-time.

Flutter Barcode SDK Plugin

In the following paragraphs, I will demonstrate how to develop a Flutter barcode plugin that supports reading barcodes from an image file and image buffer, as well as how to publish the plugin to pub.dev.

Posted on

Flutter 2.0 State Management Introduction With Provider 5.0

With Flutter 2.0, you can build apps on mobile, web and desktop.  Graphics performance is fantastic and the development tools are great. The main barrier to learning Flutter is an understanding of state management.  This tutorial covers the Provider package, one of the most popular and easiest tools to manage state in Flutter.

A video version of this tutorial is available. Code and image files are on GitHub. 

Posted on

How to Implement Beautiful Charts in Flutter

In this article, we are going to learn how to implement beautiful charts in Flutter. Charts are a great visual way to represent any type of data, be it statistical data, financial data, or stats. We are using charts in a lot of our Flutter app templates, and we are going to describe how we implemented them.

When it comes to data visualization or representation in any field, the first thing that comes to our mind is charts. Charts are an effective and efficient mechanism to display statistical data that will not only make it easier to read the data but also compare and contrast. It helps display data in an informative way that makes it easy for readers to comprehend the overall data.

Posted on

How to: Flutter Release iOS App on Apple Store

If you have built a flutter app and are ready to release it on the Apple Store, then you are in the right place. In this tutorial, you will learn the process of how to release the flutter iOS app on the Apple store. There are some important points that you should be aware of before uploading the app to the Apple store. You may have heard that Apple is very restricting about user privacy and design UI. But, donā€™t worry, I am going to cover the common mistakes that a new developer do during the release of their first iOS app.

The official flutter document also listed a step-by-step process that you can follow. But, here I am making it simple for you. You can see our Multi-Vendor iOS App sample to know more about Multi-Vendor MarketPlace eCommerce.

Posted on

Flutter For Novices: Create Your First Cross-Platform App in 2021

In this era of the internet, it's no secret that a good and scalable mobile app can take your business to a new level. Running a business in this digital and competitive time is not a cakewalk. There are numerous apps that get launched on Play Store and App Store, but all of them are not successful. Therefore, business owners need a mobile app that fosters customer loyalty and builds brand advocacy. 

Technological innovations are leaving no stone unturned and are mostly impacting app development. More and more technology tools are launched into the market that makes developers' lives easy and helps them create beautiful apps. 

Posted on

React Native vs. Flutter: Which Is the Best Cross-Platform App Development Framework?

In todayā€™s ever-evolving digital world, having a functional and powerful mobile app has become mandatory for businesses of all shapes and sizes. Choosing the right technology framework is vital for building a successful mobile application, be it iOS or Android.

The purpose of this post is to help you identify the right cross-platform app development framework by comparing important factors like performance, user experience, ease of development, convenience, learning curve, as well as many other factors. This blog post will provide a detailed comparison of React Native vs. Flutter.

Posted on

How to Develop Your Flutter App With the BLoC Architecture

Flutter is becoming more popular each day, though itā€™s a rather young technology. It first appeared in 2015 as Sky, and in 2017 it became the Flutter that we know and use. Flutter is backed by Google and allows developers to create beautiful and cost-effective cross-platform applications with a native feel. 

There are many architectures you can use to build Flutter applications: