概要
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にプラグインをインストール。
再度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".
動いた。
マテリアルデザインちょっと嫌だけど他に変えたりとかできるのかなぁ。
編集して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.
こいつは簡単だねぇ。
というわけで
ちょっと簡単なアプリ作っていってみようかと思います(`・ω・´)