Flutter 勉強会20190220

Flutter 勉強会用資料

1. FlutterwUI
h_takesue 2019/2/20

2. 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ÆÌ{

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

4. ‰C¥Ï™

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

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

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

7. å Òåæ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”{

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

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

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

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

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

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

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

15. 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

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

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

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

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

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

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

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

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

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

24. ¼^

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

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

26. DEMO

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

28. ¹”µ†Ì

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

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

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

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

33. òÝ

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

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

36. 4˜“