What is Flutter?

Petr Jelínek

Backend Developer

16 Apr 2021

268

If you are even just a little involved in the programming field, you have probably heard about the Flutter, which is a framework that is perfect for small projects or hobby ideas. But what exactly is it?

Flutter is an open-source framework, developed and maintained by Google, for creating multi-platform applications. This means that you can create an application that can be distributed to the main platforms (iOS, Android and web). The biggest advantage is, of course, the fact that you need maintain only one repository/code base. The Flutter framework is not some kind of hybrid solution, like, for example, Ionic, which wraps the JavaScript app into some sort of “web wrapper” and this app is later distributed. Flutter is compiled directly into native code specific for the selected platform, which has a lot of advantages.

Dart language

In Flutter, you write your code in the Dart programming language, which is also Google's project. The syntax of this language is very similar to JavaScript or C#, so if you have any experience with such languages, it won't be hard for you to start coding. Google used Dart mainly because of these advantages:

Ahead-Of-Time compilation - This means compilation from the higher programming language (Dart in this case) directly to the native/platform specific code.
UI Optimization - Dart is optimised specifically for the UI in such a way that its rendered elements and animations are fluid and run without any lags.
Owns every pixel - The main advantage is the possibility to work with each pixel on the screen/canvas. Dart asks the system for its canvas and draws the selected elements on it. (They are not drawn by the system directly.)

Everything is a widget

The main idea of Flutter is that “Everything is a widget” - from simple text to the advanced list structures. You can use one of two predefined styles - Material and Cupertino widget style. You probably know Material Design from Google's applications and Cupertino from iOS, but if you don't like either of these, there is still the possibility of creating your own style.

Flutter contains two types of the widgets - stateless and stateful.

Stateless widget - This type of widget is used in cases when you know that the part of the UI won't be changing in the future; so for creating some kind of static content, this is a way to go.
Stateful widget - This type of widget, on the other hand, is used when you know that the UI will be changing dynamically over time; in other words - when the internal state of the widget changes and you have to show these changes to the users. This widget also contains a state object, which has a few useful methods, for example the setState() method, which you have to call when some data is changed and you want to reflect these changes on the UI. So this method will just tell the framework “Look, something inside this widget changed, so you better render this widget again so the users sees the changes or you are out”.

setState(() => value = newValue);

Each widget contains a build() method that is invoked every time the widget comes into view. You have to write all of your UI code for a specific widget inside this method so that Flutter can render it on the canvas.

Also, when using a stateful widget, this method is called every time you call a setState() method; so when you want to show changes to the user, this is how it works.

class GreenFrog extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

class YellowBird extends StatefulWidget {
  @override
  _YellowBirdState createState() => _YellowBirdState();
}

class _YellowBirdState extends State<YellowBird> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

Hot reload & refresh

When developing with Flutter, you will really appreciate functionality such as hot reload and hot refresh. These features will allow you to see changes that you have made immediately after you save a file or hit the reload button, so there is no need to restart the whole application just to see changed text. This is a really productive tool and saves you a lot of time.

Simulators & Environments

As I mentioned above, you can develop applications for either iOS or Android which means you have to somehow debug your app. There are two ways to do that.

Simulators - are very easy to use, basically because you can test and debug your app on a device that you don't physically own, so you can check or prevent the UI from overflowing or rendering in the wrong way. There is also a little catch - you can't use iOS simulators if you don't have a Mac OS machine, but when you have, you can use either iOS or Android simulators, which are supported on the Mac OS as well. Windows supports only Android simulators.
Real devices - Nothing will replace real devices in the way of debugging, but as I mentioned above, you can't test your app on the device that you don't physically own. There is also the same problem - when you want to debug on an iOS device, you have to have a Mac OS device with the developer account. Android devices are supported on Windows as well as on the Mac OS.

Before you go to create your first app, let me quickly tell you about text editors and development environments that you can use. My personal favourite is Visual Studio Code, which is a very lightweight open-source text editor created by Microsoft. You can install tons of very useful extensions to boost your productivity and effectiveness. Another IDE is Android Studio, which is very similar to IntelliJ IDEA, if you are familiar with this. Also, for Mac OS users, you can use Xcode, if you have some experience with Apple-platform development.

IDEs

Libraries and packages

One last thing is third party libraries and packages, which could be very useful, when you don't want to write everything from scratch - in your Flutter project, you can just add a package with the version to the configuration file - pubspec.yaml and Flutter will automatically download and include this library in your project. You can browse all of the packages on the pub.dev portal.

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^0.1.3
  http: ^0.12.2
  google_maps_flutter: ^1.2.0

Conclusion

Flutter is a relatively new but very popular framework in which you can pretty quickly create apps for multiple platforms and all this with only one codebase, so you don't have to learn platform specific languages. Google is still working on the new updates of the framework, so better optimisation and new features are still coming into Flutter. Also, Flutter is an open-source project, so feel free to contribute to the repository with your own idea!

Excited about Flutter and can’t wait to use it? Feel free to contact us for further discussion and help with its implementation in your next project!