【実践技術書】Flutter入門

クロスプラットフォームアプリケーションをつくることができる言語「Flutter」に関する本です。 タイトルの通り入門書となっており、Fluttrを使ったことが無い人向けの内容になっています。

全くのプログラミング初心者ではなく、他言語でプログラミング経験があるレベルの人が対象です。

以下の記事で以前紹介している「React Native」と立ち位置的にはにています。使用する言語や仕組みが違いますが、どちらもクロスプラットフォームのスマホアプリをつくることができます。
【実践技術書】React Native 入門

利用する環境

インストールの方法も丁寧に書かれているので、それに従って進めれば問題ありません。Windowsとmacの手順が記載されています。

• Flutter SDK
  Flutterでの開発に必要なものが大体ここに入っています。利用するDartという言語や他もろもろです。

• Android studioまたはVisual Studio CodeまたはXcode
  環境と好みによって好きなものを使えます。プラグインなどの設定方法も書かれていました。
  基本的にはAndroid Studioがおすすめされています。軽快さを求めるならVisual Studio Codeです。 FlutterSDKを導入すれば、これらのIDEを使わなくとも開発可能で、例えばテキストエディタでの開発も可能です。

  仮想デバイスでの確認の設定のために、AndroidStudioでの設定が必要になります。

• Flutter Studio
  ブラウザ上で利用できるUIデザインツールです。簡単に画面のデザインができて、そのソースコードをコピペすれば手元の開発環境で利用できます。

Flutterの特長

プロジェクト内にはテストコード用のプログラムも生成されており、ユニットテストのことも意識しながら開発ができます。 非同期処理もそこに含まれており、さまざまな基本的な処理をすぐに体験することができます。

React NativeではWebと似たようなJSXやstyleの 開発ができましたが、Flutterではそういうわけではありませんでした。 そのかわりブラウザ上で利用できるFlutter Studioを利用することで、簡単にマテリアルデザインのUIが作れてコード化もできます。使い方は独特ですが、一度使ってみるとおもしろいです。

サンプルで作ったもの

一通りのウィジェットの解説と、グラフィック描写、複雑なUIの実装をやってから、ファイルやデータへのアクセス等を経験できます。 それらが終わったら以下のサンプルアプリを作ります。

• RSSリーダー
  WEB上のサイトからRSSを受け取り、更新や内容をチェックできます。WEBでのリクエストやその返り値の処理を行います。
• お絵かきカメラ
  カメラで写真を取り、そこにタップでお絵描きして、保存します。カメラへのアクセスやcanvasでの描画。編集などを行います。

結構複雑そうに見えますが、ソースコードはシンプルでわかりやすいです。FlutterでつくるとUIはスッキリわかりやすく、ソースコードもシンプルになると感じました。

おわりに

Flutterは1つのソースコードでiOSとAndroidの両方のプログラムがかけるのでとても便利です。開発はGoogleが進めているので、これからの発展にも大いに期待できます。スマホアプリ以外の分野でも利用できるようになると思います。

React Nativeと比較すると、使い勝手や使えるモジュールなどに差があります。必要な仕様や要件によって選ぶべきです。
ただ「React Native」にはExpoを利用することで開発・ビルドがとても簡単になるので、私個人的にはそちらのほうがオススメです。最初はさくっとアプリを作って慣れてきたらFlutterにも手を出して、比較してみるのがいいかなあと思います。