In recent years, cross-platform development has become one of the hottest trends in the world of programming. And it is not surprising, since this approach brings in a lot of significant advantages. Product owners can expect that the use of multi-platform technologies will reduce development costs and ensure faster time to market. Developers, in turn, can use the same business logic for web, mobile, and desktop versions applications and consequently have less trouble with code maintenance.

Developing a platform-independent application is a challenging task. So if you decide to start such a project, you will certainly require a special framework. Fortunately, there are plenty of them available out there. But right now, Flutter is one of the most promising tools on the landscape of cross-platform technologies. In this article, you will become familiar with Flutter, review a range of ready-made UI components for this framework, and learn about upcoming commercial Flutter components.

What is Flutter and Why is it so Popular?

Flutter is a relatively new declarative UI framework designed and maintained by Google to facilitate the implementation of cross-platform software solutions. Launched just in 2018, it has already gained recognition and popularity among developers. Responders of the popular Developer Survey 2020 held by Stack Overflow recognized Flutter as one of the most loved tools and technologies of the last year. A fresh developer survey from Statista names Flutter the most popular cross-platform framework utilized by software developers worldwide. Moreover, it has already reached the mark of 132K stars on GitHub.

Source: Statista

So why is this technology so popular among professional developers?

First of all, Flutter enables you to build performant applications that feel natural on various platforms using almost the same codebase. Flutter uses the Dart as the programming language and allows you to benefit from its numerous features. For instance, the hot reload function makes it much easier to add new features to a Flutter project and test them without restarting the app. The popularity of Flutter continues growing very fast thanks in large part to strong support from a large community led by Google.

In Flutter, everything revolves around widgets. They play a key role in the Flutter hierarchy, serving as building blocks of all graphical objects in an app’s UI. The framework comes with two built-in sets of reusable widgets (Material Design and Cupertino) that can be customized to provide the desired UI and UX. If that’s not enough for your app, I’ve prepared a review of some interesting UI libraries and components that can be useful in Flutter-based applications.

Open-Source UI Libraries and Components for Flutter

GetWidget

GetWidget (previously known as GetFlutter) is probably one of the largest and most well-known UI libraries designed with the use of Flutter SDK. It comprises a huge collection (1000+) of reusable widgets intended for covering various cross-platform development needs. With GetWidget, you can easily create widely used UI elements such as tabs, buttons, menus, lists, sliders, and many others. According to the GetWidget team, the library helps to cut the development time by 30–40%. Here is an open-source News application based on GetWidget and Flutter.

Flutter-Neumorphic

If you follow web design trends, then you are certainly familiar with the term neumorphism. It relates to a new design approach that obtained quite extensive popularity in recent times. A neumorphic design implies extensive usage of shadows and gradients. Many developers find it difficult to implement UI elements with this kind of design with Flutter. If you are one of them, Flutter-Neumorphic is exactly what you need. This UI package will help you to create neumorphic UIs in Flutter apps much faster.

PlutoGrid

A grid functionality is a vital aspect of any application, especially if you are working on a data-intensive solution. You can consider PlutoGrid to make the implementation of this important element easier in Flutter apps. This is a client-side UI grid component for creating standard data tables that render well across various platforms. It can be navigated via the keyboard. Using this component, you can add many useful features to the table such as sorting&filtering, frozen columns, multiselection, cell renderer, grid as a popup, etc. It is also possible to enable a dark theme for the whole data table.

Staggered GridView

Staggered GridView is a useful instrument for displaying images in a feed-like manner that is not typical for a standard GridView. This approach is used in popular social networks (Instagram) and photo hostings (Pinterest). Staggered GridView comes with multiple columns, rows of varying sizes, and many other helpful features allowing you to easily present groups of images with different height and width parameters.

Boxy

If you ever used Flutter’s built-in layout widgets, then you should know that it has some limitations related to the implementation of flex and custom layouts. You can overcome these difficulties by using Boxy. This tool is utilized for creating complex layouts with multiple children that help to arrange the interface structure of your Flutter app. Boxy offers a set of utilities for layouts, dynamic widget inflation, slivers, and many other useful things.

TimelineTile

TimelineTile is a UI component that enables you to represent events or processes in chronological order via a timeline in Flutter. Using TimelineTile, you can build a vertical or horizontal timeline and complement it with additional items (icons, images, text). This component gives you the freedom to customize any timeline element according to your needs.

Charts library

Data visualization is a tricky task for any programmer. Therefore it is nice to have a good charting library in your arsenal. Charts is a charting library that certainly deserves your attention. It is designed internally at Google, though it is not the company’s official product. Written in Dart and based on Material Design, this library suits well for various data visualization purposes in Flutter apps. It supports an array of charts (bar, line, time series, pie, scatter plot, etc.) for visualizing complex data and making it more comprehensible for further analysis.

FL Chart

FL Chart is one more charting option for the Flutter ecosystem that I would recommend for consideration. It is a robust Flutter chart library used for creating popular charts. Currently, the list of available chart types includes the following: line chart, bar chart, pie chart, scatter chart, and radar chart.

Flutter FormBuilder

Flutter FormBuilder is an intuitive tool designed to help you in creating cross-platform forms, and thereby provide a reliable communication channel between users and a Flutter application. It comprises a range of input widgets encountered in standard forms: text field, checkbox, slider, rangepicker, datepicker, etc. If needed, this form maker also gives you an opportunity to produce custom input fields. Numerous built-in validators (number, mail, min, max, etc.) help to ensure that users submit only valid data. You can incorporate a combination of several validators and conditional validation (the validation of one field depends on the value entered in other specific fields).

TableCalendar

When you require assistance in arranging activities (meetings, tasks, appointments) in a time sequence in Flutter projects, take a look at TableCalendar. This widget has a rich API allowing you to build multifunctional calendars with multiple view formats (week, two weeks, month) and customizable styling. Besides standard one-day activities, you can schedule custom events such as recurring ones. It also supports dynamic events and holidays. The localization feature will help you to reach more potential users from different countries.

Flutter Map

Flutter Map is a map widget that brings the ability to visualize geographic data to your app. In fact, it is a Dart implementation of a popular JS mapping library named Leaflet. With Flutter Map, you can build interactive maps and enrich them with various features (panning, zooming, markers, etc.). It also supports offline maps. Numerous plugins allow extending the core feature set with additional functionalities.

What about Commercial UI Solutions for Flutter

Open-source components for Flutter are great and they help to achieve different development goals absolutely for free. But what if you need more advanced components with a regularly updated feature set and technical support? In such cases, it is better to opt for commercial UI libraries.

The main issue here is that it is really hard to find any commercial UI components for Flutter on the market. I’ve managed to find just one solution - a package of Flutter widgets from Syncfusion. Although this library is still under active development, it already can offer you a lot of useful widgets such as grid, sliders, event calendar, and numerous data visualization tools.

Taking into account the scarcity of complex UI components for Flutter, the DHTMLX team seriously considers the possibility of developing Flutter Gantt that will enable developers to build project management apps with Flutter. The company has abundant experience in providing Gantt libraries for popular front-end technologies. Currently, the DHTMLX product portfolio already includes Gantt components for JS, React, Vue.js, and Svelte. And Flutter Gantt can become the next step. That’s how the development team sees DHTMLX Gantt for Flutter right now. On this landing page, you can make a pre-order for Flutter Gantt.

This article was originally published on medium.com on July 27th, 2021.