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
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
Ask! NIKKEIの運用基盤と改善に向けた取り組み / NIKKEI TECH TALK #30
kaitomajima
1
450
データ基盤の成長を加速させる:アイスタイルにおける挑戦と教訓
tsuda7
3
650
Developers Summit 2025 浅野卓也(13-B-7 LegalOn Technologies)
legalontechnologies
PRO
0
150
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
自動テストの世界に、この5年間で起きたこと
autifyhq
10
7.1k
生成AIの利活用を加速させるための取り組み「prAIrie-dog」/ Shibuya_AI_1
visional_engineering_and_design
1
140
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
アジャイル開発とスクラム
araihara
0
160
SA Night #2 FinatextのSA思想/SA Night #2 Finatext session
satoshiimai
1
100
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
Featured
See All Featured
Building an army of robots
kneath
302
45k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
The Pragmatic Product Professional
lauravandoore
32
6.4k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
KATA
mclloyd
29
14k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
A Philosophy of Restraint
colly
203
16k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Documentation Writing (for coders)
carmenintech
67
4.6k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The World Runs on Bad Software
bkeepers
PRO
67
11k
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)