8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

DartAdvent Calendar 2015

Day 21

Dart x Flutter で、iOSアプリを作成してみた。

Last updated at Posted at 2015-12-21

Dart x Flutter を利用してiOSアプリを作成してみました。alphaブランチのversion 0.21 では、サポートされていませんが、
開発ブランチ(master)の version 0.21 では ワンコマンドで、ios用のXcode用のプロジェクトを生成する機能がついています。

実際に、この機能を利用してミニゲームを作成しました。
本文では、実際に Html5、Android、iOSで動作させてみます。

Dart x Flutter は楽しい

Dart x Flutter は、起動が早い

DartVMを利用して動作します。(※iOSはAOT)
なので、Chromeモバイル x WebViewベースのマルチプラットフォーム開発環境と比較して起動が早いです。

Dart x Flutter は、処理速度が早い

DartVMを利用して動作します。(※iOSはAOT)
なので、Chromeモバイル x WebViewベースのマルチプラットフォーム開発環境と比較して処理速度が早いです。

ブラウザーで作成したものを、モバイル端末用に移植する場合、パフォーマンスの問題がててきますが、
Dart x Flutter は吸収してくれます。

Dart x Flutter の開発環境は軽量でスイスイ

ATOMが推奨されています。Android Studioが重くて動作しないといった方でも、軽快に開発できます。



Html5, Android ,iOS で動作するアプリを作成してみた

試してみた事です。Matrial Designのアプリを作成できるというのが特徴ですが、ゲームを動作させるのにも使えます。

Minoを動作させてみた。

Screen Shot 2015-12-21 at 14.08.11.png

古典的なゲームを作成してみました。

Physicsを動作させてみた

about.png

自作簡易のPhysicsです。適当なコードで書いても、快適に動作することを確認。


3Dを動作させてみた

3ddemo.png

OpenGLのインターフェイスはまだありません。FlutterのベースになっているMojoではOpenGLが動作しているので、個人的には期待しています。

drawVertexがサポートされていますので、ロウポリ的なものは作れます。

iOSアプリを作成してみよう。

## Dart SDKのインストール
brew tap dart-lang/dart && brew install dart --devel

## Flutter のインストール
git clone https://github.com/flutter/flutter.git
emacs ~/.bash_profile
export PATH=`pwd`/flutter/bin:$PATH
source ~/.bash_profile

## Minoデモをダウンロード
git clone https://github.com/kyorohiro/doc_2dgame.git
cd ../doc_2dgame/demo/mino

## アプリが依存するパッケージをインストール
pub get
pub upgrade

## Xcode プロジェクト生成
flutter ios --init

## packaging app
flutter build
cp ./build/app.flx ./ios

## ios配下のXCodeプロジェクトをビルドすると端末上で動作するアプリを生成できます。

できましたか? XCodeからRunするとアイコンが追加されます!!
Screen Shot 2015-12-21 at 15.05.14.png



Androidアプリを作成してみよう。

## Dart SDKのインストール
brew tap dart-lang/dart && brew install dart --devel

## Flutter のインストール
git clone https://github.com/flutter/flutter.git
emacs ~/.bash_profile
export PATH=`pwd`/flutter/bin:$PATH
source ~/.bash_profile

## Androidの設定
brew install android-sdk
emacs ~/.bash_profile
export ANDROID_HOME=/usr/local/opt/android-sdk
source ~/.bash_profile


## Minoデモをダウンロード
git clone https://github.com/kyorohiro/doc_2dgame.git
cd ../doc_2dgame/demo/mino

## アプリが依存するパッケージをインストール
pub get
pub upgrade

## Xcode プロジェクト生成
flutter apk

前回と同じです。
http://qiita.com/kyorohiro/items/5981590797facb027725



ほそく

公式

http://flutter.io/
https://dart-atom.github.io/dartlang/

Memo : Flutter x Dart

kyorohiroがFlutterについて、学習した事を記載しているメモ
https://kyorohiro.gitbooks.io/hello_skyengine

Umiuni2D

http://kyorohiro.github.io/umiuni2d/web/index.html
https://github.com/kyorohiro/doc_2dgame

QiitaのFlutter 関連の記事



Thanks!

umiuni2d_demo_2.png

最後まで、読んでいただきまして、ありがとうございました。
(ref http://pixiv.me/kyorohiro)
(ref https://play.google.com/store/apps/details?id=info.kyorohiro.umiuni2d.demo.mino)



------- Kyorohiro Work http://kyorohiro.strikingly.com/
8
10
5

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
10

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?