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
23
Flutterで簡単なアプリを作ってみる
okinari
October 10, 2018
Tweet
Share
More Decks by okinari
See All by okinari
AWS Lambda(+API Gateway)でバイナリを扱う話
okinari
0
77
僕の家からリモコンが消えた話(NatureRemoについて)
okinari
0
58
コンストラクタ、知ってますよね?
okinari
1
100
スマートスピーカーのすゝめ
okinari
0
45
最近のNAS製品事情
okinari
0
59
Webマーケティングとは?
okinari
0
35
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
380
データ収集のすゝめ
okinari
1
290
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
450
Other Decks in Technology
See All in Technology
「AI駆動PO」を考えてみる - 作る速さから価値のスループットへ:検査・適応で未来を開発 / AI-driven product owner. scrummat2025
yosuke_nagai
3
820
プロダクトのコードから見るGoによるデザインパターンの実践 #go_night_talk
bengo4com
1
2.4k
エンタメとAIのための3Dパラレルワールド構築(GPU UNITE 2025 特別講演)
pfn
PRO
0
120
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
110
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
11
79k
業務効率化をさらに加速させる、ノーコードツールとStep Functionsのハイブリッド化
smt7174
2
130
成長自己責任時代のあるきかた/How to navigate the era of personal responsibility for growth
kwappa
4
310
M5製品で作るポン置きセルラー対応カメラ
sayacom
0
180
Shirankedo NOCで見えてきたeduroam/OpenRoaming運用ノウハウと課題 - BAKUCHIKU BANBAN #2
marokiki
0
180
AIツールでどこまでデザインを忠実に実装できるのか
oikon48
6
3.3k
from Sakichi Toyoda to Agile
kawaguti
PRO
1
110
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
Featured
See All Featured
Docker and Python
trallard
46
3.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Building a Modern Day E-commerce SEO Strategy
aleyda
43
7.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
45
2.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
238
140k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
140
34k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
The Pragmatic Product Professional
lauravandoore
36
6.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)