Flutterに触ってみました
Googleが開発するスマートフォンアプリ環境であるflutterに触ってみました。 iOSとAndroidの両方で動くアプリケーションを開発できます。
作成したアプリが実機で動くところまでは確認できました。後はUI部品(Widget)がどれくらい使えるかですね。
flutter SDKインストール
二つの方法があります。どちらも大差ありません。
zipファイルをダウンロードして解凍する
flutter_macos_v1.9.1+hotfix.6-stable.zip
gitからcloneする
flutter/flutter: Flutter makes it easy and fast to build beautiful mobile apps.
# パスの設定 .zshrcに設定しておくと毎回設定する必要はない。 export PATH="$PATH:[flutterをダウンロード(clone)したディレクトリ]/flutter/bin" # git版でもflutter dockerすると必要なモジュールをダウンロードしてくれる。 $ flutter doctor
flutter app作成
$ flutter create my_app
Platformごとのセットアップ
iOS setup
install Xcode
すでにcommand-line toolのインストール済みの場合にはなにも実行されません。
$ sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer $ sudo xcodebuild -runFirstLaunch
Set up the iOS simulator
シミュレータを起動します。
$ open -a Simulator
run a simple Flutter app
iOSのシミュレータを起動しておくと、iOSアプリが起動します。
$ cd my_app $ flutter run Downloading ios tools... 4.8s Downloading ios-profile tools... 3.2s Downloading ios-release tools... 12.9s Launching lib/main.dart on iPhone 11 Pro Max in debug mode... Running Xcode build... ├─Assembling Flutter resources... 11.2s └─Compiling, linking and signing... 17.9s Xcode build done. 35.9s Syncing files to device iPhone 11 Pro Max... 9,682ms (!) 🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R". An Observatory debugger and profiler on iPhone 11 Pro Max is available at: http://127.0.0.1:57661/vBeZHgO6_xE=/ For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
Deploy to iOS devices
実機にdeployするためには、Xcodeからインストールする必要があります。Xcodeプロジェクトが作成されるのですね。
$ ls ios Flutter Runner Runner.xcworkspace Frameworks Runner.xcodeproj ServiceDefinitions.json $ open Runner.xcodeproj
実機の場合には、signinする必要があります。
モジュール管理にはcocoapodsを使っているようです。
$ sudo gem install cocoapods Password: Fetching: thread_safe-0.3.6.gem (100%) Successfully installed thread_safe-0.3.6 Fetching: tzinfo-1.2.5.gem (100%) ... Fetching: cocoapods-1.8.4.gem (100%) Successfully installed cocoapods-1.8.4 30 gems installed
実機にインストールします。
Android setup
Install Android Studio
割愛
Set up the iOS simulator(emulator)
Android StudioからAVD Managerを起動する。
run a simple Flutter app
$ flutter run Using hardware rendering with device Android SDK built for x86. If you get graphics artifacts, consider enabling software rendering with "--enable-software-rendering". Launching lib/main.dart on Android SDK built for x86 in debug mode... Running Gradle task 'assembleDebug'... Running Gradle task 'assembleDebug'... Done 79.4s ✓ Built build/app/outputs/apk/debug/app-debug.apk. Installing build/app/outputs/apk/app.apk... 3.5s I/Choreographer( 5078): Skipped 56 frames! The application may be doing too much work on its main thread. D/EGL_emulation( 5078): eglMakeCurrent: 0xd8067180: ver 3 0 (tinfo 0xefade5e0) I/OpenGLRenderer( 5078): Davey! duration=1339ms; Flags=1, IntendedVsync=231214310519, Vsync=232147643815, OldestInputEvent=9223372036854775807, NewestInputEvent=0, HandleInputStart=232154779768, AnimationStart=232154810458, PerformTraversalsStart=232154812593, DrawStart=232172042436, SyncQueued=232188163101, SyncStart=232221350860, IssueDrawCommandsStart=232221553060, SwapBuffers=232468630724, FrameCompleted=232587351657, DequeueBufferDuration=71181000, QueueBufferDuration=2190000, Syncing files to device Android SDK built for x86... D/EGL_emulation( 5078): eglMakeCurrent: 0xebd85420: ver 3 0 (tinfo 0xebd836d0) Syncing files to device Android SDK built for x86... 13,622ms (!) 🔥 To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R". An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:58674/R0KmIpo2wI4=/ For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".
実機にインストールします。
その他
device一覧
Android
$ flutter devices 2 connected devices: ANE LX2J • SCV7N18522006899 • android-arm64 • Android 9 (API 28) Android SDK built for x86 • emulator-5554 • android-x86 • Android 9 (API 28) (emulator)
iPhone
$ flutter devices 1 connected device: 宇野昌明のiPhone • a5f6160a18c068493881fcd58ecf93eb8b81438a • ios • iOS 13.1.3
emulators一覧
$ flutter emulators 2 available emulators: Nexus_5X_API_28 • Nexus 5X API 28 • Google • android apple_ios_simulator • iOS Simulator • Apple • ios
