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
95
Flutterハンズオン 1
Aya Ebata
August 01, 2024
Tweet
Share
More Decks by Aya Ebata
See All by Aya Ebata
Flutterハンズオン 5
aya_ebata
0
61
JEP 480: Structured Concurrency
aya_ebata
0
250
Flutterハンズオン 4
aya_ebata
0
100
Flutterハンズオン 3
aya_ebata
0
58
Flutterハンズオン 2
aya_ebata
0
62
あたらしい もじれつの かきかた
aya_ebata
0
110
社内勉強会vol.3@ごーふぁー荘
aya_ebata
0
760
社内勉強会vol.2@ごーふぁー荘
aya_ebata
1
760
社内勉強会vol.1@ごーふぁー荘
aya_ebata
0
700
Other Decks in Technology
See All in Technology
AWSで始める実践Dagster入門
kitagawaz
1
610
20250910_障害注入から効率的復旧へ_カオスエンジニアリング_生成AIで考えるAWS障害対応.pdf
sh_fk2
3
240
自作JSエンジンに推しプロポーザルを実装したい!
sajikix
1
170
Evolución del razonamiento matemático de GPT-4.1 a GPT-5 - Data Aventura Summit 2025 & VSCode DevDays
lauchacarro
0
180
企業の生成AIガバナンスにおけるエージェントとセキュリティ
lycorptech_jp
PRO
2
160
機械学習を扱うプラットフォーム開発と運用事例
lycorptech_jp
PRO
0
230
Aurora DSQLはサーバーレスアーキテクチャの常識を変えるのか
iwatatomoya
1
910
新アイテムをどう使っていくか?みんなであーだこーだ言ってみよう / 20250911-rpi-jam-tokyo
akkiesoft
0
230
サンドボックス技術でAI利活用を促進する
koh_naga
0
200
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
スマートファクトリーの第一歩 〜AWSマネージドサービスで 実現する予知保全と生成AI活用まで
ganota
2
210
AWSを利用する上で知っておきたい名前解決のはなし(10分版)
nagisa53
10
3.1k
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
Scaling GitHub
holman
463
140k
The Language of Interfaces
destraynor
161
25k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Git: the NoSQL Database
bkeepers
PRO
431
66k
The World Runs on Bad Software
bkeepers
PRO
70
11k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
A Tale of Four Properties
chriscoyier
160
23k
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/