BT

最新技術を追い求めるデベロッパのための情報コミュニティ

寄稿

Topics

地域を選ぶ

InfoQ ホームページ ニュース GoogleがクロスプラットフォームモバイルUIフレームワークであるFlutterのベータ版をリリース

GoogleがクロスプラットフォームモバイルUIフレームワークであるFlutterのベータ版をリリース

原文(投稿日:2018/03/02)へのリンク

読者の皆様へ:ノイズを減らすための一連の機能を開発しました。関心のあるトピックについて電子メールとWeb通知を受け取ることができます新機能の詳細をご覧ください。

Flutterは、今やベータ版であり、GoogleがiOSアプリとAndroidアプリ向けのクロスプラットフォームインターフェースのフレームワークとして開発している。このフレームワークは、標準ではないが、ネイティブのUIとして動作する。

Flutterは、React Nativeと同様に、UI定義に対するリアクティブスタイルのアプローチをサポートしている。他のクロスプラットフォームのWebビューベースのフレームワークとは異なりDartに依存している。それは、UIと、OSプラットフォームによって提供されるネイティブサービスとの間のJavaScriptブリッジを不要にするためである。例えば、ロケーションサービス、センサーアクセス、カメラが挙げられる。Dartにより事前にネイティブコードにコンパイルされているため、FlutterはJavaScriptブリッジによるコンテキストスイッチのコストを払わずに済む。

ネイティブUIのルックアンドフィールを提供することを目指すクロスプラットフォームフレームワークもネイティブに実装されたウィジェットを使用してボタン、テーブルなどを表現する。これは通常、複数のアプリケーションのパーツを必要とし、JavaScriptブリッジを使用して通信する必要がある。そのため、処理が遅くなる傾向がある。これを回避するために、Flutterは独自のウィジェットコレクションを提供し、OSプラットフォームが提供するキャンバスに直接描画する。このアプローチに関連するもう1つの利点は、DartがUIをレイアウトする方法である。CSSボクシングモデル、Android LayoutsiOSの制約は、画面上にUI要素を配置する上での可能な方法のパターンを提供することを目的としているが、それとは異なり、各Flutterウィジェットは独自のシンプルなレイアウトモデルを備えている。極端ではあるが、ウィジェットを中央に置くために、それをCenterウィジェットの中に入れる。同じように、周囲にパディングを含めるには、パディングウィジェットに対象ウィジェットを含める。以下は、垂直に積み重ねられたラベルとアイコンを含む中央揃えのボックスの簡単な例である。

new Center(
  child: new Column(
    children: [
      new Text('Hello, World!')),
      new Icon(Icons.star, color: Colors.green)
    ]
  )
)

全体のテーマとナビゲーションはFlutterのウィジェットで表現できるため、異なる親ウィジェットを使用して、UIの外観をどうするか、どのように異なるビューでナビゲートするかを変更できる。

Flutter alpha以来、Googleはツール統合の改善に取り組んできた。取り組みとしては、AndroidスタジオとVisual Studio Codeのサポート、プラットフォームの相互運用性の向上、ホットリロードの改善、ウィジェットツリーのウィジェットインスペクタがある。

FlutterはDartを使用しているため、Flutterの適用を推進する上での重要な要素は、開発者が最初からすべてをコーディングしなくてもコードを再利用できるようにするサードパーティのパッケージを利用できることである。これには、Firebird、SQLite、Facebook Connectなどの外部SDKを使用することだけでなく、ネットワーク要求の作成、ナビゲーション処理なども含まれる。1000以上あるFlutter向けのパッケージのカタログをチェックして、必要なものをすべて揃えられる。

1.0に向けて、Googleは、安定化と、より多くのシナリオに対するサポート追加に焦点を当てている。サポートとしては、インラインWebViewを使って既存のアプリにFlutterを埋め込みやすくすることなどがある。

Flutterベータ版を試してみたい場合は、インストール手順に従ってください。加えて、Flutter GalleryPosse Gallery、そして、便利なリンクがあるこのリストを参照してください。

Rate this Article

Adoption Stage
Style

この記事に星をつける

おすすめ度
スタイル

BT