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
68
僕の家からリモコンが消えた話(NatureRemoについて)
okinari
0
48
コンストラクタ、知ってますよね?
okinari
1
96
スマートスピーカーのすゝめ
okinari
0
39
最近のNAS製品事情
okinari
0
31
Webマーケティングとは?
okinari
0
32
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
370
データ収集のすゝめ
okinari
1
270
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
440
Other Decks in Technology
See All in Technology
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
データの品質が低いと何が困るのか
kzykmyzw
6
1k
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
Bounded Context: Problem or Solution?
ewolff
1
210
偶然 × 行動で人生の可能性を広げよう / Serendipity × Action: Discover Your Possibilities
ar_tama
1
740
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
アジャイル開発とスクラム
araihara
0
160
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
飲食店予約台帳を支えるインタラクティブ UI 設計と実装
siropaca
6
1.4k
Featured
See All Featured
The Invisible Side of Design
smashingmag
299
50k
Thoughts on Productivity
jonyablonski
69
4.5k
How to Ace a Technical Interview
jacobian
276
23k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
A Philosophy of Restraint
colly
203
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
4
400
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
A designer walks into a library…
pauljervisheath
205
24k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
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)