Flutter - One native code base for every platform
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
| Title |
| |
| Title of Series | ||
| Number of Parts | 254 | |
| Author | ||
| License | CC Attribution 4.0 International: You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor. | |
| Identifiers | 10.5446/53245 (DOI) | |
| Publisher | ||
| Release Date | ||
| Language |
Content Metadata
| Subject Area | ||
| Genre | ||
| Abstract |
| |
| Keywords |
00:00
AeroelasticityLaserComputing platformComputer animationJSONLecture/Conference
00:30
AeroelasticityMachine codeBraidSingle-precision floating-point formatCartesian coordinate systemSoftware development kitGoodness of fitCross-platformLecture/Conference
00:57
AeroelasticityGoogolSoftware frameworkCartesian coordinate systemSoftware developerCross-platformSinc functionAeroelasticityBootingXMLProgram flowchart
01:41
GUI widgetMachine codeCloningAeroelasticityComputing platformAndroid (robot)GoogolLatent heatImage resolutionFrame problemScheduling (computing)Artistic renderingEvent horizonService (economics)Communications protocolPhysical systemComputing platformLevel (video gaming)LoginLibrary (computing)Arithmetic meanFormal languageDenial-of-service attackMachine codeAeroelasticityType theoryFunctional (mathematics)SoftwarePhysical lawState of matterCodierung <Programmierung>WindowNetwork topologyBinary codeSystem callScripting languageSoftware developerGastropod shellComputer fileComputer configurationTorusGoogolAndroid (robot)Operating systemWeb pageCartesian coordinate systemExtension (kinesiology)Group actionArtistic renderingGUI widgetWeb 2.0Repository (publishing)Different (Kate Ryan album)outputInternet service providerCore dumpSoftware frameworkBit
05:35
State of matterFeedbackComputer-generated imageryMenu (computing)Web pageView (database)Physical systemAeroelasticityGUI widgetAndroid (robot)GoogolComputing platformIcosahedronImage resolutionFrame problemScheduling (computing)Event horizonArtistic renderingCommunications protocolComputing platformService (economics)State of matterGUI widgetEvent horizonDifferent (Kate Ryan album)Electronic mailing listArithmetic meanFeedbackType theoryMathematicsTouchscreenMultiplication signTable (information)Medical imagingCoefficient of determinationXMLUML
08:13
Home pageFile formatGUI widgetRoundingContext awarenessString (computer science)TimestampComputer iconExtension (kinesiology)Price indexDivision (mathematics)PhysicsOvalSource codeLattice (order)Functional (mathematics)Multiplication signSocial classSoftware testingPhysical lawState of matterThermal expansionMathematicsElectronic visual displayMachine codeLevel (video gaming)Different (Kate Ryan album)SoftwareCASE <Informatik>Electronic mailing listTesselationOffice suiteElement (mathematics)Variable (mathematics)BitTouchscreenInformationArrow of timeCartesian coordinate systemMereologyCircleMobile appImplementationGoogolOperating systemPhysical systemReduction of orderArithmetic meanStatement (computer science)Line (geometry)Protein foldingHome pageUser interfaceGUI widgetAeroelasticityStandard deviationView (database)Inheritance (object-oriented programming)Category of beingAndroid (robot)Arithmetic progressionFormal languageComputer animation
15:37
Computing platformMobile appArithmetic meanMobile appBitVirtualizationAeroelasticitySemiconductor memoryInsertion lossPoint (geometry)Software frameworkMobile WebDifferent (Kate Ryan album)Machine codeoutputAndroid (robot)Cartesian coordinate systemComputing platformFrame problemScripting languageGreatest elementWebsiteVirtual machineFLOPSOffice suiteSoftware testingKey (cryptography)MetreMechatronicsSoftware developerDialectJava appletSystem callDrum memory
19:03
Line (geometry)Computing platformCurvatureDenial-of-service attackECosComputing platformDifferent (Kate Ryan album)Mobile appBuildingAndroid (robot)outputAeroelasticityOperating systemComputer animation
20:31
Home pageAndroid (robot)GoogolComputing platformLatent heatIcosahedronData managementImage resolutionFrame problemScheduling (computing)Physical systemArtistic renderingEvent horizonCommunications protocolComputing platformService (economics)GUI widgetProjective planeFitness functionHand fanMobile WebProfil (magazine)Perturbation theoryComputer programmingData storage deviceFlock (web browser)Process (computing)Structural loadService (economics)Connectivity (graph theory)Focus (optics)Chromosomal crossoverThomas BayesDifferent (Kate Ryan album)Functional (mathematics)Machine codeWebsiteFormal languageComputing platformSoftware frameworkOffice suiteComputing platformMobile appAndroid (robot)Cartesian coordinate systemSoftwareSource codeWindowHome pageOpen sourceOracleCrash (computing)Physical systemForcing (mathematics)TelecommunicationInternetworkingOperating systemGraphics libraryGoogolINTEGRALAutomatic differentiationPoint (geometry)Multiplication signConfidence intervalWordAeroelasticityRing (mathematics)Physical lawWeb 2.0Slide ruleTouchscreenDenial-of-service attackLevel (video gaming)Operator (mathematics)outputOpen setParameter (computer programming)Computer virusClosed setJava appletRevision controlWeb browserLocal ringComputer fileSystem callIntegrated development environmentProgramming languageSingle-precision floating-point formatBuildingState of matterSoftware maintenanceVisualization (computer graphics)GUI widgetPlug-in (computing)Ocean currentWriting1 (number)Lecture/Conference
30:24
Computer animation
Transcript: English(auto-generated)
00:22
He's amazing. His talk, which he's been working on all night. A warm welcome. Yeah, good morning. My name is the one with the braid. And today, I will give an introduction into Flutter.
00:42
What is Flutter? Flutter is the software development kit for creating cross-platform applications from one single code base. Yeah, here you can see the great logo of Flutter.
01:02
Brief history of Flutter. Flutter was announced by Google in 2015 as a new framework for creating Android applications. It was initially launched in 2018. Yeah, and since that, it has become
01:26
one of the most popular cross-platform software development kits. Yeah, boot up. Getting started with Flutter. Well, we will have a look at the installation of Flutter
01:46
at one of the special features of Flutter called widgets. There we will have a look on two different types of widgets called stateful and stateless widgets. And at the end, we will have
02:01
a look at something really strange in Flutter. Unlike in actually every other software you use for mobile development, you write the design in your code, but not in any XML files, but directly into your Flutter code.
02:23
Installation is quite easy on Linux and Mac OS. You can just clone the Git repository from GitHub, update your path, and enjoy your new Flutter installation.
02:41
On Windows, you need to download pre-built binaries as Windows is unable to execute shell scripts. Yeah, that's it about the installation. Now we will go a bit deeper into the technology Flutter is using.
03:01
Flutter is written as an extension for the language Dart. That's what you can see over there. It's a framework for the language Dart. And you can actually say Dart, the language Dart was developed for Flutter, and Flutter was developed for Dart.
03:24
Actually, no one is using Dart without Flutter. So it was made just for Flutter. The language Dart is written in C++ and C. And the so-called Flutter engine is written in C++ and C2.
03:44
Why? It's simply because this allows low-level rendering, means Flutter does not need any libraries of the operating system it's executed on. So if you run a Flutter application on Android,
04:01
you won't need any libraries of Android. If you run it on iOS, you won't need any libraries of iOS. And if you run it as a web page, you won't need any JavaScript dependencies. What does the engine provide us?
04:22
The engine provides actually the basic rendering of the layout, and core functions like IO access, graphic encoding and decoding, animations, accessibility options, and network, of course.
04:43
It's using the Skia library of Google. It's quite well known in Android and even for desktop development. And that's what the engine does.
05:00
And on top of the engine, you will have widgets visible. And widgets visible is called widgets. An application is built out of many widgets. You can just imagine widgets like HTML tags. You just put them into each other.
05:21
They have several childs and so on. And you get a tree of widgets as you get a DOM tree in JavaScript and HTML. That's how you can imagine of. Let's have a closer look at these widgets.
05:44
As already mentioned at the beginning, we have two different kinds of widgets. We have these stateless widgets. They provide no feedback. For example, a simple text or an image or buttons,
06:05
a list view, a table, they could be displayed as stateless widgets. A stateful widget is able to provide feedback. It means you can tell a stateful widget,
06:21
OK, if you press this button, please do this. That's something you only can do with stateful widgets, but not with stateless widgets. But why do you separate between these stateful and stateless widgets? Couldn't you just make one type of widget?
06:42
It's due to better performance. Because a stateless widget is being rebuilt as soon as its content changes. For example, we create a text containing the variable hello world with the text hello world.
07:04
And now if we change the variable hello world, the whole widget, this text, will be re-rendered on the screen.
07:21
Every stateless widget will be just re-rendered without being able to be informed about a change of anything. And that's a difference to a stateful widget. A stateful widget is able to say, OK, I now want to change because a timer was running down
07:41
because an event occurred because of I don't know what. And a stateful widget is not being rebuilt by its upper widget, by its super widget, and so on. Means a stateful widget will not be changed if the state of the upper widget changes.
08:06
That's the difference between the stateful and stateless. This stuff. Yeah, I do not want to get deeper into the technology. Let's just have a look at some shortened source code.
08:26
If you write an application, for example, a mobile application in Flutter, it will actually be just this. OK, you will have to implement this home page. But that's actually all you need.
08:42
You have the main method in which you call runApp. And there you provide an application. In this case, a material app. Material means it uses the material design. Material design is a design standard by Google.
09:00
You know it from Android. But I could tell a Cupertino app as well. Then it would show an iOS-like user interface. Or I could just create my own style if I want. But no one would like it. And there we provide just the home page.
09:21
And now we'll have a look at the home page. Here you can see a basic class in Dart. Dart is the language for Flutter. You can see it is a stateless widget. Means if the app opens, it will be built.
09:40
If the app closes, it will be moved to trash. If I don't know what, if the system decides, OK, battery safer, I don't know what, we reduce network traffic. So the stateless widget cannot react. It will just get the information from the application
10:01
and the operating system. The most important in any widget in Flutter is the build method. The build method contains everything which is displayed on the screen.
10:21
In our case, we will display a list tile. Means one element of a list view containing some text. And a button which will share any text if you press it. But that's not the interesting part.
10:42
Important is this build method, which tells, OK, this widget, my widget test score detail, should look like this on the screen. Here again, this is everything which is finally displayed on the screen.
11:03
Everything which is within this build method. That was a stateless widget. A stateful widget is a bit more complicated. You can see over there, there's not written just
11:24
join test score tile. But join test score tile state means this is the class containing the state. And the state offers different, you could call them stages.
11:41
First of all, the init state, in our case, we do not modify anything. It does not need to be initialized. That's why we just call the super init state method. But what you could do an init state, for example, would be loading something from network.
12:02
If my widget should display, I don't know, data from Wikidata, and you would place the code for loading this data in the init state method. This is being executed before the widget is built the first time.
12:25
Here you can see the build method again. Here I highlighted why we need a stateful widget in this case. You can see here it's an if statement, a shortened inline
12:43
if statement. When you build the widget, it checks whether the variable test loaded is true. Test loaded is initially false. The first time the widget will be opened,
13:01
it will skip down there, and it will show a progress indicator, meaning spinning circle in the center. As soon as this should ever change, as soon as this variable will get true, it will show this part.
13:21
That's why we need a stateful widget. Because the widget has to react on variables within the class.
13:41
Over there, just at the beginning of the implementation of this class, you can see some variables initialized at the beginning. These are the variables which are available within the class. It's just like you can see the use.
14:04
It's the only use in this case over there. And again, as it's a widget, everything which is provided by the whole build method
14:20
is what the widget looks like. So in the first case, it will be this, and afterwards, it will be this. And now, one more property of a stateful widget. Here, we return an expansion tile.
14:44
You can imagine a part of a list, which is expandable with an arrow button. And if you press it, it will show some more detailed information. And there, we set a listener on the change of its expansion.
15:02
And as soon as it will be expanded the first time, we will just execute this function, large score. And maybe the large score function would be the function changing this Boolean to true.
15:20
And as soon as it will be changed to true, we have our widget providing the information within there. That's the main difference to a stateless widget. Now, just a little compare to other cross-platform
15:46
frameworks. You maybe know. I will compare it with JavaScript frameworks like React and Electron. If you have a JavaScript mobile application, you usually load in WebView, consuming about 200 megabytes
16:06
RAM. This is ugly for a mobile device, because no mobile device wants to provide 200 megabyte RAM for five applications, because not every mobile device has that much RAM.
16:21
That's how JavaScript works, because you need a WebView, and WebView needs all this stuff in WebView. Needs a JavaScript engine, style engine, and so on. That's different in Flutter, because Flutter code is being compiled to native code. Means if I compile this application for Android,
16:42
the code will be compiled to Kotlin code, which is then executed. Means no need for JavaScript, no need for virtual machines, or anything like that. That's why the consumption of memory is much lower.
17:02
The next point is it's native look and feel. For example, if you write an app in JavaScript, well, you have the problem that it's JavaScript and not the native design of the platform. If I write an Android app in Flutter,
17:21
I can just tell the app, OK, you shall now look like an Android app, provide material design, provide buttons which look like Android buttons, provide a navigation drawer like an Android application, and so on. That's actually almost impossible with JavaScript,
17:40
but in Flutter, it's actually the standard. But there we come to one of the problems of Flutter. It's the same layout on all platforms. Means if I tell my application, OK, you shall look like an Android application, it will even look like an Android application
18:02
if I compile it for a Linux desktop or for iOS. Means you, as a developer, have to decide which layout will be used, and this layout will be used, or this design will be used on every platform you deploy the app to.
18:21
Of course, you can use some styling stuff within the app to make it more like a native designed application for your platform. And the no loss of performance is what I just explained at the beginning as a native app.
18:42
I hope I was able to introduce a bit of the idea of Flutter. I would just now like to start a question answering about Flutter, about what you can do with Flutter and what you cannot do with Flutter.
19:03
Yeah. Thank you for your attention. Shall I moderate?
19:21
I would just start. OK. Then you can just ask. Two native code, and then afterwards we need an additional toolchain for each operation system. Do we have some experience? What is the effort?
19:43
Well, actually, the question was whether what you have to do for providing one app at four different platforms. Well, everything you have to do is running Flutter build and name of the platform. So if you decide to deploy it to iOS, Android, Linux,
20:04
and Mac OS, you want to execute Flutter build APK for Android. Afterwards, Flutter build iOS for iOS. Flutter build Linux for Linux. And Flutter build Mac OS for Mac OS.
20:22
So you actually do not have to go deeper into the single platforms. Flutter provides everything you need there. Did I answer your question? So may I get it? No, it's not.
20:40
It's a remote controlled toolchain for the Android. It will install it automatically. If you download it, if you download Flutter and you execute it the first time, it will ask you to install this and this and this, the Android toolchain, the iOS Xcode toolchain,
21:02
and whatever you need to. Next question. Hello. I have a question here. At the main function, you just have to define your style and the home page, right?
21:21
So what is hindering me to, say, release a version for Android with an Android style, then just change the style for something that looks more iOS, and then release a different version for iOS? Yeah, sure. You can do it. And Flutter even offers a parameter of material app.
21:44
You can provide there a theme data class. And within this theme data class, you could tell the application, OK, on iOS, I should behave and look like this. And on Android, I should behave and look like this. So it even offers native functionalities for this.
22:02
Thanks. Thank you for this nice talk. Who has developed Flutter and how it is protected by, maybe, bought by Oracle? I don't think Oracle will buy Flutter because it's
22:21
developed by Google. And I'm quite sure Google won't sell it. And as it's open source, it will remain open source. I'm not sure about license. It was, I guess, it was Apache or mid-license.
22:43
So it won't become closed source software tomorrow. Hi, and thanks again for the talk. What I would actually know is the performance of all native components, like all native code, the same on all platforms?
23:05
Yes, no, because some functions are not available on every platform. For example, if I run the application on the web, you won't be able to save local files or open local files because that's not what
23:21
a website should do or just can do. But yeah, on the mobile platforms, actually, everything is same. On the desktop platforms, everything is same. And the web, yeah, it's a bit different. Hi, thanks for the talk. What about capabilities like Bluetooth low energy?
23:41
Is there any restrictions or something like that to get deep into the platform? Well, Flutter provides access to Bluetooth. The only restrictions you may have is from your platform. But even if you want to use a feature which is not implemented in Flutter, you can access native code.
24:06
So from Flutter, you can just call Swift code on iOS and Kotlin code on Android and so on if anything is not implemented in Flutter. Hey, I was a little bit late in a talk. Maybe you already talked about this.
24:21
But what kind of projects did you make with Flutter? And did you think that Flutter was a good fit for these projects or not? Well, what I do with Flutter is actually everything running on mobile devices because I'm not such a huge fan of the native programming languages of iOS and Android.
24:43
I don't like Java and I don't like Swift. That's why I got used to Flutter. And yeah, I think it's actually very good for this because you only write code once and then you can deploy to all the mobile platforms.
25:04
Applications I developed were mostly young tuck projects, projects of youth hackathons of the open knowledge foundations.
25:21
Other questions? Hello. All the widgets are emulated. They're not native, which is of the operating system of iOS or Android? It's not emulated, nor if you use the native design.
25:43
It's the native design. Flutter provides its totally own graphics library. So even if you use Cupertino design on iOS, it's not the Cupertino design from iOS but the Cupertino design from Flutter. So independent of the platform,
26:01
it offers its own graphics library. OK, but so you lose the integration with accessibility features from the operating system? No, that's what I told on this slide. The engine, the low-level engine provides accessibility components, for example.
26:22
And, yeah, pipes them to the native platform. So what's the main advantage compared to other frameworks like Qt? Better performance, I would just say, and many more platforms
26:42
because most of the frameworks are just, they're usually just available for mobile platforms. Electron, for example, for desktop platforms. And Flutter provides them all. And just from one single code base and its native code you execute.
27:02
Have you ever worked with background services, native background services on the platform, like Android service? Yeah, Flutter provides background services and if you use them, it will just subscribe the native background services of the platform you're using.
27:27
I'm writing this question for you. What's the current state of IDE integration? Because with other frameworks I had problems that the IDEs I use are mostly the ones from JetBrains and those didn't work with all frameworks I tried.
27:45
Flutter offers official support to Android Studio and Visual Studio codes, but for many other IDEs, there are third-party plug-ins with language support for Dart and Flutter.
28:11
Are there any restrictions on how far you can make your app ready for,
28:23
for example, provisioning profiles on iOS and so on to get it ready in the store? Or is it just a raw building for that platform and everything else? If you want to get it in the store or Google Play,
28:41
you have to go native. Not that I never had a problem with that. I published three apps for iOS, as iOS has the most restrictions and I never had any problem because the design of Flutter follows all the guidelines
29:01
and they pay attention on following the guidelines of the maintainers of the stores of all the platforms they support. The person there asked about IDE. I understood IE, and that's a good point.
29:22
Web platform, how the Microsoft browsers are supported as they are used heavily in big environments. Sorry, what did you? My question is how Flutter supports the Microsoft browsers, even if we don't want to use them all,
29:42
but we need to sometimes. According to the readme of Flutter web repository, there's no support for browsers by Microsoft, and I even tried once. You will see an empty screen in Internet Explorer, and on Microsoft Edge you will get many crashes,
30:02
but this will change in January as Microsoft will start rolling out the Chromium-based Microsoft Edge to all Windows 10 devices and even older Windows devices. So that's something I say I don't care about.