MacでFlutterの開発環境をAndroid Studioで構築する方法

Flutter App on Mac




Google I/O 2019でFlutter for Webを発表しましたね。これでFlutterはiOS、Android、Webに対して単一のソースコードで3つのプラットフォームに対してサービスを提供できるようになりました。

>>Google、「Flutter for Web」発表。FlutterからWebアプリを生成。Flutterはマルチプラットフォーム対応のフレームワークに。Google I/O 2019

 

この発表からFlutterが気になって仕方なかったので環境構築して少し触ってみたのでまずは導入方法などを紹介しようと思います。

 

Flutter SDKのインストール

Flutterを使うのにまずはSDKをこちらからインストールします。手順どうり実行するだけですね。

 

下記コマンドの実行までやっておきましょう。flutterdoctorは不足しているものがあれば教えてくれます。基本的に問題ないかと思います。

 

Android StudioとFlutter Pluginインストール

こちらのインストール手順に従うだけです。

 

インストールしたらFlutterプラグインをインストールします。PluginはPrefferences > PluginsのBrows RepositoriesからFlutterと入力して一番上に来るものをインストールすればいいです。詳細はこちら

flutter plugin

 

プロジェクトの作成

Start a new Flutter projectから作成します。Flutter SDKのpathを設定するのでダウンロードしたFlutterディレクトリの場所を指定してください。

 

Androidライセンスの承認

下記コマンドで承認できます。

 

プロジェクトの起動

まずはエミュレータを起動しておきます。

Tool > AVD Managerからエミュレータを起動します。ない場合は作成してください。

 

Flutterプロkジェクトは下記コマンドだけで簡単に起動できます。

 

デフォルトプロジェクトをいじる

デフォルトプロジェクトはボタンを押すと数字がインクリメントして表示されるだけのアプリです。このアプリを少しだけいじってみました。

 

いじったと言ってもリストを表示しただけですが。Flutterの公式ドキュメントにサンプルコードがたくさんあるので組み込んでみるといいですね。

 

 

bodyのとこで_buildList()を呼ぶとこんな感じで変更できます。

flutter app

 

まとめ

Flutterの用語がまだ全然わかっていませんが、サンプルコードもサンプルアプリもたくさんあるので何かしらはすぐに作れそうな気がしますね。

 

TODOアプリでもまずは作ってみようと思います。

The following two tabs change content below.

髙妻智一

2013年CyberAgent新卒入社 スマホゲームを作る子会社に所属し、サーバーサイドのエンジニアを担当。2年目の終わりから新規子会社の立ち上げに参加し、サーバーサイドのエンジニアリーダーとしてサービースのリリースから運用までを担当。 2018年仮想通貨のスマホウォレットを提供するGinco Incにブロックチェーンエンジニアとして入社。






よく読まれている関連記事はこちら



コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です