Flutter Beginner's Guide

    Outside mid-2019, the cross-platform firmly entered the life of startups around the world, but more often both outsourcing development teams and customers who rely on cost reduction are looking at it. Someone is betting on React Native, someone is exploring the possibilities of Kotlin Multiplatform, and the new AppsCast podcast guest Evgeny Saturov saturovv has been actively developing on the Flutter for the last six months, monitoring the framework updates and promoting the technology to the masses. A lot of useful links and tips for the beginning Flutter developer: from guidelines to the repository with examples of architecture implementation - in a conversation with Eugene.



    AppsCast - Mobile Development Podcast Coming With AppsConf. Every two weeks a new guest with whom we Daniil Popov ( int02h ) discuss technologies, best practices, the lives of developers, as well as holivar and share experiences.

    Alexei Kudryavtsev : Hello everyone, today we are visiting Zhenya Saturov, a developer at Surf and a host of Flutter Dev Podcast . Zhenya, tell us a little more about yourself.

    Evgeny Saturov : All my conscious life I have been an android developer, but I'm not so sure of my cloudless future as before. Over the past six months, we at the company have been actively interested in Flutter, we are trying to integrate it into the production development process. 

    Alexei Kudryavtsev : How did you suddenly switch to Flutter from an Android development?

    Evgeny Saturov: Complex issue. I myself sometimes ask myself. I accidentally heard about Flutter from his most important propagandist in the country, Zviad Kardava, at a devfest in Novosibirsk. We studied and decided to try, for six months we have been writing on Flutter, we have made friends with a declarative UI. 

    Flutter catches


    Daniil Popov : What attracted you to Flutter? 

    Evgeny Saturov : Flutter has a low entry threshold, it lacks the concepts of Activity and Fragment, and the life cycle is elementary and consists of three stages. Everything in Flutter is a widget: the application itself, which we used to represent as an application class, any block is a widget in which another widget is embedded. All screens are built exclusively by composition. The structure of a Flutter application requires a more streamlined architecture, a more coherent data flow. 

    Your head breaks a little when you try to write custom view in Flutter after Android development. It doesn’t work there. You have to embed views into each other and get more complex, combined elements. 

    At Google I / O introduced Jetpack Compose for Android, which allows you to write UI declaratively. The idea is fully borrowed from Flutter, even the names are reused. 

    Alexei Kudryavtsev : There is such a conspiracy theory that Google is preparing Android developers for Flutter. 

    Evgeny Saturov : I can throw you another conspiracy theory - Apple is preparing its developers for Flutter. 

    The difference between Flutter and other cross-platform solutions


    Alexei Kudryavtsev : Everything that you said is similar to the characteristic of React Native or Xamarin products. What's the Difference?

    Evgeny Saturov : Writing a good productive application on React Native is difficult because of the technical solutions that underlie it. Interaction with the platform is possible only through JavaScript Bridge. In the process, this operation drains performance significantly, which is critical when rendering the UI.

    Flutter, however, dealt with the performance problem at a high price - the developers of the framework had to write their widget packs on Dart (Flutter is also written on it). When rendering, the problem of subsidence by fps not only disappeared, but the Flutter team also assures that in theory it is possible to achieve not only 60fps, but also 120fps on devices that support this.

    Many discuss the topic of why the framework does not support Kotlin and whether it will appear, but Flutter developers say that they don’t have such a task, but maybe someone else will do it, like JetBrains. 

    Daniil Popov : It's obvious that there is Kotlin Multiplatform. You need to make part of the compiler that compiles Kotlin in Dart, and there will be profit.

    Alexei Kudryavtsev : You say so, as if it's like clicking your fingers. 

    Evgeny Saturov: The bulk of the work has already been done. On Google I / O, they talked about optimizing the Garbage Collector in Kotlin, which will allow you to utilize tons of objects in a millisecond. This is important, because when rendering the UI, thousands of widget graphs are regenerated every 16 milliseconds and must be urgently disposed of to prevent memory clogging. Previously, Kotlin did not know how, unlike Dart, but now nothing prevents to drag him into Flutter. 

    Alexei Kudryavtsev : The first part of the recycling process is the allocation of many objects. No, does performance sag at this point?

    Evgeny Saturov: The objects themselves are lightweight. Digging deeper, the Flutter application is a huge recyclerview, a list with reusable elements that are rendered only when the data behind them changes. At the same time, widgets that are recreated every 16 milliseconds have nothing to do with widgets that are in Android and are responsible for drawing themselves on the canvas. 

    Here the widget is a Data Class, in which there is data describing this widget. The widget that is drawn on the canvas exists in a single copy throughout the entire life cycle. Only its data wrapper is completely recreated. This allows you to work quickly without clogging your memory.

    Flutter is a fully open source project.

    This is not the kind of open source that is mirrored once a quarter from a closed repository to a public github. This is a real open source, where development is carried out directly in the open repository on the github. You can make any changes to widgets, write your widget pack and use it in your company. 

    Alexei Kudryavtsev : If they made their own widgets completely, then how are things going with animations and transitions between screens, for example, on iOS?

    Evgeny Saturov : The more important question is how to make the application look familiar to users of this platform. Out of the box, this does not happen in almost any case. If you write an application on Dart and use some kind of widget pack, then at startup, the application on Android and iOS will look the same.

    In order to get the native experience on the platform, you need to manually test the platform on the running application. If this is iOS, then you will use widgets from the Cupertino Pack, if it is Android, widgets from the Material Pack. The same thing with transitions: you can activate swipe back for iOS, but on Android there will be native navigation.

    Alexei Kudryavtsev : How is the switch between packs going? Do you really need to write "if iOS, use this", "if Android, then this"?

    Evgeny Saturov: Yes, exactly, directly literally. On Google I / O, I asked Flutter developers why not switch from the box, sew a check inside the platform that is currently working, and automatically set widgets. After all, people expect that a cross-platform, UI framework will do all this itself. They replied that they wanted to give users the freedom to choose how the application should look. 

    Given the fact that it is possible to write branded widget packs for your design system, you can write an application with the same appearance on both platforms.

    About Flutter internals


    Daniil Popov : So, Flutter has its own rendering engine, which independently draws all the widgets?

    Evgeny Saturov : Yes, but “your” is not quite the right word. This is Skia, a well-known engine that has been working in Chrome, Firefox, and a number of other browsers for a long time. 

    In fact, the Flutter team is a spin-off Chromium team.

    The developers were tasked with overclocking the Chromium engine to the maximum. At the same time, there was no requirement to preserve the ability to render the html page. With this condition, they were able to accelerate it almost twenty times and began to think what to do with such a result. 

    It became clear that the web is not the only application for this engine, and they tried to do something for mobile development. Tightened Skia, wrote their widgets, and we got quite powerful applications. Then they iteratively finished it up to the current state, when we can write full-featured applications, with meticulous implementation indistinguishable from native ones. 

    Alexey Kudryavtsev: And what else is under the hood of Flutter? Can you tell me what else it consists of, where is the optimization there, which allows achieving such performance?

    Evgeny Saturov : If we talk about the architecture of the platform itself, then two main layers need to be distinguished. The base is written "on the pros." It includes Skia - a graphics engine that draws all this beauty, a text engine that is completely borrowed from Android, and Dart VM. The second layer is written entirely in Dart. It contains all widget packs: animations, gesture processing, Foundation Pack with all sorts of stuff. Due to the fact that everything is written in Dart, good performance is provided. 

    I’ll immediately insert five cents: if after this release you decide to try to do something on Flutter, install the plug-in on Android Studio, collect your first application and say that you have been cruelly deceived, since everything is slow, you will be right. This happens during the debug build, which really slows down, animations lag, the lists barely scroll, and the application weighs about 60 MB. The fact is that in the debut version you are pulling a huge piece of Dart VM. This is a fee for the ability to recompile on the fly. When you assemble the release build, all these megabytes will be blown away by the wind, the application will work much faster, without fps subsidence at all. This remark is very important not to frighten the beginning Flutter developers.

    Dart VM is a separate topic. It is noteworthy that the main contributor is our Russian developer Slava Egorov, with whom they recorded the release for Flutter Dev Podcast . Dart VM allows you to quickly update code when changes are made. This is called Hot Reload - you make changes to the code, click the button, and after a second the changes are already visible on the device. This greatly speeds up the development and creates a favorable atmosphere in the team.

    Alexei Kudryavtsev : It seems to me that it is important that during Hot reload you remain in a state of flow. It's fun on small projects. But when the project is large, you moved one view and wait ten minutes. 

    Evgeny Saturov : Yes, I heard complaints from ayosnikov that the assembly can take up to 10-15 minutes.

    One of Flutter's very strong points is tolling.

    I don’t know how in iOS, but in Android, tolling is a pain. Each update of Android Studio breaks something, and it works slowly, it requires unrealistic resources, the latest processor and a mountain of RAM. Flutter immediately offers lightweight tolling. It is not necessary to work in Android Studio, you can download VS Code, install a plug-in on it, and this will be enough for development. I must say right away that for a full-fledged work with Flutter, you still need Apple equipment, since otherwise you will not be able to check your assembly on the iPhone.

    Daniil Popov: You said that Flutter is developing by leaps and bounds, but will there be backward compatibility problems because of this? For example, I convinced the business to make an application on Flutter, we wrote, debugged, and here comes the new version of Flutter or Dart, and our code does not compile, everything falls apart. I sat in a puddle in front of the customer. 

    Evgeny Saturov : This could very well happen. There is such an interesting thing as UX polls conducted by the Flutter team.

    The last survey asked: “Are you ready for unsupported changes without backward compatibility in the name of simplicity and purity of the framework?” More than 80% said they were ready.

    I don’t know if they thought well before answering the question, and how legitimate the results were, but the presence of such a publication says that henceforth the developers will allow unsupported changes. However, ayosniki not get used to. How much has Swift already been updated quite radically?

    Where to begin?


    Daniil Popov : Where to start if you decide to try Flutter for yourself? For the sake of interest, I opened Google’s codelabs and there are concrete examples of how to transfer from Java to Dart. Is there such a thing for iOS developers?

    Evgeny Saturov : The Flutter development team has released a series of articles on how to migrate to representatives of various profiles. There are Flutter for Android developers , Flutter for iOS developers . I open and see, for example, “What is the equivalent for UI view in Flutter?” or “Where is my Storyboard?”. All these questions are answered. I advise you to start with these articles, they are all in the Flutter documentation. 

    Still need to touch on the topic of how to make friends with Dart as a development language for Flutter. There is a Dart Language Tour for this.. There are all the basic concepts of Dart. But, honestly, some things differ a little more significantly (especially if you dig deeper), some things are missing, for example, function overloads, you still need to put a semicolon at the end of the line ...

    Alexei Kudryavtsev : Is there any some documentation? Who can I follow on Twitter? Blogs on the Medium?

    Evgeny Saturov : Of course, now there is a lot of information. There is a Flutter sitewith detailed instructions on how to set up a development environment, what to download, which SDKs, plugins to install. There are codewords, they are quite simple and reasonably informative, since they do not give a hundredth part of what Flutter is. But first, in order to understand the concept in principle, the codelabs will do. I do not recommend going through everything, there are quite tricky ones that integrate Google Maps into the application. This is also interesting, but there is more fuss with keys than real development. It is enough to go through the first three. There are more functional examples - clones of real Whatsapp, Instagram apps with assumptions.

    Alexei Kudryavtsev : This is cool, along with migration instructions.

    Evgeny Saturov: Yes, you can see how in reality people do those things that we are used to seeing in applications. It helps to get started.
    In addition, there are a bunch of paid courses on Udemy, but I doubt it is very necessary. I looked at what they consist of, and all this information (maybe not so structured) can be found absolutely free. 

    I also recommend the site https://itsallwidgets.com/ , which allows you to install showcase applications on your device right now (it doesn't matter if you are going to develop something on Flutter or not) and see how they work. There is a History of Everything appwhich was written in three months. This is an absolute fan, crazy animations. There is a giant timeline that you can zoom in, and various episodes of human life begin to appear on it. Each has its own custom animation. Everything is done on Dart without native libraries. On this site you can understand where the Flutter capabilities are: there are games written exclusively on Dart, rendered on Skia, there are also regular applications. 

    The Flutter Create contest was recently held : you had to write your own small application with the condition that the source, including all the dependencies, weigh no more than 5Kb. The companion won, who took an interactive earth step, which you can twist, poke anywhere, and see a real weather forecast. It looks completely unrealistic. These things can be used for inspiration.

    And you can still use several repositories on GitHub created by enthusiasts. They are all called the same - Awesome Flutter. These are collections with all samples, libraries, articles.

    About information resources. I recommend subscribing to the official youtube channel Flutter. There are shows that go out on a regular basis. Flutter Widget of the week - each week a detailed story about a single widget, the main application cases and features. The Boring Flutter Development Show- An interesting show format that goes on for an hour and comes out without editing. All this time, the participants are coding. It seems that they are doing it without much preparation, because mistakes constantly come out, they try to do something, they are dumb, they do not understand what is happening. Watching this is amazingly interesting.

    If you watch all these shows (there were relatively few of them), you can become a completely different person and believe that you have been writing Flutter all your life. They bring up interesting topics, problems that people face, and go all the way in search of a solution. It stars all the main stars of Flutter: Emily Fortuna , Andrew Brogdon . You can subscribe to them on Twitter, they are actively posting. You should definitely subscribe to Brian Egan , he hasrepository with 16 samples with different architectural patterns. This is an indispensable thing when you are already writing on Flutter and at the beginning of the project you need to choose the architecture that you will use. You just go to Brian, and he has already prepared everything for you. These guys are pushing the Flutter development industry forward. 

    Flutter in production 


    Alexei Kudryavtsev : Let's say I am the technical director of the company. Where can I search for Flutter developers?

    Evgeny Saturov : It’s just like people: there are open chat rooms in a telegram with enough people who already write on Flutter. But I would say that you don’t have to look for a Dart developer. Language is a tool and its ignorance is not an obstacle to hiring. Another question is that Flutter is not just Dart code. You still need to access the platform. And here's the question: how quickly will Android developers figure out how to do this on iOS, and vice versa, how quickly your web developer will figure it out, how to do it both there and there. 

    Currently, the most balanced Flutter development team consists of Android and iOS developers.

    Another thing is that this is not always possible to achieve, since ayosniki are still wary of Flutter.

    Alexei Kudryavtsev : How is Flutter used in production? How many projects did you write on it as a studio? And how much does it just go in?

    Daniil Popov : And who else besides you writes on it?

    Evgeny Saturov : In our case of outsourcing, this flies with a bang, because we can offer a price lower than for two native applications. Over the ten years of the existence of native frameworks, all customers are accustomed to having to pay twice for the same work by default, which is expensive, especially for small companies that count money. 

    For them, Flutter is a lifesaver, like any cross-platform, just Flutter gives a really cool result.

    And there are already customers who come and say: - We only need Flutter. Recently, this has been happening more and more.

    We are still collecting analytics because we have completed a small project that we have chosen as a pilot. It turned out to be done about one and a half times faster than if we were doing two native projects in parallel. It should be borne in mind that this was our first serious experience and many problems were resolved for a long time. Ideally, you can achieve a double increase in speed with the forces of a smaller team. And do not forget that then there will be half as much debugging, you will not have to fix bugs on two platforms. 

    About who else is using Flutter. I recently found out that certain projects (of course, not flagship ones) are written in Odnoklassniki, in Grab, a taxi in Southeast Asia that Uber recently bought. 

    The general trend is this: it is well suited for prototyping, suitable for experimentation, because there is interop with the native.

    You can quickly write a screen on Flutter in a native iOS or Android application, roll out A \ B tests and see if the hypothesis works and whether it is worth spending time on it, and then do a quality native development with what users really liked. 

    It is also suitable for real production projects if they are small and simple in concept (download json, show lists, interact with the user).

    When should Flutter not be used? If the application revolves around a platform feature, for example, a sophisticated camera, or constantly works with sensors, for example, a gyroscope. Then using Flutter is pointless - you will have a relatively simple UI that you reuse between platforms, but there will be a bunch of native code that you write twice. 

    About problems


    Alexei Kudryavtsev : What are the problems now?

    Evgeny Saturov : For example, in iOS there are some low-level rendering optimizations, but they will not work in Flutter, because it has its own graphics engine. Is this a problem?

    Alexei Kudryavtsev : In iOS, everything that you render turns into a bitmap, which is sent to a separate process on a render server, and it stacks them and renders on the GPU. What happens in an iOS application is a dumb CPU. It turns out that if you write an application on Flutter, all your rendering will work on the CPU, and only bitmaps will be sent to the GPU. Somewhere performance may be lost. Although you can directly use opengl in the application. If Flutter uses it that way, then all is well. 

    Evgeny SaturovA: There are minor build problems. As I said, there is a Flutter Engine layer, which compiles and connects like an endic lib. There is an annoying nuisance that could not be cured: when we assemble the APK for various configurations of the processor architecture, this native library is not packaged into an assembly for a 64-bit system. You need to dance with a tambourine, collect in a special way. 

    There are also strange troubles (unclear to android developers) when, in order for the iOS application to build successfully, you need to run X-Code (at least once start and close). 

    There are some shoals with documentation. The Cupertino Widgets Developer Satisfaction Index is now around 70%. In our practice, there was a view controller redefinition case - this can be done, but is not described in the documentation. There are fewer and fewer such documentation bugs - it can be seen that it is written with love.

    There are still small things that you either need to get used to or come up with your own solutions: it’s not so convenient to work with resources, since they are essentially not there. In Android, we are used to the fact that there is a res folder, it contains pictures, thongs and styles. In Flutter, everything is exclusively in the Dart-code, this does not lead to the most elegant solutions. For example, do international support by hand. 

    Future flutter


    Alexei Kudryavtsev : What are Flutter’s plans, is there a roadmap?

    Evgeny Saturov : In fact, the development plan is impressive . At Google I / O introduced Flutter for Web , which allows you to turn a Flutter application into a web application in almost two clicks. All rendering work rests with the Flutter Engine. There are no details yet, but you can collect a simple prototype. One of the main points of roadmap is full access to the web. There is no exact date, but it is likely that this will happen before the end of the calendar year.

    The second point, more distant in time, is access to desktops.

    Flutter, in the future, wants to become a framework that allows you to make one application that will be launched everywhere, even on the iron.

    Theoretically, Flutter applications are already running on desktops. There is a repository with showcase from the official Flutter Live conference, held for the first time in December last year in London. One of the speakers prepared a presentation in the format of a flutter application: all the elements on the slides were widgets. This became known only when he finished the presentation and minimized the application. Most likely, something like developer preview will be released before the end of the year, but so far the support for desktops is unofficial. 

    These are the milestones that await Flutter in the future. There are many minor improvements, but they are uninteresting to those who are not in context.

    In Release NotesYou can see the full list of commits that were made for the release. You can go through the commits, what changes have occurred in the release, you can look at all the next stages of the release cycle, all tasks that will be closed before the release is released. All information is open and available in the repository , there are all the answers, and if you don’t find something, write issues and the guys from the Flutter team will quickly answer you. 

    conclusions


    Daniil Popov : I made conclusions. Flutter team takes their product seriously and makes guides for migration from other platforms, samples so that you can feel it. When I wrote on Xamarin, I missed it. It is commendable that Flutter are proud of their creation and try to transplant everyone on it. 

    Personally, after passing through the codelabs, Dart did not cause any difficulty. More interesting would be the opinion of Alexei, but he did not pass through the code. According to Zhenya, it turns out that Dart is not such a terrible thing, and in a week it is easy to learn. If I need to make a game or a loaded UI application, most likely I will try to do it on Flutter.

    Evgeny Saturov: To summarize, you can quote a famous Android developer who has never written on Flutter: “It's 2019, and I’m very surprised if some startup starts writing a native application today when there is Flutter.”

    Radically enough, but who knows what future we will wake up tomorrow.

    If you already write on Flutter or have successfully mastered other cross-platform frameworks in production, then most likely submit your report to the autumn AppsConf .

    Also popular now: