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
한번 쓰고 우려먹는 플러터
Search
Ben
July 27, 2019
Programming
0
150
한번 쓰고 우려먹는 플러터
Ben
July 27, 2019
Tweet
Share
More Decks by Ben
See All by Ben
2019년의 플러터: 모바일을 넘어
justive
1
39
Other Decks in Programming
See All in Programming
Benchmark
sysong
0
280
エンジニア向け採用ピッチ資料
inusan
0
180
ペアプロ × 生成AI 現場での実践と課題について / generative-ai-in-pair-programming
codmoninc
0
230
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
すべてのコンテキストを、 ユーザー価値に変える
applism118
2
1.1k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
1
720
アンドパッドの Go 勉強会「 gopher 会」とその内容の紹介
andpad
0
280
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
1.8k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
170
ReadMoreTextView
fornewid
1
490
Discover Metal 4
rei315
2
110
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
0
450
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
17
950
Optimizing for Happiness
mojombo
379
70k
Statistics for Hackers
jakevdp
799
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.8k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.8k
How STYLIGHT went responsive
nonsquared
100
5.6k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
500
Why Our Code Smells
bkeepers
PRO
337
57k
We Have a Design System, Now What?
morganepeng
53
7.7k
Transcript
ೠߣॳҊ ۰ݡח ۞ఠ ٘݃ੋ٘() ӣ࢚
ӣ࢚ ࣽୌೱҮ ੌ߈ਗ ஹೊఠ Ӓېझ ҕ ٘݃ੋ٘() SW োҳࣗ োҳਗ
JUSTIVE Google I/O Extended Pangyo Flutter in 2019: Beyond Mobile
[email protected]
Google I/O Extended Suwon 2019֙ ۞ఠ: ݽ߄ੌਸ ֈয Unity / Electron / Flutter Vue.js /Physics Simulation / Android etc..
۞ఠۆ Dart ҳӖ Fuchsia ۽झ ۖಬ Hot reload Hot restart
۞ఠۆ? Flutter is Google’s portable UI toolkit for building beautiful,
natively-compiled applications for mobile, web, and desktop from a single codebase.
Native Performance Theming Widgets Rendering Animation Painting Gestures Foundation Framework(Dart)
Engine(C++) Skia Dart VM Text Android/iOS runner Hardware
Stateful hot reload
Material Design Material Theming Cupertino Design
ࢶ UI b.setColor(red) b.clearChildren() ViewC c3 = new ViewC(...) b.add(c3)
return ViewB( color: red, child: ViewC(...), ) Imperative style Declarative style
None
নೠ ѐߊ ജ҃ Windows MacOS Linux ChromeOS Android Studio Visual
Studio Code IntelliJ
Dart?
Dart ݽ؍ - ݣ౭ ಁ۞ য JavaScript / Java /
C# যܳ ೧ࠁ࣑ݶ য࢝ೞ ঋਸ য Flutterח UIࠗఠ ۽ө Dart۽ ҳࢿ
Dart Hello world main( ) { var words = ['Hello',
'world']; print('${words.join(", ")}!'); }
Dart ёೱ ېझ ё ࢚ࣘ ङച ੋఠಕझ ೣࣻഋ ۽Ӓې߁
ۈ Ҋରೣࣻ ۽ઉ ఋੑ ఋੑ Ѩࢎ ઁ֎ܼ झ݀ য ಞউೣ ఋੑ য উх
۽झ ۖಬ
None
Android iOS Web Raspberry pi(Android Things) Windows MacOS Linux …
Android iOS Web Raspberry pi(Android Things) Windows MacOS Linux …
Android iOS Web Raspberry pi(Android Things) Windows MacOS Linux …
Flutter for web
Themeing Widgets Rendering Animation Painting Gestures Foundation Framework(Dart) Browser(C++, JS)
Canvas DOM Skia ূਸ ܖ ঋҊ DOM / HTML5 Canvasܳ ਊೞৈ ۪؊݂ (HTML/CSS -> Canvas (fallback) Dart2js compiler Your code JS Engine
Flutter for web https://flutter-web-demo.firebaseapp.com/#/ >Flutter : new web project >pub
global activate stagehand >pub global activate webdev
mobile web https://github.com/flutter/flutter https://github.com/flutter/flutter_web
dependencies: flutter: sdk: flutter … dependencies: flutter_web: flutter_web_ui: … pubspec.yaml
mobileRepo/lib -> webRepo/lib
import 'package:flutter/material.dart'; import ‘package:flutter_web/material.dart’;
for Material Icons /web/assets/FontManifest.json [ { “family:”MaterialIcons”, “fonts”:[ { “asset”:”https://fonts.gstatic.com/s/materialicons/v42/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2"
} ] } ]
main() async{ await ui.webOnlyInitializePlatform( assetManager: engine.AssetManager( assetDir: “asset_dir” ) );
app.main(); }
Animation Network Gesture Route
None
Adaptive Components э ਗٜ۽ ܲ ࠙ܳ ٜ݅ӝ +
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet image title subtitle Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet
Adaptive Components झѱ౭ܳ ೖೞࣁਃ styles : color / padding /
alignment … -> э ਤઇ layouts : column / stack … -> ܲ ਤઇ
Adaptive Components MediaQuery.of(context). aspectRatio width height
None
Interactions ::hover
Interactions Listener onPointerEnter onPointerExit onPointerDown onPointerUp onPointerMove
Interactions RawKeyboardListener RawKeyboardListener( focusNode: _focusNode, onKey: (RawKeyEvent event){ … }
)
None
Q & A
[email protected]
хࢎפ