DartとFlutterの簡単な紹介

少し背景

すべては2011年に始まりました。現在Microsoftが所有する会社であるXamarinは、そのシグネチャー製品であるXamarin SDK with C#を通じてハイブリッドモバイルアプリのソリューションを考案しました。このようにして、ハイブリッドモバイルアプリケーションの革命が始まりました。多くのプラットフォームで1つのコードベースを簡単に作成できるようになりました。

Ionicは、Drifty Co.による最初のリリースで2013年に誕生しました。Ionicは、Web開発者が成長するモバイルアプリ業界で既存のスキルを使用できるように支援しました。2015年、FacebookはReact.jsを使用して、モバイルアプリ開発者向けに再発明しました。彼らは、ネイティブSDKに依存する完全なJavaScriptコードベースであるReactNativeを提供してくれました。

そして、これらだけではありませんが、多くのハイブリッドモバイルフレームワークのいくつかです。詳細については、こちらをご覧ください。

これで、Flutterを使用してGoogleがパイに指を入れる順番を見ることができます。

ダートとは何ですか?

Googleは、18か月以上ベータモードにした後、昨年12月に初めてFlutter1.0をリリースしました。Dartは、Flutterアプリのコーディングに使用されるプログラミング言語です。DartはGoogleによる別の製品であり、11月にFlutterの前にバージョン2.1をリリースしました。当初、Flutterコミュニティは、ReactNative、Ionic、またはXamarinほど広範ではありません。

しばらく前に、JavaScriptが好きだと気づきました。私はインターンシップのためにReactNativeモバイルアプリに取り組んでいることに夢中になりました。ハイブリッドモバイルアプリのコーディングも楽しんでいるので、昨年Xamarinを行ったように、Flutterを試してみたかったのです。

Flutter(およびDart)を一目見ただけで、混乱し、何も理解できなかったようです。彼らは、ReactNativeから移行する開発者向けのドキュメントに関するセクションもありました。それで、私はダートのすべてのものをより深く掘り下げることにしました。

DartはCに少し似ており、オブジェクト指向プログラミング言語です。したがって、C言語またはJavaを好む場合は、Dartが最適であり、おそらくそれに習熟しているでしょう。

Dartは、モバイルアプリの開発に使用されるだけでなく、プログラミング言語でもあります。Ecma(ECMA-408)によって標準として承認されており、Web、サーバー、デスクトップ、そしてもちろんモバイルアプリケーション(はい、私たちのお気に入りのES5とES6を標準化したのと同じ人々)でほぼすべてのものを構築するために使用されます。

Dartは、Webアプリケーションで使用される場合、JavaScriptにトランスパイルされるため、すべてのWebブラウザーで実行されます。Dartインストールには、コマンドラインインターフェイスから.dartファイルを実行するためのVMも付属しています。Flutterアプリで使用されるDartファイルは、コンパイルされてバイナリファイル(.apkまたは.ipa)にパッケージ化され、アプリストアにアップロードされます。

Dartでのコーディングはどのように見えますか?

ほとんどのALGOL言語(C#やJavaなど)と同様:

  1. Dartクラスのエントリポイントはmain()メソッドです。このメソッドは、Flutterアプリの開始点としても機能します。
  2. ほとんどのデータ型のデフォルト値はnullです。
  3. Dartクラスは、単一の継承のみをサポートします。特定のクラスに存在できるスーパークラスは1つだけですが、インターフェイスの実装を多数持つことができます。
  4. if条件、ループ(for、while、do-while)、switch-case、break、continueステートメントなどの特定のステートメントのフロー制御は同じです。
  5. 抽象化は同様の方法で機能し、抽象クラスとインターフェースを可能にします。

それらとは異なり(そして時にはJavaScriptに少し似ています):

  1. ダートには型推論があります。Dartは変数が何であるかを「推測」するため、変数のデータ型を明示的に宣言する必要はありません。Javaでは、変数は宣言時に明示的に型を指定する必要があります。たとえば、String something;。しかし、Dartでは、代わりにキーワードが使用されvar something;ます。コードは、数値、文字列、ブール値、オブジェクトなど、含まれているものに応じて変数を処理します。
  2. 数値を含むすべてのデータ型はオブジェクトです。したがって、初期化しないままにすると、デフォルト値は0ではなく、nullになります。
  3. メソッドの戻り値の型は、メソッドのシグネチャでは必要ありません。
  4. この型numは、実数と整数の両方の数値要素を宣言します。
  5. super()メソッド呼び出しは、サブクラスのコンストラクタの最後です。
  6. newオブジェクト作成のコンストラクターの前に使用されるキーワードはオプションです。
  7. メソッドシグネチャには、渡されたパラメータのデフォルト値を含めることができます。したがって、メソッド呼び出しに含まれていない場合、メソッドは代わりにデフォルト値を使用します。
  8. 文字列内のUTF-32コードポイントを処理するルーンと呼ばれる新しい組み込みデータ型があります。簡単な例については、絵文字や同様のアイコンを参照してください。

そして、これらすべての違いは、ここでチェックできるダート言語ツアーで見つけることができる多くのほんの一部です。

Dartには、Dart SDKにインストールされている組み込みライブラリもあります。最も一般的に使用されるのは、次のとおりです。

  1. コア機能のdart:core; すべてのdartファイルにインポートされます。
  2. 非同期プログラミング用のdart:async。
  3. 数学関数と定数のdart:math。
  4. dart:convertは、JSONからUTF-8などの異なるデータ表現間で変換します。

Dartライブラリの詳細については、こちらをご覧ください。

FlutterでのDartの使用

Flutter has more app-specific libraries, more often on user interface elements like:

  1. Widget: common app elements, like the Text or ListView.
  2. Material: containing elements following Material design, like FloatingActionButton.
  3. Cupertino: containing elements following current iOS designs, like CupertinoButton.

You can find Flutter specific libraries here.

Setting up Flutter

So, to get this thing into gear, follow the Flutter docs. It gives details on installing the Flutter SDK and setting up your preferred IDE; mine would be VS code. Setting up VS code with the Flutter extension is helpful. It comes with inbuilt commands, as opposed to using the terminal.

Follow the docs again to create your first app. In my case, run the extension command Flutter: New Project. Afterward, type the project name and pick the destination folder.

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.