Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterハンズオン 1
Search
Aya Ebata
August 01, 2024
Technology
0
82
Flutterハンズオン 1
Aya Ebata
August 01, 2024
Tweet
Share
More Decks by Aya Ebata
See All by Aya Ebata
Flutterハンズオン 5
aya_ebata
0
47
JEP 480: Structured Concurrency
aya_ebata
0
230
Flutterハンズオン 4
aya_ebata
0
84
Flutterハンズオン 3
aya_ebata
0
45
Flutterハンズオン 2
aya_ebata
0
54
あたらしい もじれつの かきかた
aya_ebata
0
98
社内勉強会vol.3@ごーふぁー荘
aya_ebata
0
730
社内勉強会vol.2@ごーふぁー荘
aya_ebata
1
740
社内勉強会vol.1@ごーふぁー荘
aya_ebata
0
690
Other Decks in Technology
See All in Technology
「実体」で築く共通認識: 開発現場のコミュニケーション最適化 / Let's Get on the Same Page with Concrete Artifacts: Optimization of Communication in dev teams
kazizi55
0
140
ObsidianをMCP連携させてみる
ttnyt8701
2
120
Model Mondays S2E01: Advanced Reasoning
nitya
0
360
kotlin-lsp を Emacs で使えるようにしてみた / use kotlin-lsp in Emacs
nabeo
0
150
AWS全冠したので振りかえってみる
tajimon
0
140
AIにどこまで任せる?実務で使える(かもしれない)AIエージェント設計の考え方
har1101
3
1.1k
Amplifyとゼロからはじめた AIコーディング 成果と展望
mkdev10
1
260
Securing your Lambda 101
chillzprezi
0
280
2025/6/21 日本学術会議公開シンポジウム発表資料
keisuke198619
2
360
脅威をモデリングしてMCPのセキュリティ対策を考えよう
flatt_security
4
1.7k
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
280
自分を理解するAI時代の準備 〜マイプロフィールMCPの実装〜
edo_m18
0
110
Featured
See All Featured
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
Automating Front-end Workflow
addyosmani
1370
200k
The World Runs on Bad Software
bkeepers
PRO
68
11k
Done Done
chrislema
184
16k
Rails Girls Zürich Keynote
gr2m
94
14k
Music & Morning Musume
bryan
46
6.6k
KATA
mclloyd
29
14k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
52
2.8k
Being A Developer After 40
akosma
90
590k
What's in a price? How to price your products and services
michaelherold
245
12k
Transcript
Flutterハンズオン 1 2024/08/06 社内勉強会 えばた あや
今日話すこと 1. Flutterとは? 2. 環境構築 - 最後まで終わらなかったら宿題です(結構ボリューミー) - 時間がかかる部分もあるのでゆるく話しながらやりましょう〜
1. Flutterとは?
Flutterとは - Google によって開発、サポートされているオープンソースの フレームワーク - Dart(コンパイル型言語)で開発 - クロスプラットフォームに対応(⇔ ネイティブ)
- iOS、Android、Web、Linux、macOS、Windowsが開発できる
ネイティブアプリケーションとは - AndroidやiOSなどの特定のプラットフォーム向けにアプリケーション をコーディングすること - 各プラットフォーム向けに開発するため、多くのコードとエンジニアが 必要
クロスプラットフォームアプリケーションとは - 1つのプログラミング言語と1つのコードベースで複数のプラット フォーム用のアプリケーションを構築できる - よって、コストと時間が削減できる
Flutterの利点 - ネイティブに近い高速で効果的なパフォーマンス - ユーザーがアプリケーションへのアクセスに使用するプラット フォームに関係なく一貫したビジュアルを提供 - 使いやすさを重視 - ホットリロード
- ウィジェットインスペクター: UIレイアウトと状態を可視化
2. 環境構築
事前準備 Android Studio - https://developer.android.com/studio?hl=ja からインストールする - 以下をインストール時に選択する - Android
SDK Platform, API 34.0.5 - Android SDK Command-line Tools - Android SDK Build-Tools - Android SDK Platform-Tools - Android Emulator
事前準備 Xcode - App Storeで「Xcode」で検索してインストール(時間かかるかも) - Xcodeを起動してライセンスにAgree
事前準備 エディタ - VSCodeで実装したい場合は入れておいてください!
大まかな流れ 1. Flutter SDKをインストール 2. Android Studioの設定 - Androidのエミュレータを使えるようにするため 3.
Xcodeの設定 - iPhone(iOS)のシミュレータを使えるようにするため 4. お好きなエディタにFlutterの設定をする - 実装時に使用する
対応エディタ - お好きなの選んでください! - VSCode - Android Studio - IntelliJ
IDEA(今回は扱わない)
Flutter SDKをインストール - Flutter SDKをzipでダウンロードして構築をする(今回はこっち) - VSCodeから構築をする - Homebrewでインストール $
brew install --cask flutter https://docs.flutter.dev/get-started/install/macos/mobile-android#use- vs-code-to-install-flutter
Flutter SDKをインストール 0. Rosettaをインストールする(Apple Siliconのみ) $ sudo softwareupdate --install-rosetta --agree-to-license
Flutter SDKをインストール 1. Flutter SDKのzipをダウンロードする https://docs.flutter.dev/get-started/install/macos/mobile-android#downl oad-then-install-flutter
Flutter SDKをインストール 2. developmentディレクトリにてzipを解凍する $ unzip ~/Downloads/flutter_macos_arm64_3.22.3-stable.zip \ -d ~/development/
Flutter SDKをインストール 3. パスを通す ~/.zshenvにパスを追加 $ echo export PATH='$HOME/development/flutter/bin:$PATH' \
>> ~/.zshenv $ source ~/.zshenv 以下でflutterコマンドが使えるようになってることを確認 $ flutter --version
Android Studioの設定 1. SDK Managerで必要なものを確認する 1. More Actionsまたは三点リーダからSDK Managerを開く 2.
以下が入っているか確認 3. なければチェックを入れてApplyでインストール SDK Platformsタブ - Android SDK Platform, API 34.0.5
Android Studioの設定 SDK Toolsタブ - Android SDK Command-line Tools -
Android SDK Build-Tools - Android SDK Platform-Tools - Android Emulator 確認したらOKで設定画面を閉じる
Android Studioの設定 2. Androidエミュレータの設定 1. More Actionsまたは三点リーダからVirtual Device Managerを開く 2.
+ボタン押下 3. 適当なデバイスを選んでひたすらNextからのFinishを押下
Android Studioの設定 3. Androidのライセンスに同意する 以下を実行してひたすらy $ flutter doctor --android-licenses
Android Studioの設定 4. Androidの環境が構築できていることを確認する 以下を実行してAndroid toolchainの項目にチェックが入っていたらOK $ flutter doctor
Android Studioの設定 5. AndroidでFlutterアプリが起動できることを確認する 1. Device Managerで先ほど入れたデバイスの▶を押して起動する 2. 以下を実行(ディレクトリを作成したい場所で) $
flutter create sample $ cd sample $ flutter run 3. カウンターアプリが表示されたら成功
Android Studioの設定 参考 https://docs.flutter.dev/get-started/install/macos/mobile-android
Xcodeの設定 1. インストール済みのXcodeのバージョンでコマンドラインツールを 使うように設定する $ sudo sh -c \ 'xcode-select
-s /Applications/Xcode.app/Contents/Developer \ && xcodebuild -runFirstLaunch'
Xcodeの設定 2. Xcodeのライセンスに同意する 以下を実行して最後にagreeする $ sudo xcodebuild -license
Xcodeの設定 3. iOSのシミュレータをインストールする $ xcodebuild -downloadPlatform iOS 以下で起動 $ open
-a Simulator
Xcodeの設定 4. CocoaPodsをインストールする ネイティブiOSコードを含むFlutterプラグインを使用する時に 必要になってくる $ sudo gem install cocoapods
$ echo export PATH='$HOME/.gem/bin:$PATH' >> ~/.zshenv $ source ~/.zshenv 場合によってエラーが出るのでエラー指示通りにコマンドを打っていく
Xcodeの設定 5. iOSの環境が構築できていることを確認する 以下を実行してXcodeの項目にチェックが入っていたらOK $ flutter doctor
Xcodeの設定 6. iOSでFlutterアプリが起動できることを確認する 1. 先ほど作成したsampleディレクトリ内で以下を実行 $ open -a Simulator $
flutter run 2. カウンターアプリが表示されたら成功
Xcodeの設定 参考 https://docs.flutter.dev/get-started/install/macos/mobile-ios
お好きなエディタにFlutterの設定をする VSCode 1. 先ほど作成したsampleアプリをVSCodeで開く 2. Flutterのプラグインを入れる(タブの から検索!) 3. 先ほどの手順通りにAndroidエミュレータ/iOSシミュレータを起動 4. コマンドパレット(F1)で「flutter:
Select Device」を入力 5. 起動しているデバイスを選択 6. VSCodeのタブから「実行とデバッグ(Run and Debug)」を押下
お好きなエディタにFlutterの設定をする Android Studio 1. 先ほど作成したsampleアプリをAndroid Studioで開く 2. Flutterのプラグインを入れる 3. デバイスを選択して実行
- Android StudioからもiOSが実行できる!
まとめ - Flutterはクロスプラットフォームでのアプリケーション開発が可能 - Android StudioのAndroidエミュレータを使って開発する - XcodeのiOSシミュレータを使って開発する
参考資料 - 本家の環境構築サイト - https://docs.flutter.dev/get-started/install - Roadmap(学習のためのロードマップサイト) - https://roadmap.sh/flutter -
DartPad(web上で実装できる) - https://dartpad.dev/