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
85
Flutterハンズオン 1
Aya Ebata
August 01, 2024
Tweet
Share
More Decks by Aya Ebata
See All by Aya Ebata
Flutterハンズオン 5
aya_ebata
0
49
JEP 480: Structured Concurrency
aya_ebata
0
240
Flutterハンズオン 4
aya_ebata
0
85
Flutterハンズオン 3
aya_ebata
0
47
Flutterハンズオン 2
aya_ebata
0
55
あたらしい もじれつの かきかた
aya_ebata
0
98
社内勉強会vol.3@ごーふぁー荘
aya_ebata
0
740
社内勉強会vol.2@ごーふぁー荘
aya_ebata
1
750
社内勉強会vol.1@ごーふぁー荘
aya_ebata
0
690
Other Decks in Technology
See All in Technology
Github Copilot エージェントモードで試してみた
ochtum
0
100
20250623 Findy Lunch LT Brown
3150
0
850
BigQuery Remote FunctionでLooker Studioをインタラクティブ化
cuebic9bic
3
270
A2Aのクライアントを自作する
rynsuke
1
170
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
240
Wasm元年
askua
0
140
2年でここまで成長!AWSで育てたAI Slack botの軌跡
iwamot
PRO
4
700
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
26k
AIのAIによるAIのための出力評価と改善
chocoyama
2
550
Prox Industries株式会社 会社紹介資料
proxindustries
0
280
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.1k
Observability infrastructure behind the trillion-messages scale Kafka platform
lycorptech_jp
PRO
0
140
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
31
8.6k
Why You Should Never Use an ORM
jnunemaker
PRO
57
9.4k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
A better future with KSS
kneath
239
17k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
A Tale of Four Properties
chriscoyier
160
23k
Done Done
chrislema
184
16k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
46
9.6k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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/