About Flutter, briefly: Basics
After the report Jura Luchaninova I decided to try Flutter for myself. To stretch the brain, and to have something to talk about with the men in the kitchen. It went. I began to look, then read, then write. And everything seems to work out, applications are launched, and what they explain is clear, everything is simple. But not without “but” - not all explain. And since the platform, PL, approaches, and even the subject area are new to me, this is annoying, because you don’t start up, and you don’t even know what to google: Dart /Flutter /Window /Screen /Route /Widget? 3r33838. 3r33831. 3r33869.
Of course, I didn’t want to re-read all the documentation of Dart, Flutter and its widgets, because I don’t have much time, and I just wanted to look at Flutter. It would be great if there was a small guide in which everything that was necessary was described, but no more, for understanding and writing not too complicated applications on Flutter! 3r33838. launched their applications r3r3854. . This platform is interesting for its simplicity comparable to the development of web applications, and the speed of work on par with native applications. High application performance and speed of development is achieved through several techniques: 3r3-3830. 3r33831. 3r33869. 3r33833. 3r33869. 3r33852. Unlike many well-known mobile platforms today, Flutter
does not use jаvascript
in no way. As a programming language for Flutter, we chose Dart, which is compiled into a binary code, which achieves a speed of operations comparable to Objective-C, Swift, Java, or Kotlin. 3r33855. 3r33869. 3r33852. Flutter
does not use native components
, again, in any form, so you do not have to write any layers for communication with them. Instead, like the game engines (and you know that games have a very dynamic UI), it renders the entire interface on its own. Buttons, text, media elements, background - everything is drawn inside the graphics engine in Flutter itself. After the above, it is worth noting that the “Hello World” application on Flutter does not take up much space: iOS ≈ 2.5 MB and Android ≈ 4 MB. 3r33855. 3r33869. 3r33852. To build a UI in Flutter
3r3-340 declarative approach is used. , inspired by the ReactJS web framework, based on widgets (in the world of web, referred to as components). For an even greater increase in the speed of the interface 3r3323239. widgets are redrawn as needed
- only when something has changed in them (just as Virtual DOM does in the world of web frontend). 3r33855. 3r33869. 3r33852. In addition to the above, in the framework
3r33854. , so familiar to the web, and still missing from native platforms. 3r33855. 3r33869. 3r33857. 3r33831. 3r33869.
On the practical benefits of these factors, I highly recommend reading 3r380. Article Android Developer 3r33854. who rewrote his application from Java to Dart and shared his impressions. Here I will only bring the number of files /lines of code named by him before (written in Java) - 179/1217? and after (rewritten to Dart) - 31/1735. See the documentation for a detailed description of 3r382. technical features of the platform . And here's another link, if you're interested in seeing the other 3r33838. examples of working applications 3r33854. . 3r33838. 3r33831. 3r33869.
About Dart 3r3826. 3r33831. 3r33869.
Dart is a programming language in which we have to write applications for Flutter. It is very simple, and if you have experience with Java or jаvascript, you will quickly learn it. 3r33838. 3r33831. 3r33869.
I tried to write a review article about Dart, trying to describe only the necessary minimum for studying Flutter. But there are so many nuances in this language that, despite several attempts to write such an article, I did not manage to make it sufficiently complete and at the same time short. On the other hand, the authors of r3r398. A Tour of the Dart Language
coped well with this task. 3r33838. 3r33831. 3r33869.
Pro preparation 3r3826. 3r33831. 3r33869.
This topic, like Dart, is very well described in the official guide. I could only copy it here, but I will not do it. 3r33838. 3r33831. 3r33869.
Without waiting for anything, we go to page 3r-3112. Installation Guide
, choose a platform and step by step follow the instructions for installing the platform on our system. In his editor
connect the plugins. In the same guide there is an instruction for setting up 3r3116. VS Code 3r33854. and 3r3118. IntelliJ 3r33854. . For your editor, there are also plugins for Dart and Flutter (usually you need to put two). We start application and we check its working capacity 3r33854. . 3r33838. 3r33831. 3r33869.
Tip for OSX users. I feel sorry for the place occupied by the painted frames of the phone in the iOS emulator, so I turned them off and switched to the iPhone 8 (it is not so long): 3r33030. 3r33831. 3r33869. 3r33833. 3r33869. 3r33852. 3r33838. Hardware → Device → iOS # → iPhone 8 3r33855. 3r33869. 3r33852. 3r33838. Window → Show Device Bezels 3r33855. 3r33869. 3r33857. 3r33831. 3r33869.
You can live without buttons, because there are hotkeys: 3r33838. Shift + Cmd + H - this is home,
Cmd + Right - and this is to turn the phone, the rest can be found in the menu
Hardware 3r320. . But I advise you to turn on the on-screen keyboard, because it is important to understand whether it is possible to work with the application when half of the screen is regularly blocked by the keyboard:
Cmd + K (works when the focus is on some input field). 3r33838. 3r33831. 3r33869.
iPhone 8 & iPhone X with frames. 3r33831. 3r33869. 3r3161. 3r33838. 3r33831. 3r33869.
iPhone 8 & Frameless iPhone X 3r33831. 3r33869. 3r33170. 3r33838. 3r33831. 3r33869. 3r3174. About the structure of 3r3826. 3r33831. 3r33869.
Go to the folder with the generated application and see what we have there. Not with everything, but with the necessary:
3r33831. 3r33869. 3r33833. 3r33869. 3r33852. 3r33838. lib / - According to the principles of 3r3187. pub (Dart’a Package Manager) All code is in this subfolder; 3r33855. 3r33869. 3r33852. 3r33838. pubspec.yml - here are the dependencies of the application that need to be installed to run it, exactly as
package.json , but there is a nuance, you need to install them not through the standard Dart utility, mentioned above, but through the Flutter command: 3r31919. flutter pub get ; 3r33855. 3r33869. 3r33852. 3r33838. test /3r33820. - you know what there is? You can run them by calling
flutter test ; 3r33855. 3r33869. 3r33852. 3r33838. ios / &
android / - folders with settings for each of the platforms, it indicates what rights are needed to start the application (access to location, bluetooth), icons and everything specific to the platform. 3r33855. 3r33869. 3r33857. 3r33831. 3r33869.
With the structure figured out, go to the folder 3r33838. lib / where we are waiting for 3r33838. main.dart file. This, as you can guess, is the very file in which we need to run our application. And it runs like in the C language (and tons of others) with the function call 3r31919. main () . 3r33838. 3r33831. 3r33869.
About Widgets (Hello World here) 3r3826. 3r33831. 3r33869.
In Flutter, everything is built on 3-334848. Widget ’Ah: there are views and themes with themes, and the state is stored in widgets. There are two basic types of widgets: with state and without, but not yet about that. Let's take it easy. 3r33838. 3r33831. 3r33869.
Remove all from main.dart . We insert the following code carefully reading the comments: 3r33838. 3r33831. 3r33869.
import 'package: flutter /widgets.dart'; //connect the basic set of widgets3r3805. 3r33831. 3r33869.
3r33869. //When Dart starts the application, it calls main () 3r36969. main () => runApp (//and the runApp function starts Flutter
Text (//this widget, it draws a text, like 3r33869. 'Hello, World !!!', //the first argument is the text you need display
textDirection: TextDirection.ltr, //and here we indicate the direction of the text
[leech=https://docs.flutter.io/flutter/widgets/runApp.html] 3r33838. runApp () 3r33854. takes a single argument - a widget that will be the root for the entire project. By the way, Hot-reload cannot pick it up, so you will need to restart the application. 3r33831. 3r33869. 3r33838. Text () 3r33854. - Flutter cannot simply display a string on the screen. To display the text, you must specify
Text . 3r33838. textDirection . And this is not text alignment like 3r33838. text-align 3r33854. , when compared with the web, it is an analogue of 3r33232. 3r33838. direction 3r33854. . Part of the API for the internationalization of the application. 3r33838. Text It will not work until it knows the direction, but you will not have to indicate it everywhere - then we will analyze how to adjust the text direction for the entire application. 3r33838. 3r33831. 3r33869.
The text is covered with system information. We have at our disposal the entire screen space, and we brought out the widget at the very beginning, where, among other things, the system information is displayed. Let's try to move our text somewhere. 3r33838. 3r33831. 3r33869.
import 'package: flutter /widgets.dart'; 3r33869. 3r33869. main () => runApp (3r3805. 3r33831. 3r33869.
Center (//widget that aligns content to the center of
child: Text (
) , 3r36969.);
3r33333. 3r33838. Center () 3r33854. - This is a widget that allows you to place another widget, passed in the argument
child , centered horizontally and vertically. You will often meet
child and 3r33819. children in Flutter applications, since virtually all widgets use these names to pass widgets, which must be drawn inside the called widget. 3r33838. 3r33831. 3r33869.
It may be interesting
Wonder Woman Diana Prince Jacket
Thanks for such a great post and the review, I am totally impressed! Keep stuff like this coming.R_Tech
I feel really happy to have seen your webpage and look forward to so many more entertaining times reading here. Thanks once more for all the details.PBN
I have a mission that I’m just now working on, and I have been at the look out for such informationWeb designing
Great post I would like to thank you for the efforts you have made in writing this interesting and knowledgeable articleSoftware House
Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!Web Host