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
49
Flutterハンズオン 1
Aya Ebata
August 01, 2024
Tweet
Share
More Decks by Aya Ebata
See All by Aya Ebata
Flutterハンズオン 5
aya_ebata
0
17
JEP 480: Structured Concurrency
aya_ebata
0
160
Flutterハンズオン 4
aya_ebata
0
22
Flutterハンズオン 3
aya_ebata
0
16
Flutterハンズオン 2
aya_ebata
0
25
あたらしい もじれつの かきかた
aya_ebata
0
85
社内勉強会vol.3@ごーふぁー荘
aya_ebata
0
640
社内勉強会vol.2@ごーふぁー荘
aya_ebata
1
660
社内勉強会vol.1@ごーふぁー荘
aya_ebata
0
620
Other Decks in Technology
See All in Technology
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
240
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.7k
軽量DDDはもういらない! スタイルガイド本で OOPの実装パターンを学ぼう
panda_program
15
5.4k
「視座」の上げ方が成人発達理論にわかりやすくまとまってた / think_ perspective_hidden_dimensions
shuzon
2
12k
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
140
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
720
成長中のFanTech領域におけるBiomeを活用したCIの高速化 / fantech-web-biome
cyberagentdevelopers
PRO
2
100
VPC間の接続方法を整理してみた #自治体クラウド勉強会
non97
1
990
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
120
ガチ勢によるPipeCD運用大全〜滑らかなCI/CDを添えて〜 / ai-pipecd-encyclopedia
cyberagentdevelopers
PRO
3
240
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
2
620
20241031_AWS_生成AIハッカソン_GenMuck
tsumita
0
120
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Agile that works and the tools we love
rasmusluckow
327
21k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
37
1.8k
Writing Fast Ruby
sferik
626
61k
A designer walks into a library…
pauljervisheath
202
24k
Documentation Writing (for coders)
carmenintech
65
4.4k
For a Future-Friendly Web
brad_frost
175
9.4k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
Learning to Love Humans: Emotional Interface Design
aarron
272
40k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Unsuck your backbone
ammeep
668
57k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
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/