Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
17
Help us understand the problem. What is going on with this article?
@kurun_pan

[Flutter] デスクトップアプリ環境構築 for macOS

1. はじめに

FlutterアプリをmacOS環境で動かすための開発環境の構築手順をまとめています。

macOS環境でFlutterアプリを開発しつつ、iOSやAndroidエミュレータ・実機を使わずにその場でFlutterアプリの動作確認やデバッグが出来るため、とても便利です。

2021/03/04時点でのmacOSのサポート状況はベータ版となっています。ベータ版ですが、Flutter 2.0以降はstableチャネルでも利用可能です!

Linux環境の場合はこちら

2. 環境構築の手順

Flutter SDKインストール

リポジトリからcloneした後、適当なパスに配置してパスを通しておきます。

$ git clone https://github.com/flutter/flutter
$ sudo mv flutter /usr/local/
$ export PATH=$PATH:/usr/local/flutter/bin

Android Studioインストール (オプション)

Android向けにビルドしたり、Androidエミュレータで動作確認をしたい場合にのみインストールして下さい。当然、Android Studioをインストール済みの場合は作業不要です。

https://developer.android.com/studioからmacOS版をダウンロードして適当な場所に置いて、インストールスクリプトを叩きます。

Android Studioのインストールで基本的には次へを押していく感じです。

Xcodeのインストール

ビルドにXcodeが必要なるため、ストアからインストールしてください。

Flutterセットアップ

ターゲット環境をHost PC (macOS) にする設定を行います。参考

$ flutter config --enable-macos-desktop

cocoapodsのインストール

cocoapodsはサンプルをビルドして動かすだけなら不要ですが、プラグインを追加してアプリを作成していくためには必須で必要です。

$ sudo gem install cocoapods

ここまでの状況の確認

以下のコマンドを使うと、flutterを動かすためのインストール状況を診断してくれます。今回はサンプルを動かせればいいので、以下の状態でも大丈夫です。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel master, v1.13.1-pre.58, on Mac OS X 10.15.1 19B88, locale ja-JP)

[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    ! Some Android licenses not accepted.  To resolve this, run: flutter doctor --android-licenses
[✓] Xcode - develop for iOS and macOS (Xcode 11.2.1)
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] VS Code (version 1.40.2)
[✓] Connected device (1 available)

! Doctor found issues in 2 categories.

3. サンプルを実行してみる

サンプルプロジェクトの作成

$ mkdir sample
$ cd sample
$ flutter create .

実行

$ flutter run -d macos

もしくは、ビルドのみ行いたい場合は以下のコマンドを実行します。

$ flutter build macos

スクリーンショット 2019-12-07 12.17.26.png

4. デスクトップ向けプラグインの動作確認

プラットフォーム依存のAndroid/iOS向けのプラグインはデスクトップ環境では利用出来ません (Dartのみのプラグインであれば、プラットフォームに依存せずに共通で利用が可能です) 。そのため、用意されているプラグインを使ったテスト済みのサンプルがflutter-desktop-embeddingにあります。これを参考に、デスクトップ向けのプラグインの作成方法を把握することが出来ます。

flutter-desktop-embedding取得

$ git clone https://github.com/google/flutter-desktop-embedding.git

実行

$ cd flutter-desktop-embedding/testbed
$ flutter run

ダークモードも対応してそうです↓

スクリーンショット 2019-12-09 20.57.09.png

17
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
kurun_pan
QiitaではFlutterに関する記事を投稿しています。その他の技術内容やQiita投稿記事の内容以外についての、ご意見・連絡等はTwitterの方へお願いします! 

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
17
Help us understand the problem. What is going on with this article?