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
40
Flutterハンズオン 1
Aya Ebata
August 01, 2024
Tweet
Share
More Decks by Aya Ebata
See All by Aya Ebata
Flutterハンズオン 5
aya_ebata
0
7
JEP 480: Structured Concurrency
aya_ebata
0
130
Flutterハンズオン 4
aya_ebata
0
15
Flutterハンズオン 3
aya_ebata
0
7
Flutterハンズオン 2
aya_ebata
0
15
あたらしい もじれつの かきかた
aya_ebata
0
77
社内勉強会vol.3@ごーふぁー荘
aya_ebata
0
610
社内勉強会vol.2@ごーふぁー荘
aya_ebata
1
630
社内勉強会vol.1@ごーふぁー荘
aya_ebata
0
590
Other Decks in Technology
See All in Technology
AWS SAW を広めたい @四国クラウドお遍路
kazzpapa3
0
230
Privacy Sandbox on Android / DroidKaigi 2024
7pairs
1
260
技術的負債解消の取り組みと専門チームのお話
bengo4com
0
330
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2k
再考 アクターモデル/ reconsider actor model
ytake
0
350
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
210
AIを活用した柔軟かつ効率的な社内リソース検索への取り組み
cygames
0
170
ロリポップ! for Gamersを支えるインフラ/lolipop for gamers infrastructure
takumakume
0
130
Tricentisにおけるテスト自動化へのAI活用ご紹介/20240910Shunsuke Katakura
shift_evolve
0
200
学術機関におけるID連携とOpenID Connect
fujie
0
180
Mocking in Rust Applications
taiki45
1
410
より快適なエラーログ監視を目指して
leveragestech
4
1.4k
Featured
See All Featured
Product Roadmaps are Hard
iamctodd
PRO
48
10k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
GraphQLとの向き合い方2022年版
quramy
43
13k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
43
2k
Designing Experiences People Love
moore
138
23k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
89
16k
Music & Morning Musume
bryan
46
6k
What's in a price? How to price your products and services
michaelherold
242
11k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
109
6.9k
Fireside Chat
paigeccino
31
2.9k
Optimising Largest Contentful Paint
csswizardry
30
2.8k
Speed Design
sergeychernyshev
22
430
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/