Опростено въведение в Dart and Flutter

Малко фон

Всичко започна през 2011 г.: Xamarin, сега компания, собственост на Microsoft, излезе с решение за хибридни мобилни приложения чрез подписания си продукт, Xamarin SDK с C #. И така започна революцията на хибридните мобилни приложения, лекотата на писане на една кодова база за много платформи.

Ionic възникна през 2013 г. с първото си издание от Drifty Co. Ionic помогна на уеб разработчиците да използват съществуващите си умения в нарастващата индустрия за мобилни приложения. През 2015 г. Facebook използва React.js, за да го преоткрие за разработчици на мобилни приложения. Те ни дадоха React Native, напълно JavaScript код база, разчитаща на родния SDK.

И това не са единствените, а няколко от много хибридни мобилни рамки. Повече информация можете да намерите тук.

Сега можем да наблюдаваме реда на Google да пъхне пръстите си в пая с Flutter.

Какво е Dart?

Google направи първата си версия на Flutter 1.0 през декември миналата година, след като я пусна в бета режим за повече от 18 месеца. Dart е езикът за програмиране, използван за кодиране на приложения на Flutter. Dart е друг продукт на Google и пусна версия 2.1, преди Flutter, през ноември. Тъй като започва, общността на Flutter не е толкова обширна, колкото ReactNative, Ionic или Xamarin.

Преди известно време открих, че харесвам JavaScript. Бях в екстаз да работя върху мобилно приложение ReactNative за моя стаж. Харесва ми да кодирам и хибридни мобилни приложения, така че исках да опитам Flutter, както направих Xamarin някъде миналата година.

При първия ми поглед на Flutter (и Dart) се почувствах объркан и не можех да разбера нищо. Те дори имаха раздел в своите документи за разработчици, преминаващи от React Native. И така, взех да ровя по-задълбочено във всички неща Дарт.

Dart прилича малко на C и е обектно-ориентиран език за програмиране. Така че, ако предпочитате езиците C или Java, Dart е този за вас и най-вероятно ще го владеете.

Dart не се използва само за разработване на мобилни приложения, но е език за програмиране. Одобрен като стандарт от Ecma (ECMA-408), той се използва за изграждане на почти всичко в мрежата, сървърите, работния плот и, разбира се, мобилните приложения (Да, същите хора, които стандартизираха нашите любими ES5 и ES6.)

Dart, когато се използва в уеб приложения, се транслира в JavaScript, така че работи във всички уеб браузъри. Инсталацията на Dart се доставя и с VM, за да стартирате .dart файловете от интерфейса на командния ред. Файловете Dart, използвани в приложенията на Flutter, се компилират и пакетират в двоичен файл (.apk или .ipa) и се качват в магазините за приложения.

Как изглежда кодирането в Dart?

Подобно на повечето езици ALGOL (като C # или Java):

  1. Входната точка на клас Dart е main()методът. Този метод действа като отправна точка и за приложенията на Flutter.
  2. Стойността по подразбиране за повечето типове данни е null.
  3. Дарт класовете поддържат само единично наследяване. За даден клас може да има само един суперклас, но той може да има много реализации на интерфейси.
  4. Контролът на потока на определени изрази, като ако условията, цикли (за, докато и направи-докато), превключвател, прекъсване и продължаване са еднакви.
  5. Абстракцията работи по подобен начин, като позволява абстрактни класове и интерфейси.

За разлика от тях (и понякога малко като JavaScript):

  1. Дарт има извод за тип. Типът данни на променлива не трябва да бъде изрично деклариран, тъй като Dart ще „направи извод“ какво представлява. В Java променливата трябва да има изрично даден тип по време на декларирането. Например String something;,. Но в Dart ключовата дума се използва вместо това, така var something;,. Кодът третира променливата според каквото и да съдържа, било то число, низ, bool или обект.
  2. Всички типове данни са обекти, включително числа. Така че, ако не бъдат инициализирани, стойността им по подразбиране не е 0, а вместо това е нула.
  3. Тип връщане на метод не се изисква в сигнатурата на метода.
  4. Типът numдекларира всеки числов елемент, реално и цяло число.
  5. В super()разговора метод е само в края на конструктор подклас на.
  6. Ключовата дума, newизползвана преди конструктора за създаване на обект, не е задължителна.
  7. Подписите на методите могат да включват стойност по подразбиране за предадените параметри. Така че, ако някой не е включен в извикването на метода, методът вместо това използва стойностите по подразбиране.
  8. Той има нов вграден тип данни, наречен Runes, който се занимава с UTF-32 кодови точки в низ. За прост пример вижте емотикони и подобни икони.

И всички тези разлики са само няколко в многото, които можете да намерите в обиколката на Dart Language, която можете да проверите тук.

Dart също има вградени библиотеки, инсталирани в Dart SDK, като най-често използваните са:

  1. dart: ядро ​​за основна функционалност; той се импортира във всички dart файлове.
  2. dart: асинхронно за асинхронно програмиране.
  3. стрела: математика за математически функции и константи.
  4. dart: конвертиране за конвертиране между различни представяния на данни, като JSON в UTF-8.

Повече информация за Dart библиотеките можете да намерите тук.

Използване на Dart in Flutter

Flutter има по-специфични библиотеки за приложения, по-често за елементи на потребителския интерфейс като:

  1. Widget: общи елементи на приложението, като Text или ListView.
  2. Материал: съдържа елементи, следващи дизайна на материала, като FloatingActionButton.
  3. Купертино: съдържа елементи, следващи текущите дизайни на iOS, като CupertinoButton.

Тук можете да намерите специфични библиотеки на Flutter.

Настройване на Flutter

Така че, за да включите това нещо, следвайте документите на Flutter. Той дава подробности за инсталирането на Flutter SDK и настройването на предпочитаната от вас IDE; моят би бил VS код. Настройването на VS код с разширението Flutter е полезно. Той идва с вградени команди, за разлика от използването на терминала.

Следвайте документите отново, за да създадете първото си приложение. В моя случай изпълнете командата за разширение Flutter: New Project. След това въведете името на проекта и изберете папката дестинация.

If you prefer using the terminal, move to the destination folder of the app. Then use the command flutter create me> to create the app folder. This generates the entire app folder, including the Android and iOS project folder. To open these folders, use Android Studio and XCode, for building the app.

In the root of the project, you find pubspec.yaml. This file contains the app's dependencies. This includes both external libraries/modules and assets like images and config files. It works like a package.json, containing all external modules of the app. To install these packages, enter the package name and version under the dependencies: section of the pubspec.yaml. Run the command flutter packages get. Include the assets of the app inside the flutter: section of the same file.

The entry point of the app is main.dart, found inside the lib folder. This folder also contains all Dart classes (app pages or reusable components). On creation of the app, the main.dart file comes with a simple pre-written code. Before running this code, a device is either connected to the PC, with USB debugging enabled. Afterward, run the command flutter run on the terminal.

A First Look at the Flutter App

The app currently looks like this now:

Original text


Building the user interface of a Flutter app makes use of Widgets.

Widgets work in a similar way to React. A widget uses different components to describe what the UI should look like. They can be either Stateful or Stateless. In Stateful components, the widget rebuilds due to state changes, to accommodate the new state.

When we look at the current code for the Home page, we see that it’s a Stateful page. If the counter variable increases, the framework tries to find the least expensive way to re-render the page. In this case, find the minimal difference between the current widget description and the future one. It takes into account the changed state.

The Scaffold class is a material design layout structure and is the main container for the Home page. The AppBar, also a material design element is the title bar found at the top of the page. All other components, like the floating button and two text tags, fall under the body of the page. The Center class is a layout class that centers its child components vertically and horizontally.

The Column class, another layout widget, lists each child element vertically. Each of its child elements is added to an array and put underneath the children: section.

The two texts speak for themselves. The first displays the text ‘You have pushed.’ The second one displays the current value in the _counter variable.

The FloatingActionButton is part of the Material design widgets. It displays a + icon and triggers the increment of the _counter variable.

Hot Reloading

Another plus point of using Flutter is the hot reloading feature. It lets you see changes made to the code in real time, without restarting the build process. Type ‘r’ on the same console that you ran the flutter run command.

Altering the current code

As we can see, when you click the button, the _counter variable value increases. This re-renders the page and the new value is displayed on the body of the page.

I’m going to change that up a bit. For every button click, we will display a custom Card component with the item number.

Creating the Custom Card Component

So, to start off, we make a new .dart file inside the lib folder. I created mine in a subfolder commonComponents and named it customCard.dart.

import 'package:flutter/material.dart'; class CustomCard extends StatelessWidget { CustomCard({@required this.index}); final index; @override Widget build(BuildContext context) { return Card( child: Column( children: [Text('Card $index')], ) ); } }

This component will be a stateless widget and will only display the value that we send to it, in the Text widget.

Displaying a List of Custom Cards

Import the above component to the main.dart like so:

import 'commonComponents/customCard.dart';

I then replace the code of the home page body, from the one above to this:

body: Center( child: Container( child: ListView.builder( itemCount: _counter, itemBuilder: (context, int index) { return CustomCard( index: ++index, ); }, ) ), ),

It now displays a List of CustomCard elements, up to the number of times the button is clicked. The itemCount is used to define the number of elements the ListView must display. The itemBuilder returns the actual item that is displayed.

And that’s a simple example of using Flutter.

In conclusion…

Before my interest turned to JavaScript, I worked with Java. If I had encountered Dart around that time, I might have been able to understand it easier than I did now. All in all, It wasn’t too difficult but took a bit of time to get the hang of it. I could see myself using it in time.

Find the code repo, here.

Find the commit for this post, here.