Dart言語を使ったクロスプラットフォーム(iOS, Android)のモバイルアプリ開発フレームワークであるFlutterを始めました。
Flutter - Beautiful native apps in record time
XcodeやAndroid Studioは事前にインストールします。
Flutter sdkのインストール
Get Startedを参考に、flutter sdkをインストールします。
flutter sdkをダウンロードして、zipを展開し、$HOME/.bash_profileにPATHを通します。
$ export PTAH=path/to/flutter/bin
パスを通したあとは、doctorコマンドを使って環境設定状態を確認します。
$ flutter doctor
私の場合は以下のように表示されました。
╔════════════════════════════════════════════════════════════════════════════╗
║ WARNING: your installation of Flutter is 54 days old. ║
║ ║
║ To update to the latest version, run "flutter upgrade". ║
╚════════════════════════════════════════════════════════════════════════════╝
╔════════════════════════════════════════════════════════════════════════════╗
║ Welcome to Flutter! - https://flutter.io ║
║ ║
║ The Flutter tool anonymously reports feature usage statistics and crash ║
║ reports to Google in order to help Google contribute improvements to ║
║ Flutter over time. ║
║ ║
║ Read about data we send with crash reports: ║
║ https://github.com/flutter/flutter/wiki/Flutter-CLI-crash-reporting ║
║ ║
║ See Google's privacy policy: ║
║ https://www.google.com/intl/en/policies/privacy/ ║
║ ║
║ Use "flutter config --no-analytics" to disable analytics and crash ║
║ reporting. ║
╚════════════════════════════════════════════════════════════════════════════╝
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
✗ libimobiledevice and ideviceinstaller are not installed. To install, run:
brew install --HEAD libimobiledevice
brew install ideviceinstaller
✗ ios-deploy not installed. To install:
brew install ios-deploy
[✓] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[✓] Connected devices (1 available)
とりあえずiOSで動かすために、言われた通りライブラリ周りをインストールして行きます。
$ brew install --HEAD libimobiledevice
$ brew install ideviceinstaller ios-deploy
その後もう一度flutter doctor
を実行すると、iOS toolchainではPython moduleが入ってないと怒られました。
[✓] Flutter (Channel beta, v0.5.1, on Mac OS X 10.13.6 17G65, locale en-JP)
[!] Android toolchain - develop for Android devices (Android SDK 28.0.1)
! Some Android licenses not accepted. To resolve this, run: flutter doctor --android-licenses
[!] iOS toolchain - develop for iOS devices (Xcode 9.4.1)
✗ Missing Xcode dependency: Python module "six".
Install via 'pip install six' or 'sudo easy_install six'.
[✓] Android Studio (version 3.1)
✗ Flutter plugin not installed; this adds Flutter specific functionality.
✗ Dart plugin not installed; this adds Dart specific functionality.
[!] VS Code (version 1.24.1)
[✓] Connected devices (1 available)
なので、言われた通りsix
モジュールをpipでインストールします。
$ pip install six
VS Codeにflutterの拡張機能をインストールする
VS Codeをメインのエディタとして使用しているので、VS Codeの拡張機能をインストールします。
Extensionsパネルでflutterと検索すると、Flutter
モジュールが見つかるのでインストールします。Dart
モジュールは同時にインストールされます。
VS Codeでサンプルを作って実行する
VS Codeのコマンドパレット(Ctrl+Shift+P)で、Flutter: New Project
を選択します。プロジェクト名の入力を求められるので、適当に入力します。
するとプロジェクトが作成されて、カウントアップアプリのサンプルが実行できる状態になります。
Debugウィンドウから、Start Debuggingボタンを押すと、シミュレータが起動してアプリが実行されます。
まだまだFlutter&Dart初心者で、Flutterの良さや、Xamarin
ReactNative
のような他のクロスプラットフォーム開発フレームワークに比べてどうなのかというところはわかってませんが、これから研究していこうと思います。
エンジニアリング Flutter iOS Android モバイルアプリ
関連記事
-
2024/3/24
try! Swift Tokyo 2024
try! Swift Tokyo 2024の参加メモ
Swift
-
2023/1/31
SwiftUIでTabBarを非表示にする
SwiftUI TabBar
-
2023/1/14
Bootstrap5.3で追加されたダークモードに対応してみました
Bootstrap DarkMode
-
2021/2/17
brew upgradeで Your CLT does not support macOS 11というエラーがでた
homebrew macOS Big Sur
-
2020/12/1
Apple Silicon搭載 MacBook Pro M1で Homebrewとrbenvをインストールする
先日購入したApple Silicon搭載 MacBook Pro M1にこのブログをビルドするためにHomebrewとrbenvをインストールしたのでメモ。
Apple Silicon Homebrew rbenv
-
2020/11/27
Apple Silicon搭載のMacBook Pro M1が危うく文鎮化するところだったので記録
Apple Silicon搭載のMacBook Pro 13インチを仕事用に購入したのですが、クリーンインストールしたところ文鎮化しかけたので記録しておきます。
MacBook Pro Apple Apple Silicon M1
-
2020/6/23
Platform State of the Unionまとめ
Platform State of the Unioまとめ
WWDC2020 Apple アップル iOS macOS watchOS tvOS
-
2020/6/23
WWDC2020キーノートまとめ
WWDC2020 キーノートまとめ
WWDC2020 Apple アップル iOS macOS watchOS tvOS
-
2020/5/31
GitHub Pagesで無料ブログを作成する - Part4 自分のオリジナルのテーマを作る
Jekyllでは既存のテーマを使うこともできるのですが、さらに一歩踏み込んで、自分で既存のテーマをカスタマイズしたり、テーマを作ることもできます。
GitHub Pages ブログ
-
2020/5/28
GitHub Pagesで無料ブログを作成する - Part3 Jekyllの設定をカスタマイズする
前回の記事では、Jekyllのテーマを利用する方法と記事を追加する方法を紹介しました。今回はさらにJekyllをカスタマイズしていきますが、確認を簡単にするためにまずJekyllをローカル環境で実行する方法を紹介します。
GitHub Pages ブログ