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で簡単なアプリを作ってみる
Search
Sponsored
·
Ship Features Fearlessly
Turn features on and off without deploys. Used by thousands of Ruby developers.
→
okinari
October 10, 2018
Technology
0
29
Flutterで簡単なアプリを作ってみる
okinari
October 10, 2018
Tweet
Share
More Decks by okinari
See All by okinari
AWS Lambda(+API Gateway)でバイナリを扱う話
okinari
0
110
僕の家からリモコンが消えた話(NatureRemoについて)
okinari
0
76
コンストラクタ、知ってますよね?
okinari
1
110
スマートスピーカーのすゝめ
okinari
0
62
最近のNAS製品事情
okinari
0
81
Webマーケティングとは?
okinari
0
44
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
390
データ収集のすゝめ
okinari
1
300
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
470
Other Decks in Technology
See All in Technology
最強のAIエージェントを諦めたら品質が上がった話 / how quality improved after giving up on the strongest AI agent
kt2mikan
0
160
DevOpsエージェントで実現する!! AWS Well-Architected(W-A) を実現するシステム設計 / 20260307 Masaki Okuda
shift_evolve
PRO
3
610
AIエージェント、 社内展開の前に知っておきたいこと
oracle4engineer
PRO
2
110
SRE NEXT 2026 CfP レビュアーが語る聞きたくなるプロポーザルとは?
yutakawasaki0911
1
250
JAWSDAYS2026_A-6_現場SEが語る 回せるセキュリティ運用~設計で可視化、AIで加速する「楽に回る」運用設計のコツ~
shoki_hata
0
3k
JAWS FESTA 2025でリリースしたほぼリアルタイム文字起こし/翻訳機能の構成について
naoki8408
1
360
Oracle Database@AWS:サービス概要のご紹介
oracle4engineer
PRO
3
1.7k
堅牢.py#2 LT資料
t3tra
0
130
AIエージェント時代に備える AWS Organizations とアカウント設計
kossykinto
3
810
[JAWSDAYS2026]Who is responsible for IAM
mizukibbb
0
470
ランサムウエア対策してますか?やられた時の対策は本当にできてますか?AWSでのリスク分析と対応フローの泥臭いお話。
hootaki
0
110
[E2]CCoEはAI指揮官へ。Bedrock×MCPで構築するコスト・セキュリティ自律運用基盤
taku1418
0
130
Featured
See All Featured
Designing for humans not robots
tammielis
254
26k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
baasie
0
250
Into the Great Unknown - MozCon
thekraken
40
2.3k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
210
Money Talks: Using Revenue to Get Sh*t Done
nikkihalliwell
0
180
Designing for Performance
lara
611
70k
RailsConf 2023
tenderlove
30
1.4k
Kristin Tynski - Automating Marketing Tasks With AI
techseoconnect
PRO
0
190
How Fast Is Fast Enough? [PerfNow 2025]
tammyeverts
3
480
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
330
The Mindset for Success: Future Career Progression
greggifford
PRO
0
270
Lessons Learnt from Crawling 1000+ Websites
charlesmeaden
PRO
1
1.1k
Transcript
Flutterで簡単なアプリを 作ってみる
Self-introduction Name: okinari Twitter:@okinari Job: Web Engineer (Marketing Engineer) Interested:Flutter(Dart)
/ Elixir / Python / node.js Flutter歴: 1ヶ月くらい 2
1. Flutterって何?
Flutterとは? ・クロスプラットフォームモバイルUIフレームワーク - iOSとAndroidのネイティブアプリが 1つのコードで作れる ・Google製 ・Dartlang(プログラミング言語) ・FLOSS(Free/Libre and Open
Source Software) 4
Flutterとは? ・豊富なWidget(UIパーツ)が準備されている - Widgetを組み合わせていき、画面を作成する ・ホットリロード機能 - かなり高速(少しの修正なら1秒程度)で、 状態を保存したままリロード可能 ・ステートフル(状態を保持) 5
Flutterとは? ・Google製だから、それなりに安心 ・公式リファレンスが全部英語で… ・環境構築のための依存関係確認ツールがついてる - flutter doctor コマンド - 問題があるとこの指摘、解決法を教えてくれる
・豊富なプラグイン(https://pub.dartlang.org/) pub:npm、gem、composer、pip等と同じ 6
Flutterで簡単なアプリを作ってみる Flutterで WebSocketを使ってみた
WebSocket使ってみた ・main関数 - 特殊関数、最初に呼び出し(dartlang) ・StatelessWidget、StatefulWidget - 状態を管理するために使用 ・State<T> - 実際の各状態を表す
・setState関数内部で変数等を変更することで、 状態を変更する 8
WebSocket使ってみた ・公式のCookbookに情報あります https://flutter.dev/docs/cookbook/networking/web-sockets 9
WebSocket使ってみた ・WebSocketの接続 IOWebSocketChannel.connect('ws://echo.websocket.org'); ・送信 channel.sink.add('send string'); 10
WebSocket使ってみた ・受信 11 StreamBuilder( stream: widget.channel.stream, builder: (context, snapshot) {
return Text(snapshot.hasData ? '${snapshot.data}' : ''); }, );
WebSocket使ってみた demo 12
PRタイム
14 Thanks! 質問は下記までお願いします。 ◂ @okinari (Twitter)