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
61
僕の家からリモコンが消えた話(NatureRemoについて)
okinari
0
40
コンストラクタ、知ってますよね?
okinari
1
93
スマートスピーカーのすゝめ
okinari
0
36
最近のNAS製品事情
okinari
0
15
Webマーケティングとは?
okinari
0
29
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
340
データ収集のすゝめ
okinari
1
250
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
400
Other Decks in Technology
See All in Technology
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
180
OSSコミットしてZennの課題を解決した話
dyoshikawa1993
0
150
E2Eテスト自動化プラットフォームにおけるAIの活用
shift_evolve
0
180
コンテナ・K8s研修 - 後半 Kubernetes 基礎&ハンズオン【MIXI 24新卒技術研修】
mixi_engineers
PRO
1
120
累計ダウンロード数1億8000万を超えるアプリケーションプラットフォームのレガシーシステム脱却とモダン化への道
kmitsuhashi
0
120
RAGのサービスをリリースして1年3ヶ月が経ちました
segavvy
4
900
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
たくさん本を読んだけど 1年後には綺麗サッパリ!を乗り越えて 学習の鬼になるぞ👹
yum3
0
160
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
AWSで”最小権限の原則”を実現するための考え方 /20240722-ssmjp-aws-least-privilege
opelab
10
4.3k
エンジニアリングマネージャーはどう学んでいくのか #devsumi / How Do Engineering Managers Continue to Learn and Grow?
expajp
4
1.3k
Flutter研修【MIXI 24新卒技術研修】
mixi_engineers
PRO
0
160
Featured
See All Featured
No one is an island. Learnings from fostering a developers community.
thoeni
17
2.8k
Typedesign – Prime Four
hannesfritz
37
2.2k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
17
8.7k
Building a Modern Day E-commerce SEO Strategy
aleyda
25
6.7k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
90
47k
For a Future-Friendly Web
brad_frost
173
9.2k
Code Reviewing Like a Champion
maltzj
517
39k
The Cost Of JavaScript in 2023
addyosmani
31
4.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
353
29k
How to Ace a Technical Interview
jacobian
274
23k
Gamification - CAS2011
davidbonilla
78
4.9k
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)