Спрощений вступ до Dart and Flutter

Трохи передісторії

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

Ionic з’явився в 2013 році з першим випуском Drifty Co. Ionic допоміг веб-розробникам використати свої наявні навички у зростаючій галузі мобільних додатків. У 2015 році Facebook використовував React.js, щоб заново винаходити його для розробників мобільних додатків. Вони дали нам React Native, повністю базу коду JavaScript, що покладається на власні SDK.

І це не єдині, а декілька з багатьох гібридних мобільних фреймворків. Більше інформації можна знайти тут.

Тепер ми можемо спостерігати за чергою Google, яка вкладає пальці в пиріг із Флаттером.

Що таке Дарт?

Google випустив перший в історії Flutter 1.0 у грудні минулого року, після того як він працював у бета-режимі понад 18 місяців. Dart - це мова програмування, яка використовується для кодування програм Flutter. Dart - ще один продукт Google, випущений версією 2.1, до Flutter, у листопаді. На початку, спільнота Флаттера не така велика, як ReactNative, Ionic або Xamarin.

Деякий час тому я виявив симпатію до JavaScript. Я був в захваті від роботи над мобільним додатком ReactNative для моєї практики. Мені теж подобається кодувати гібридні мобільні програми, тому я хотів спробувати Flutter, як це робив Xamarin десь минулого року.

З мого першого погляду Флаттера (і Дарта) я відчув себе спантеличеним і, здавалося, не міг нічого зрозуміти. Вони навіть мали розділ у своїх документах для розробників, які перейшли від React Native. Отже, я взявся копати глибше у всіх речах Дарта.

Дарт трохи схожий на С і є об'єктно-орієнтованою мовою програмування. Отже, якщо ви віддаєте перевагу мовам C або Java, Dart - це саме для вас, і ви, мабуть, володієте ним.

Dart використовується не тільки для розробки мобільних додатків, але і є мовою програмування. Затверджений стандартом Ecma (ECMA-408), він використовується для створення майже будь-чого в Інтернеті, на серверах, на робочому столі та, звичайно, у мобільних додатках (так, ті самі люди, які стандартизували наші улюблені ES5 та ES6).

Dart, коли використовується у веб-додатках, перекладається на JavaScript, тому працює у всіх веб-браузерах. Інсталяція Dart також постачається з віртуальною машиною для запуску файлів .dart з інтерфейсу командного рядка. Файли Dart, що використовуються у програмах Flutter, компілюються та упаковуються у двійковий файл (.apk або .ipa) та завантажуються у магазини додатків.

Як виглядає кодування в Dart?

Як і більшість мов ALGOL (наприклад, C # або Java):

  1. Точкою входу класу Дарт є main()метод. Цей метод також служить відправною точкою для додатків Flutter.
  2. Значення за замовчуванням для більшості типів даних - null.
  3. Дарт-класи підтримують лише одиночне успадкування. Для певного класу може бути лише один суперклас, але він може мати багато реалізацій інтерфейсів.
  4. Керування потоком певних операторів, наприклад, якщо умови, цикли (for, while та do-while), оператори перемикання, break та continue однакові.
  5. Абстракція працює подібним чином, дозволяючи абстрактні класи та інтерфейси.

На відміну від них (а іноді і трохи як JavaScript):

  1. Дарт має висновок типу. Тип даних змінної не потрібно чітко декларувати, оскільки Дарт "зробить висновок", що це таке. У Java змінна повинна чітко вказувати свій тип під час оголошення. Наприклад, String something;. Але в Dart, ключове слово використовується замість подобається так, var something;. Код обробляє змінну відповідно до того, що вона містить, будь то число, рядок, bool чи об'єкт.
  2. Усі типи даних є об’єктами, включаючи числа. Отже, якщо їх не ініціалізувати, значення за замовчуванням не дорівнює 0, а натомість має значення null.
  3. Тип повернення методу не потрібен у підписі методу.
  4. Тип numоголошує будь-який числовий елемент, як дійсний, так і цілий.
  5. super()Виклик методу тільки в кінці конструктора підкласу.
  6. Ключове слово, яке newвикористовується перед конструктором для створення об’єкта, є необов’язковим.
  7. Сигнатури методів можуть включати значення за замовчуванням для переданих параметрів. Отже, якщо один не включений у виклик методу, метод використовує натомість значення за замовчуванням.
  8. Він має новий вбудований тип даних під назвою Runes, який має справу з кодовими точками UTF-32 у рядку. Для простого прикладу див. Смайли та подібні піктограми.

І всі ці відмінності - лише декілька з багатьох, які ви можете знайти в турі Dart Language, який ви можете переглянути тут.

Dart також має вбудовані бібліотеки, встановлені в Dart SDK, найбільш часто використовуваними:

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

Ви можете знайти більше інформації про бібліотеки Dart тут.

Використання Dart in Flutter

Flutter має більше бібліотек, специфічних для додатків, частіше на таких елементах інтерфейсу користувача, як:

  1. Віджет: загальні елементи програми, такі як Text або ListView.
  2. Матеріал: містить елементи, що відповідають дизайну Матеріалу, наприклад FloatingActionButton.
  3. Купертіно: містить елементи, що відповідають поточним розробкам iOS, наприклад CupertinoButton.

Тут ви можете знайти конкретні бібліотеки Flutter.

Налаштування Flutter

Отже, щоб запустити цю штуку, дотримуйтесь інструкцій Flutter. У ньому подано подробиці щодо встановлення Flutter SDK та налаштування бажаної IDE; мій був би код VS. Налаштування коду VS із розширенням Flutter корисно. Він поставляється з вбудованими командами, на відміну від використання терміналу.

Слідкуйте за документами ще раз, щоб створити свій перший додаток. У моєму випадку запустіть команду розширення Flutter: New Project. Потім введіть назву проекту та виберіть папку призначення.

Якщо ви віддаєте перевагу користуванню терміналом, перейдіть до цільової папки програми. Потім скористайтеся командою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.