Lock in $30 Savings on PRO—Offer Ends Soon! ⏳
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Flutterで簡単なアプリを作ってみる
Search
okinari
October 10, 2018
Technology
0
24
Flutterで簡単なアプリを作ってみる
okinari
October 10, 2018
Tweet
Share
More Decks by okinari
See All by okinari
AWS Lambda(+API Gateway)でバイナリを扱う話
okinari
0
87
僕の家からリモコンが消えた話(NatureRemoについて)
okinari
0
60
コンストラクタ、知ってますよね?
okinari
1
100
スマートスピーカーのすゝめ
okinari
0
47
最近のNAS製品事情
okinari
0
63
Webマーケティングとは?
okinari
0
38
エンジニアにも知ってほしいWebマーケティングの世界
okinari
2
380
データ収集のすゝめ
okinari
1
300
FlutterをWEBエンジニアが扱ってみたお話
okinari
0
460
Other Decks in Technology
See All in Technology
安いGPUレンタルサービスについて
aratako
2
2.7k
非CUDAの悲哀 〜Claude Code と挑んだ image to 3D “Hunyuan3D”を EVO-X2(Ryzen AI Max+395)で動作させるチャレンジ〜
hawkymisc
1
160
多様なデジタルアイデンティティを攻撃からどうやって守るのか / 20251212
ayokura
0
390
MLflowで始めるプロンプト管理、評価、最適化
databricksjapan
1
110
Playwrightのソースコードに見る、自動テストを自動で書く技術
yusukeiwaki
13
5.1k
打 造 A I 驅 動 的 G i t H u b ⾃ 動 化 ⼯ 作 流 程
appleboy
0
220
A Compass of Thought: Guiding the Future of Test Automation ( #jassttokai25 , #jassttokai )
teyamagu
PRO
1
250
【AWS re:Invent 2025速報】AIビルダー向けアップデートをまとめて解説!
minorun365
4
490
形式手法特論:CEGAR を用いたモデル検査の状態空間削減 #kernelvm / Kernel VM Study Hokuriku Part 8
ytaka23
2
450
学習データって増やせばいいんですか?
ftakahashi
2
290
意外とあった SQL Server 関連アップデート + Database Savings Plans
stknohg
PRO
0
300
手動から自動へ、そしてその先へ
moritamasami
0
290
Featured
See All Featured
For a Future-Friendly Web
brad_frost
180
10k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
17k
Making Projects Easy
brettharned
120
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.2k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
720
YesSQL, Process and Tooling at Scale
rocio
174
15k
The World Runs on Bad Software
bkeepers
PRO
72
12k
Documentation Writing (for coders)
carmenintech
76
5.2k
How to Ace a Technical Interview
jacobian
280
24k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.3k
Faster Mobile Websites
deanohume
310
31k
Music & Morning Musume
bryan
46
7k
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)