Flutter 勉強会20190220

HiroakiTakesue 88 views 36 slides Feb 20, 2019
Slide 1
Slide 1 of 36
Slide 1
1
Slide 2
2
Slide 3
3
Slide 4
4
Slide 5
5
Slide 6
6
Slide 7
7
Slide 8
8
Slide 9
9
Slide 10
10
Slide 11
11
Slide 12
12
Slide 13
13
Slide 14
14
Slide 15
15
Slide 16
16
Slide 17
17
Slide 18
18
Slide 19
19
Slide 20
20
Slide 21
21
Slide 22
22
Slide 23
23
Slide 24
24
Slide 25
25
Slide 26
26
Slide 27
27
Slide 28
28
Slide 29
29
Slide 30
30
Slide 31
31
Slide 32
32
Slide 33
33
Slide 34
34
Slide 35
35
Slide 36
36

About This Presentation

Flutter 勉強会用資料


Slide Content

FlutterwUI
h_takesue 2019/2/20

Flutterqx
•Flutter¢Ñå¿»”£xzGooglet‘lo‰C^•hÑæ”Tm¦”Óï
¹”µwÞÌ çžÓæ­”³ãïÑè”Ü딫pK”{
•FlutterxAndroidiOS²ZwžÓæ­”³ãïw‰Ctb;^•oM”{
•FuchsiapxžÓæ­”³ãïw‰Cx tFlutter›b;`o昕oM”
•2018å12D4ÔzéïÅïp‰5^•hFlutter Live '18toz swYÜ[
qs”Flutter 1.0wææ”µUC¯^•h[5]{
•Fuchsia -> GoogleU‰C`oM”OS{Android OST’”VõQ’•”w
pxsMTqÚ^•oM”UzÙ´³ãÇï¬xqOÆÌ{

Flutterqx
•q Ýz«éµÓå¿ÄÑ¥”ÜwžÓæ­”
³ãï‰CÑè”Ü딫qMOÝÝ{

‰C¥Ï™

‰C¥Ï™
MacpxGVXüZoŽ<wµÂ¿Óqs”{
1.å ÒåæDLz???`
2.IDE;?

3.?????????;w;?

å ÒåæDLz͵è`
https://flutter.io/docs/get-started/install/macos
\\T’DL{
굏b (bash)
export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"

å ÒåæDLz???`
https://flutter.io/docs/get-started/install/macos
\\T?DL{
???b (bash)
export PATH="$PATH:[PATH_TO_FLUTTER_GIT_DIRECTORY]/flutter/bin"
²t

IUUQTqVUUFSJPEPDTHFUTUBSUFEJOTUBMMNBDPT

zqVUUFSEPDUPS¯ÚïÅ›æ–b”{

ÂïÓè”Ä›¡œpˆ”

ÂïÓè”Ä›¡œpˆ”
Óé´£«Ä› ýF^R`zžÓæ›Iˆ^d”q
\w‘OsžÓæUpVoM‡b{

´›»¿Ób”qz§¢ïÄUC‰^•oMX

ÂïÓè”Ä›¡œpˆ”

ÂïÓè”Ä›¡œpˆ”

rgwv•
main()T’‰zMyApp
¢Ÿ´¿ÄU\R

rgwv•
StatelessWidget›' `oM”{
Widget ïµ»ïµ›&bbuildÝ
¹¿Å[{
í“‹q`oMaterilalApp ïµ»
ïµ›&`oM”{
MaterilalAppxŽæå Òåæz
¾:w°m homet
MyHomePage  ïµ»ïµ›I`
oM”{

rgwv•
fluttert”Z” Widgetqx
Fluttert”Z”hØÏRAÉwb‚o{
Widgetw¯ÔxStatepg^•oS“z
StatefulWidget( Ý6K“)
q
StatelessWidget( Ý6s`)tüZ’•oM‡b{
->ReactVuewßQt„…° y

rgwv?
StatefullWidget›' `oM”{
???????ythis.??????

p s8=`oM”{
titile ?????wfinal
-> s8=?x
?^?sM{
?????\Rb?createState()
q`o_MyHomePageState()?
¡œpM”{

rgwv•
State›' `oM”{
ÝïÌ›[z s8={
[ݹ¿Å›[zfw¤p
setState()zfw¤pÝïÌ›
!Ë`oM”{
->\wsetState()w» Ûï¬p
yUIË ýU昕”

UI›Ï™b”{
\wݹ¿ÅxsetState]qtzy•”{
->Reactwrender()tìpb”

Scaffoldx,Š$sžÓæh؛ϙb”
appBar,body, bottomNavigationBar,
floatingActionButtonsrU;™^•o
M”{\•xMaterialÍ¿­”´p;™
^•oM”{

\w¤pCenter,Column,Textxb‚o
Widget›z| Z`oM”{
è ž¢Ä¢Ÿ´¿Äw¤q`ozText
¢Ÿ´¿Äsr›Ö•oMXwx
AndroidwViewî÷tÙM{
csst˜pb”‹wx¢Ÿ´¿ÄwÓéÍ
Ÿq`oƒb”{

onPressed  ÕïÄt0`oz
_incrementCounterݹ¿Å›ƒ`o
M”{
Reactswî÷tÙM{

rgwv•
widget›¯ïÙ”ÉïÄq”VõQ•yz
React,VuesqèQxôMq¥˜•”{

rgwv•
Õ”µqs”widgetå Òåæt
cupertinoå ÒåæUK“z\•›;M”wios, jw
UIqs”srå Òåæt0b” 6 YUž"{

¼^

?^
https://jsonplaceholder.typicode.com/photos
T?json?fetchz°at¯Ô^d”

https://github.com/H-takesue/flutterStudyFetch

DEMO

rgwv•
widget›¯ïÙ”ÉïÄq”VõQ•yz
React,VuesqèQxôMq¥˜•”{

¹”µ†Ì

Ù ïÄ
~Žæå Òåæw–;MO
Pubspec.yamlwdependencieståGzflutter package
get›îæb”{

Ù ïÄ
~jsonwÍ”µ
hiotÍ”µ`h‹w›©ßµÄb”q
¤å”ts”{
(¬ÜÅ©áÝïÄt‘”q)
factoryݹ¿Å›œi«åµ›^“z‡cmapt©ßµ
Äzfw ×«åµtÚ¿Ðï¬b”{

Ù ïÄ
~\RÌtîæ
reactwviewDidLoad,AndroidwonCreatet
ìpb”ݹ¿ÅxinitState

Ù ïÄ
~stylex??$ Bs`
Widgetw?????w????d
~ ÕïÄËïÅåzstatew “s`xreactw
ò®pðJs`{
Reactpwprops≒??????qsloM?{

òÝ

òÝ
•Õ”µ:Android, ¥Ý:React
•qtTXwegdetwŒÝ”UžA
•dartxjavaU {Z•y {Z”{
•React›webwH„T’HV Z`hò

òÝ
•osË”Å¢£žwAPI›r•X’M_Z”T
x°Ð*{<ˆpV”\q
•csswŒÝxþtqhsM{AndoridwUI build
tÅ`oM”

4˜“