zukkeyの技術奮闘記

”当たり前”が誰かのためになる、はず

Flutterことはじめ

はじめに

今日は、FlutterとDart言語で始めるiOSAndroidクロスプラットフォーム開発に必要な最初の導入の部分についてご紹介していきたいと思います。

 

この記事で話すことは、FlutterとDartを手持ちのMacに入れてサンプルプロジェクトを作成して動かすまでです。初心者、Flutterに興味がある人向けの内容になります。

 

Flutterとは?

Easy and fast SDK for beautiful apps - Flutter

上のリンクが公式のサイトになります。

Flutterは、Googleによって製作されているiOSAndroidクロスプラットフォーム開発をすることができるSDKです。

使用できる言語はDartであり、マテリアルデザインに沿った豊富なWidgetが用意されています。

今日は、まず初めにFlutterとDartを導入するところからやっていきたいと思います。

 

導入前に用意するもの

まず初めに導入前に用意するものについて話します。

1.Mac

 Macが無くてもできるようですが、自分はMacにて動作確認を行っています。

 

2.AndroidStudio

 はじめにAndroidStudioが入っていない人は、まずAndroidStudioを入れる必要があります。

 ダウンロードは下記リンクから。

developer.android.com

 

3.Xcode

Xcodeも入っていなければ、AppStoreからXcodeで検索してインストールを行ってください。

 

4.InteliJ IDEA

InteliJ IDEAは開発を行うのに必要なIDEです。入っていない人は、下記リンクからダウンロードして入れてください。

www.jetbrains.com

 

f:id:rozkey59:20180224193840p:plain

 

なお、大学生ならjetbrains社の製品は上のようなUltimate版を無料で利用できるのでこちらの記事を参考にActivation Codeを入手しておくといいかもしれません。

 

qiita.com

 

まずはFlutterを導入することからはじめよう

Flutter Setup for macOS - Flutter

上記リンクにある導入に沿って進めていきます。

初めにClone the repoのところから始めます。

ターミナルを開いて、下のように入力してください。リンク先にもあります。

f:id:rozkey59:20180224194201p:plain

これでFlutterをクローンしてきます。

 

gitを利用できない人は、下記のリンクを見てください。

employment.en-japan.com

 

次にパスを通します。

f:id:rozkey59:20180224194418p:plain

最後の一行の部分でflutterコマンドを使えるようにできます。

 

これでflutterコマンドを使えるようになったら、flutter doctorとターミナルに入力します。

f:id:rozkey59:20180224194647p:plain

 

flutterのセットアップがこれで完了できます。

Flutter doctorでエラーが出たときは

僕の場合は2台のMacで検証済みで片方はほぼエラーが出なかったのですが、昔から使っている方で最近触っていない方ではエラーがたくさん出ました。

実際に出たエラーはこちらです。

f:id:rozkey59:20180224194900p:plain

出ているエラーの通りにやれば問題ないですが、最初にXcodeとAndroidStudioがインストールされていることとアップデート済みであることを確認してください。

僕の場合は、CocoaPodsがアップデートされていなかったことと、InteliJ IDEAにFlutterのPluginを入れてなかったことが原因でした。

 

あと、Dartが入っていない場合は下記のリンクのように入れてください。

www.dartlang.org

 

ターミナルで、brew tap dart-lang/dartを入力し、brew install dartと入力することでDartをインストールできます。下のような感じです。

 

f:id:rozkey59:20180224195409p:plain

 

InteliJ IDEAにFlutterのプラグインを入れていない場合は、File > Setting > PluginからBrowse Repositoriesを開いてFlutterで検索するとインストールのボタンが初回は出てきます。下記のような画面になります。

f:id:rozkey59:20180224200205p:plain

インストールしていない方は案内に従ってインストール後にInteliJ IDEAを再起動することでFlutterプラグインが入ります。

 

一通りインストールが終わったら

SDKのパスを通す必要があります。

公式サイトには下記のようにあります。

f:id:rozkey59:20180224195351p:plain

自分の場合は/usr/local/opt/dart/libexecでSDKのパスを通しました。

 

パスを通せたら最後にサンプルを作成してビルドしてみましょう

InteliJ IDEAでFlutterを選択したサンプルを作成するとデフォルトでfabとTextViewの付いたサンプルアプリが作成されます。

自分の好きなエミュレータを選択して、右の三角の再生ボタンでビルドすることができます。

自分もやってみた結果が以下になります。

f:id:rozkey59:20180224200744p:plain

AndroidiOS両方でビルドすることができました。

今後はアプリを作ってリリースするところまでもっていこうと思います。

 

さいごに

今日はFlutterの導入とハローワールドてきなのまでの紹介でした。

駆け足の説明になってしまったかもしれませんが、わからないところやエラーで悩んでたりしたらコメントで教えてください。

自分も始めたばかりなので答えられないこともあるかもしれませんが、できる範囲でお答えします。

次はウィジェットの紹介などをやっていこうかと思います。