LoginSignup
3

More than 3 years have passed since last update.

MacでFlutterのプロジェクト作ってみた

Posted at

概要

iOS/Androidのツール系アプリ作りたくなってFlutter使ってみようと思ったんですが、
今までまったく触ったことなかったんで、導入からプロジェクト作成までの備忘としてのまとめたものになります。

全部ここ見ながら作ってます。
https://flutter.dev/docs/get-started/install

そもそも上の公式の説明がとてもわかりやすいんで、結論いうとあんまりこの記事価値ない…(´・ω・`)

環境

  • Mac OSX Catalina
  • Xcode 11
  • Flutter v1.12.13
  • IntelliJ IDEA Ultimate Edition (version 2019.1.4)
    • Android Studio 3.5でもできるっぽい
    • VSCodeでもできるっぽい
    • Vimでもできるっぽい

ゴール

  • 簡単なプロジェクトを作ってiOSシミュレーターで動かし、少しコードをいじって反映されるの確認する

FlutterのSDKインストール

この通りやればいい感じ。
https://flutter.dev/docs/get-started/install/macos

なお、ツールとしてbashを使っているっぽいので、 zshになってる場合はbashに戻します。

Macでzshからbashへ戻す方法(Catalina)
https://qiita.com/___inon_/items/c9a30e78196998f4160c

その他、Flutterは以下に依存してるそうです。

  • bash
  • curl
  • git 2.x
  • mkdir
  • rm
  • unzip
  • which
  • zip

SDKを落として解答してきた後、~/.bash_profile に以下を追記

PATH="<flutterのルートディレクトリ>/bin:${PATH}"

その後、source ~/.bash_profile とやって変更を反映し、実際に flutter と打ってパスが通っていることを確認。

$ flutter
Manage your Flutter app development.

Common commands:

  flutter create <output directory>
    Create a new Flutter project in the specified directory.

  flutter run [options]
    Run your Flutter application on an attached device or in an emulator.
︙

必要なものがあるかどうかの確認

flutter doctor というコマンドを打つと、必要な依存ライブラリがインストールされているかどうか確認できる

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.14.5 18F132, 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 10.3)
    ✗ Flutter requires a minimum Xcode version of 11.0.0.
      Download the latest version or update via the Mac App Store.
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] IntelliJ IDEA Ultimate Edition (version 2019.1.4)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.43.2)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

結構怒られてる(´・ω・`)
Xcodeかぁ…Catalinaに変えたくないんだけどなぁ。
まぁいずれやらないといけないんだし、この機にやろうかなぁ。
(またXVimインストールしなおしかぁ…)

というわけでCatalinaにアップデートしてXcodeも11にして再度実行し、ひとつずつ解決していく。
書かれてることをやるだけだからかんたん。

# Android側のissue解決
$ flutter doctor --android-licenses
# iOS側のissue解決
$ sudo xcodebuild -license
# なぜかCatalinaインストール後にCocoaPodsが使えなくなってたから再インストール
$ sudo gem install cocoapods

いずれvimで開発できるようにしたいけど、ひとまずはIntelliJにプラグインをインストール。

image.png

再度doctorを実行。

$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, v1.12.13+hotfix.9, on Mac OS X 10.15.4 19E266, locale ja-JP)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
[✓] Xcode - develop for iOS and macOS (Xcode 11.4)
[!] Android Studio (version 3.5)
    ✗ Flutter plugin not installed; this adds Flutter specific functionality.
    ✗ Dart plugin not installed; this adds Dart specific functionality.
[✓] IntelliJ IDEA Ultimate Edition (version 2019.1.4)
[!] VS Code (version 1.43.2)
    ✗ Flutter extension not installed; install from
      https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter
[!] Connected device
    ! No devices available

とりあえずこれでいいや。

簡単なプロジェクト作成して動かす

結論は以下(特に何もひっかからなかった)

# プロジェクト作成
$ flutter create my_app
# 動かしてみる
$ cd my_app
$ flutter run
No supported devices connected.
# なるほどねぇ。
# とりあえずiOSシミュレーターを起動してみる
$ open -a Simulator
# 再度実行
$ $ flutter run

Launching lib/main.dart on iPhone 5s in debug mode...
Running Xcode build...                                                  

 ├─Assembling Flutter resources...                          10.3s
Apr  4 09:13:05 ****-puro com.apple.CoreSimulator.SimDevice.1B269AD0-DBEB-4ED9-8941-25D8BB115D2F[17945] (com.apple.imfoundation.IMRemoteURLConnectionAgent): Unknown key for integer: _DirtyJetsamMemoryLimit
Apr  4 09:13:06 ****-puro com.apple.CoreSimulator.SimDevice.1B269AD0-DBEB-4ED9-8941-25D8BB115D2F[17945] (com.apple.imfoundation.IMRemoteURLConnectionAgent): Unknown key for integer: _DirtyJetsamMemoryLimit
 └─Compiling, linking and signing...                        54.9s
Xcode build done.                                           73.7s
        PackageType = Developer;
        SimulatorRootPath = "/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS 10.3.simruntime/Contents/Resources/RuntimeRoot";
        SimulatorUserPath = "/Users/****/Library/Developer/CoreSimulator/Devices/1B269AD0-DBEB-4ED9-8941-25D8BB115D2F/data";
    }
        CFBundleIdentifier = "com.example.myApp";
        PackageType = Developer;
        SimulatorRootPath = "/Library/Developer/CoreSimulator/Profiles/Runtimes/iOS 10.3.simruntime/Contents/Resources/RuntimeRoot";
        SimulatorUserPath = "/Users/****/Library/Developer/CoreSimulator/Devices/1B269AD0-DBEB-4ED9-8941-25D8BB115D2F/data";
    })
        arguments =     (
            "--enable-dart-profiling",
            "--enable-checked-mode",
            "--verify-entry-points",
            "--observatory-port=0"
        );
        environment =     {
            TERM = "xterm-256color";
        };
    }
        retryTimeout: 120.000000 (default write com.apple.CoreSimulatorBridge LaunchRetryTimeout <value>)
        bootTimeout: 300.000000 (default write com.apple.CoreSimulatorBridge BootRetryTimeout <value>)
        bootLeeway: 120.000000 (default write com.apple.CoreSimulatorBridge BootLeeway <value>)
        Note: Use 'xcrun simctl spawn booted defaults write <domain> <key> <value>' to modify defaults in the booted Simulator device.
    Simulator booted at: 2020-04-04 00:11:47 +0000
    Current time: 2020-04-04 00:14:04 +0000
    Within boot leeway: NO
        <<CGColorSpace 0x60000002b980> (kCGColorSpaceICCBased; kCGColorSpaceModelRGB; sRGB IEC61966-2.1)>
            width = 320, height = 568, bpc = 8, bpp = 32, row bytes = 1280 
            kCGImageAlphaNoneSkipFirst | kCGImageByteOrder32Little 
            is mask? No, has mask? No, has matte? No, should interpolate? Yes with colorSpace=<CGColorSpace 0x60000002b980> (kCGColorSpaceICCBased; kCGColorSpaceModelRGB; sRGB IEC61966-2.1)
Syncing files to device iPhone 5s...                                    
 7,093ms (!)                                       

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone 5s is available at: http://127.0.0.1:52406/15rvDpukoRM=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

image.png

動いた。
マテリアルデザインちょっと嫌だけど他に変えたりとかできるのかなぁ。

編集してHotRestartをやってみる。

flutter create my_appで既に作成されてるmy_app/lib/main.dartをいじる。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'ふらったーでもぺーじ'),
    );
  }
}

そして、ターミナルで r を押下。

For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

Initializing hot reload...                                              
Reloaded 1 of 478 libraries in 259ms.

image.png

こいつは簡単だねぇ。

というわけで

ちょっと簡単なアプリ作っていってみようかと思います(`・ω・´)

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3