Flutter is the great tool of the moment when it comes to creating mobile applications for Android and iOS; and this is not about a fashion or anything that appeared to him; its clean and expressive syntax with Dart, its declarative programming with widgets and other features such as Hot Reload, make it an interesting solution for creating native applications for Android and iOS and that few tools that also offer solutions for creating mobile applications are you can compare them.
Apart from creating mobile applications, in recent versions of the framework, they also allow you to create applications for Linux, Windows and Mac, apart from web; everything, with the same project and few changes to adapt to each platform.
It offers us a modular scheme between projects and applications, an important set of packages to extend the already complete framework and with this, the creation of scalable projects.
In this book, we are going to learn how the framework is formed, the basic features that Flutter allows us as an SDK to create mobile, desktop and web applications, all with the same base project and with minor modifications.
In the book we are going to focus mainly on mobile development.
In short, you will have an enormous material at your disposal, to make real applications.
Who is this book for
This book is for anyone who wants to start developing with Flutter; you may come from another framework or even PHP; in both cases, it is a great idea to learn from one of the most advanced and complete web frameworks you can find.
For those who want to know the framework and who know other web frameworks, but do not have the necessary knowledge to venture into these.
For people who want to improve a skill in application development and who want to grow as a developer.
For those who want to learn or improve a skill and with this, increase their chances of employment or to carry out a personal project.
Introduction
This guide is intended to get you started with flutter; With this, we are going to pose two things:
- It is not a book that aims to know 100% Flutter, or from zero to expert, since it would be too big an objective for the scope of this guide, if not to know its ecosystem, what it offers us and how it works in based on various examples and/or small applications with limited scope.
- It is assumed that the reader has at least basic knowledge of the Dart programming language, as well as web technologies such as HTML, CSS, and JavaScript; It is also recommended that you have basic knowledge in application development.
In this chapter, you will learn the history of Flutter, how and why it was created, and its evolution so far. You will learn how your community is contributing and how and why it has grown rapidly in recent years. The main features of Flutter will be presented, with brief comparisons with other frameworks.
What is Flutter?
Flutter is a framework that also provides an SDK or toolkit that allows you to create software interfaces; initially for mobile applications on Android and iOS natively, but it evolved to allow the creation of desktop and web applications.
Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase.
Flutter Beginnings
Taking as a reference, other frameworks to develop mobile applications (although from version 3 of Flutter it is already possible to develop on other platforms in a stable way, it is important to mention that the origins of Flutter started in mobile development with Android and iOS), Flutter is relatively new.
Flutter has undergone a great evolution over the years, let's see the most important points:
- It was called Sky, in its first appearance at Dart Developer Summit 2015 hosted by Eric Seidel. It was presented as the evolution of several Google experiments to create mobile applications in a more fluid way.
- Introduced as Flutter in 2016 and with its first alpha release in May 2017, it already allowed you to create apps for Android and iOS.
- Flutter was very well received by the community and based on the feedback of this or other factors, a constant evolution was achieved until reaching a stable version in 2018.
- In 2021, Flutter 2 was presented, which brings new features such as support for web applications and protection against null data (Null safety).
- In 2022, Flutter 3 is presented, the main novelty of which is to be able to develop desktop applications for Linux, Windows and MacOS in a stable manner.
Advantages of Flutter
The main advantages that Flutter has are two:
- Joint development for mobile and desktop applications (not counting web application development), which means that, with a single project, we can develop on multiple platforms.
- Native development for platforms, the applications generated in Flutter are native:
- In the case of mobile development, they are not packaged web applications (webview) unlike other technologies such as Cordova or Ionic.
- In the case of desktop applications for Windows and MacOS, they are not web applications packaged in an executable unlike other technologies such as Electron.
It is possible to develop for both mobile, desktop and web with a single project (a single base code and defining small changes in the project to adapt correctly to each platform). This last point, few (or no) frameworks allow it; that also provide similar solutions to the problems they purport to solve.
Flutter Features
The main reasons why Flutter became so popular among developers around the world is the ability to quickly and easily develop applications with performance and user experience that is almost equal to native applications.
And in development, it has a very clean syntax thanks to the declarative API and you can see the result in real time while writing the code.
Let's look at these features in more detail:
1. Application development time
Generally, the execution of an Android application using Android Studio takes several seconds, this time becomes considerable, when, for example, we want to edit those small details in the graphical interface; although it is true that Android Studio has a design preview, many times it does not work as expected.
Flutter's hot reloading feature allows you to see the changes applied almost instantly, without even losing the current state of the application. And this is exactly what makes Flutter app development several times faster due to increased development speed.
Additionally, the Flutter framework comes with a huge variety of widgets out of the box. Most of them are incredibly customizable, saving you time like no other framework because, for much of the app, we use the widgets as LEGO pieces that we place based on our needs.
Flutter provides a declarative API based on widgets that, in the end, significantly reduces development time.
App development time in Flutter is much less compared to building the same app separately for Android and iOS. This has a lot to do with the points made above and that you don't have to write any specific code for each platform.
Any 2D UI can be implemented in Flutter without interacting with an equivalent native app.
2. Application performance
App performance in Flutter is pretty much the same as a native app; Flutter is capable of providing 60 frames per second (fps) performance, or 120 fps performance on devices capable of 120 Hz updates; in addition to this, Flutter governs all pixels in the app; with those widgets, we can draw every pixel on the screen, without using the native components of each platform.
The low-level part of Flutter is the engine, written in C++, it uses SKIA, a 2D graphics rendering library to tell the GPU how to render graphics and text, basically how to paint each pixel on the screen.
Contrary to the approach of most cross-platform frameworks, Flutter does not use any intermediate engine to render the application (usually a webview).
Flutter provides an efficient way to create applications and therefore the performance is excellent.
Contrary to the approach of most cross-platform frameworks, Flutter does not rely on any intermediate code representation or interpretation. The Flutter app is built directly into the machine code, removing any performance bugs from the rendering process.
3. Highly customizable and extensible
One of the biggest advantages of Flutter is the ability to customize any element on the screen, since each visual element is a widget, you can greatly customize them and even create more complete and personalized widgets based on those defined by default in the framework.
4. Own rendering engine
Flutter lets you do so many things with your apps that aren't available on other platforms. Obviously, it requires the framework to be quite powerful. In fact, most of the points presented above are possible by having your own engine.
Flutter and Dart
The programming language called Dart was developed by Google, and it is a programming language that can be used to develop web, desktop, server-side, and mobile applications, therefore it is ideal for working with Flutter.
- Dart is a modern object-oriented programming language used to code applications in Flutter and whose syntax reminds us of Java or C, which allows us to provide the best experience to the developer for the creation of high-level mobile applications.
- Dart is Null Safety.
- The variable definition system in Dart is flexible, allowing the use of a dynamic type combined with runtime checks.
One of the main features that Dart has that makes it the perfect partner for Flutter is that the application run seamlessly on a user's device, as Dart compiles and executes directly on native code, without an intermediary bridge (eg. example, native JavaScript).
Flutter VS native development in Android Studio and xCode
When we want to create applications for native mobile devices using xCode and Android Studio, which are the official environments for iOS and Android respectively, if Flutter is not selected and the official platforms are used instead, we have several disadvantages:
- Longer/more expensive development cycles: When you want to develop an application for mobile devices, you should choose to build for a single platform or for both if you want to develop it with the official platforms, create several teams. This has some consequences in terms of cost and different capabilities of these native technologies.
- Multiple languages to learn: If a developer wants to develop for multiple platforms, they must learn how to do something in one operating system and programming language, and then do the same thing in another operating system and programming language. This certainly has an impact on developer productivity.
In short, to develop the same application on Android and iOS using the official environments, two different projects must be handled, with two different IDEs that handle different programming languages, in addition to Flutter having a declarative syntax and having the hot reload, in short, make it much faster and more maintainable over time to program mobile applications in Flutter.
Of course, if you want to take the application to run on Windows, Mac or Linux and even the web, there are points in favor of using Flutter compared to doing the same projects for each platform individually.
Differences and comparisons between existing frameworks
There are a lot of high-quality and well-accepted frameworks and technologies out there. Some of them are the following:
- Xamarin
- React Native
- Ionic
- Cordova
All of these frameworks offer different implementations for the same problem; therefore, you may think that it is difficult for a "new" framework to find its place in a field that is already full, but it is not. Flutter has benefits that make it a space, not necessarily because it surpasses the other frameworks, but because it is already at least at the same level as the native frameworks.
It's hard to compare performances between different technologies as some may be better in certain circumstances, but it's safe to say it claims to be. As explained above, Flutter was developed with high frame rates in mind. Some of the existing frameworks rely on JavaScript and HTML rendering, which can cause poor performance because everything is drawn in a webview (a visual component like a web browser). Some use their own components, but rely on a bridge to request the OS API to render the components, which creates a bottleneck in the application because it needs an extra step to render the UI unlike Flutter that all widgets are rendered internally with no additional layers or additional OS API calls and chooses to do the entire UI itself.
Material Design
The material is an adaptable system of guidelines, components, and tools that support user interface design best practices; It is nothing more than a template, used by Google for the modern development of applications that initially covered only Android and little by little was migrating to other services:
In Flutter, Material Design is part of the visual widgets that we can use:
https://docs.flutter.dev/development/ui/widgets/material
Therefore, we already have an applied style, which of course we can vary as we like according to the guidelines of the application we are developing.
Cupertino style
If you have developed an application for iOS, or have used an Apple device such as an iPad or an iPhone, you will know that they handle a different style than Android applications with Material Design; Flutter also features high-fidelity widgets for the current iOS design language:
Book chapters
This book has a total of 14 chapters, it is recommended that you read in the order in which they are arranged and as we explain the components of the framework, go directly to the practice, replicate, test and modify the codes that we show in this book.
Chapter 1: In this chapter, we are going to introduce the software needed to create applications in Flutter, on Mac and Windows.
Chapter 2: In this chapter, we are going to learn about Flutter and Dart for application development.
Chapter 3: In this chapter, we will learn about the use of widgets as a central element when creating applications in Flutter.
Chapter 4: In this chapter, we are going to create a project in Flutter using Visual Studio Code.
Chapter 5: In this chapter, we are going to learn about the main widgets in Flutter and stateful and stateless widgets.
Chapter 6: In this chapter, we are going to have a hello world in Flutter and learn about its most important features.
Chapter 7: In this chapter, we are going to create a single page application about measurer.
Chapter 8: In this chapter, we are going to create an application to register sites based on photos taken from the gallery or by camera.
Chapter 9: In this chapter, we are going to learn about the Provider state handler applied to the above application.
Chapter 10: We are going to create a web application, type to do list, initially, it would be a mock-up.
Chapter 11: For the previously created to do list application, we are going to make several adaptations through media queries so that it is adaptive according to the screen size.
Chapter 12: We will apply various changes to the to do list application, to make it more adaptable; changes such as alignment, overflows, images with rounded corners, will be covered in this chapter.
Chapter 13: We will integrate the to do list web project, so that it works with a database in Cloud Firestore using Firebase.
Extra Chapter: In this chapter, we are going to learn about possible errors that can occur when running applications in Flutter.
Sin mas que decir, recuerda que es un libro para principiantes y al terminar el libro, serás capaz de crear cualquier aplicación básica en Flutter y conocer más que los aspectos básicos del mismo.
El libro se encuentra actualmente en desarrollo, por lo tanto habrá más capitulos a futuro.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter