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
okinari
October 10, 2018
Technology
0
21
Flutterで簡単なアプリを作ってみる
okinari
October 10, 2018
Tweet
Share
More Decks by okinari
See All by okinari
AWS Lambda(+API Gateway)でバイナリを扱う話
okinari
0
64
僕の家からリモコンが消えた話(NatureRemoについて)
okinari
0
48
コンストラクタ、知ってますよね?
okinari
1
95
スマートスピーカーのすゝめ
okinari
0
38
最近のNAS製品事情
okinari
0
22
Webマーケティングとは?
okinari
0
32
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
350
データ収集のすゝめ
okinari
1
260
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
430
Other Decks in Technology
See All in Technology
【技術書典17】OpenFOAM(自宅で極める流体解析)2次元円柱まわりの流れ
kamakiri1225
0
220
日経電子版におけるリアルタイムレコメンドシステム開発の事例紹介/nikkei-realtime-recommender-system
yng87
1
510
一休.comレストランにおけるRustの活用
kymmt90
3
580
[JAWS-UG金沢支部×コンテナ支部合同企画]コンテナとは何か
furuton
3
260
Fargateを使った研修の話
takesection
0
120
AIを駆使したゲーム開発戦略: 新設AI組織の取り組み / sge-ai-strategy
cyberagentdevelopers
PRO
1
130
신뢰할 수 있는 AI 검색 엔진을 만들기 위한 Liner의 여정
huffon
0
360
Figma Dev Modeで進化するデザインとエンジニアリングの協働 / figma-with-engineering
cyberagentdevelopers
PRO
1
430
プロダクト成長に対応するプラットフォーム戦略:Authleteによる共通認証基盤の移行事例 / Building an authentication platform using Authlete and AWS
kakehashi
1
150
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
CAMERA-Suite: 広告文生成のための評価スイート / ai-camera-suite
cyberagentdevelopers
PRO
3
270
Featured
See All Featured
The Language of Interfaces
destraynor
154
24k
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
Automating Front-end Workflow
addyosmani
1365
200k
Done Done
chrislema
181
16k
A Philosophy of Restraint
colly
203
16k
Music & Morning Musume
bryan
46
6.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Cult of Friendly URLs
andyhume
78
6k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
How STYLIGHT went responsive
nonsquared
95
5.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
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)