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
95
スマートスピーカーのすゝめ
okinari
0
39
最近のNAS製品事情
okinari
0
30
Webマーケティングとは?
okinari
0
32
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
360
データ収集のすゝめ
okinari
1
270
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
440
Other Decks in Technology
See All in Technology
Microsoft Ignite 2024 最新情報!Microsoft 365 Agents SDK 概要 / Microsoft Ignite 2024 latest news Microsoft 365 Agents SDK overview
karamem0
0
190
EDRからERM: PFN-SIRTが関わるセキュリティとリスクへの取り組み
pfn
PRO
0
100
SREとしてスタッフエンジニアを目指す / SRE Kaigi 2025
tjun
15
6.2k
企業テックブログにおける執筆ネタの考え方・見つけ方・広げ方 / How to Think of, Find, and Expand Writing Topics for Corporate Tech Blogs
honyanya
0
800
RevOpsへ至る道 データ活用による事業革新への挑戦 / path-to-revops
pei0804
3
800
Women in Agile
kawaguti
PRO
2
170
【Λ(らむだ)】アップデート機能振り返りΛ編 / PADjp20250127
lambda
0
120
地方企業がクラウドを活用するヒント
miu_crescent
PRO
1
110
Site Reliability Engineering on Kubernetes
nwiizo
6
4.4k
エラーバジェット枯渇の原因 - 偽陽性との戦い -
phaya72
1
100
Oracle Cloud Infrastructure:2025年1月度サービス・アップデート
oracle4engineer
PRO
0
180
CNAPPから考えるAWSガバナンスの実践と最適化
yuobayashi
5
680
Featured
See All Featured
Faster Mobile Websites
deanohume
305
30k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
220
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.4k
Building Applications with DynamoDB
mza
93
6.2k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
6
220
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.4k
Docker and Python
trallard
43
3.2k
Gamification - CAS2011
davidbonilla
80
5.1k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
VelocityConf: Rendering Performance Case Studies
addyosmani
327
24k
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)