Flutter入門 macOSにDesktop開発環境を構築する

Flutter入門 macOSにDesktop開発環境を構築する

2021年3月にGoogleからFlutter 2が発表されました。こちらの記事によると、

「Flutter 2では、デスクトップ版を初期リリースとして、当社の『Stable』チャネルに移し、誰もが利用できるようにした」

グーグルがUIフレームワーク「Flutter 2」を発表–ウェブやデスクトップのアプリ開発にも対応

とのこと。いよいよ安定版チャネルでも、デスクトップアプリが開発できるようになったということなのかな。デスクトップアプリ自体はまだ「ベータ品質」のようです。

ということで、macOSにデスクトップアプリ開発環境を構築してみました。公式ページは以下です。

💡Desktop support for Flutter- Flutter

Desktop開発環境を構築する

以下の2ステップで、カンタンに環境構築できます。

  • Flutterをアップグレードする
  • デスクトップアプリを有効にする

もし、まだFlutterがインストールされていないなら、下記ページを参照ください。詳しく解説してあります。

💡Flutter入門 macOSに開発環境を構築する(2020年版)

Flutterをアップグレードする

Stableチャネルにデスクトップ版が入ったのはFlutter 2から。ということは、Flutterを最新版にする必要があります。

ターミナルで下記コマンドを実行すると、Flutterがアップグレードできます。

$ flutter upgrade

アップグレードされたら、下記コマンドでバージョンを確認します。

$ flutter --version

自分の環境では以下のような出力でした。

Flutter 2.0.5 • channel stable • https://github.com/flutter/flutter.git
Framework • revision adc687823a (8 days ago) • 2021-04-16 09:40:20 -0700
Engine • revision b09f014e96
Tools • Dart 2.12.3

出力にchannel stableの文字列があります。上に記載したように、Flutter 2では、channel stableのままでデスクトップ版が使えるようになったので、チャネルを変更する必要はありません

デスクトップアプリを有効にする

デスクトップアプリを有効にするために、下記コマンドを実行します。

$ flutter config --enable-macos-desktop

以上で設定は終了です。

めちゃくちゃカンタン。

プロジェクトを作ってデスクトップアプリを動かしてみる

ターミナルから

ターミナルで下記コマンドを実行します。

$ mkdir xxx
$ cd xxx
$ flutter create .

上記でxxxディレクトリにFlutterプロジェクトが作られます。このとき、デスクトップアプリが有効になっていると、macosディレクトリが作られてます。このディレクトリを指定して

$ flutter run -d macos

とすると、

デスクトップアプリが起動します。

Android Studioから

Android Studioを使って、上記と同じことをする場合、まずAndroid Studioを起動し、

「Welcome to Android Studio」画面で、[Start a new Flutter project]を選びます。

「Create New Flutter Project」画面で[Flutter Application]を選択します。

Android Studioが起動したら、上の[<no device selected>]

[macOS (desktop)]が選択できるようになっているので、これを選択し、

その横の[Run ‘main.dart’ (^R)](緑の▶ボタン)、または[Debug ‘main.dart’ (^D)](緑の虫のボタン)をクリックすると、デスクトップアプリ画面が表示されます。