Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterで簡単なアプリを作ってみる
Search
okinari
October 10, 2018
Technology
0
24
Flutterで簡単なアプリを作ってみる
okinari
October 10, 2018
Tweet
Share
More Decks by okinari
See All by okinari
AWS Lambda(+API Gateway)でバイナリを扱う話
okinari
0
87
僕の家からリモコンが消えた話(NatureRemoについて)
okinari
0
60
コンストラクタ、知ってますよね?
okinari
1
100
スマートスピーカーのすゝめ
okinari
0
47
最近のNAS製品事情
okinari
0
63
Webマーケティングとは?
okinari
0
38
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
380
データ収集のすゝめ
okinari
1
300
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
460
Other Decks in Technology
See All in Technology
研究開発×プロダクトマネジメントへの挑戦 / ly_mlpm_meetup
sansan_randd
0
100
世界最速級 memcached 互換サーバー作った
yasukata
0
330
グレートファイアウォールを自宅に建てよう
ctes091x
0
140
形式手法特論:CEGAR を用いたモデル検査の状態空間削減 #kernelvm / Kernel VM Study Hokuriku Part 8
ytaka23
2
450
Gemini でコードレビュー知見を見える化
zozotech
PRO
1
230
大企業でもできる!ボトムアップで拡大させるプラットフォームの作り方
findy_eventslides
1
630
Ruby で作る大規模イベントネットワーク構築・運用支援システム TTDB
taketo1113
1
220
多様なデジタルアイデンティティを攻撃からどうやって守るのか / 20251212
ayokura
0
350
pmconf2025 - 他社事例を"自社仕様化"する技術_iRAFT法
daichi_yamashita
0
790
Lessons from Migrating to OpenSearch: Shard Design, Log Ingestion, and UI Decisions
sansantech
PRO
1
100
Kiro Autonomous AgentとKiro Powers の紹介 / kiro-autonomous-agent-and-powers
tomoki10
0
340
意外とあった SQL Server 関連アップデート + Database Savings Plans
stknohg
PRO
0
300
Featured
See All Featured
The Power of CSS Pseudo Elements
geoffreycrofte
80
6.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
359
30k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.8k
Balancing Empowerment & Direction
lara
5
790
The Cost Of JavaScript in 2023
addyosmani
55
9.3k
[SF Ruby Conf 2025] Rails X
palkan
0
500
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
162
15k
The Cult of Friendly URLs
andyhume
79
6.7k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
Building Adaptive Systems
keathley
44
2.9k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.7k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
249
1.3M
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)