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
69
僕の家からリモコンが消えた話(NatureRemoについて)
okinari
0
48
コンストラクタ、知ってますよね?
okinari
1
97
スマートスピーカーのすゝめ
okinari
0
39
最近のNAS製品事情
okinari
0
35
Webマーケティングとは?
okinari
0
32
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
370
データ収集のすゝめ
okinari
1
280
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
440
Other Decks in Technology
See All in Technology
DevinはクラウドエンジニアAIになれるのか!? 実践的なガードレール設計/devin-can-become-a-cloud-engineer-ai-practical-guardrail-design
tomoki10
3
1.3k
AI・LLM事業部のSREとタスクの自動運転
shinyorke
PRO
0
300
React Server Componentは 何を解決し何を解決しないのか / What do React Server Components solve, and what do they not solve?
kaminashi
6
1.2k
AIエージェントキャッチアップと論文リサーチ
os1ma
6
1.2k
Engineering Managementのグローバルトレンド #emoasis / Engineering Management Global Trend
kyonmm
PRO
6
980
[CATS]Amazon Bedrock GenUハンズオン座学資料 #2 GenU環境でRAGを体験してみよう
tsukuboshi
0
140
Cline、めっちゃ便利、お金が飛ぶ💸
iwamot
19
18k
新卒エンジニア研修の試行錯誤と工夫/nikkei-tech-talk-31
nishiuma
0
190
ソフトウェア開発現代史: なぜ日本のソフトウェア開発は「滝」なのか?製造業の成功体験とのギャップ #jassttokyo
takabow
2
1.5k
チームビルディング「脅威モデリング」ワークショップ
koheiyoshikawa
0
130
AWS CDK コントリビュート はじめの一歩
yendoooo
1
120
SSH公開鍵認証による接続 / Connecting with SSH Public Key Authentication
kaityo256
PRO
2
210
Featured
See All Featured
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
30
1.1k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.7k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
The Invisible Side of Design
smashingmag
299
50k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
30
2.3k
Building Your Own Lightsaber
phodgson
104
6.3k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
A better future with KSS
kneath
238
17k
It's Worth the Effort
3n
184
28k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
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)