Flutter 髙妻智一

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は不足しているものがあれば教えてくれます。基本的に問題ないかと思います。

$ flutter doctor

 

Android StudioとFlutter Pluginインストール

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

 

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

flutter plugin

 

プロジェクトの作成

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

 

Androidライセンスの承認

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

$ flutter doctor --android-licenses

 

プロジェクトの起動

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

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

 

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

$ flutter run

 

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

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

 

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

 

Widget _buildList() => ListView(
    children: [
      _tile('CineArts at the Empire', '85 W Portal Ave', Icons.theaters),
      _tile('The Castro Theater', '429 Castro St', Icons.theaters),
      _tile('Alamo Drafthouse Cinema', '2550 Mission St', Icons.theaters),
      _tile('Roxie Theater', '3117 16th St', Icons.theaters),
      _tile('United Artists Stonestown Twin', '501 Buckingham Way',
          Icons.theaters),
      _tile('AMC Metreon 16', '135 4th St #3000', Icons.theaters),
      Divider(),
      _tile('Kescaped_code#39;s Kitchen', '757 Monterey Blvd', Icons.restaurant),
      _tile('Emmyescaped_code#39;s Restaurant', '1923 Ocean Ave', Icons.restaurant),
      _tile(
          'Chaiya Thai Restaurant', '272 Claremont Blvd', Icons.restaurant),
      _tile('La Ciccia', '291 30th St', Icons.restaurant),
    ],
  );

  ListTile _tile(String title, String subtitle, IconData icon) => ListTile(
    title: Text(title,
        style: TextStyle(
          fontWeight: FontWeight.w500,
          fontSize: 20,
        )),
    subtitle: Text(subtitle),
    leading: Icon(
      icon,
      color: Colors.blue[500],
    ),
  );

 

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

flutter app

 

まとめ

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

 

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

The following two tabs change content below.
Twitter のプロフィール

髙妻智一

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






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




コメントを残す

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

RECOMMENDこちらの記事も人気です。