Flutterのあれこれ

Flutterの歴史やできることをまとめてみました。

Transcript

1. Flutterͷ͋Ε͜Ε ࠤ౻ॣ 2023-10-13
2. What is Flutter?
3. • Google͕։ൃͨ͠ϑϦʔͰΦʔϓϯιʔεͷSDK • ΫϩεϓϥοτϑΥʔϜΞϓϦͷ։ൃ͕Ͱ͖Δ (Android / iOS / Web / Windows / macOS / Linux/visionOS?) • FlutterΞϓϦ͸DartݴޠͰɺFlutterͷΤϯδϯ͸C++Ͱॻ͔Ε͍ͯΔ • GitHubͷStarϥϯΩϯά19Ґ(10/13ݱࡏ) • ޷Έʹ߹ͬͨIDE͕࢖͑Δ (VSCode, Android Studio,Intellij) https://ja.wikipedia.org/wiki/Flutter# https://github.com/EvanLi/Github- Ranking/blob/master/Top100/Top-100- stars.md
4. ඒ༰ࣨɹ༧໿ΞϓϦ ҩྍؔ܎ͷϚονϯά εϚʔτՈి ϚΠΧʔ؅ཧ Ϛοϓ
5. https://docs. f lutter.dev/dash Who is Dash?
6. History
7. initial commit (2015) https://github.com/ f lutter/ f lutter/tree/7b0bbdbe66067295c4503eebde53b2ebf82e1764
8. Before Flutter Part1 ʲSkyʳ Flutterͷલ਎ɻChromeͰಈ͘ߴ଎ϨϯμϦϯάΤϯδϯͷര஀ɻ ʲRazorʳ ҎԼΛ࡟ͬͯύϑΥʔϚϯε޲্ɻ(HTMLύʔε:19x,ελΠϧ࠶ܭࢉ3.7x଎͘ͳͬͨ) ɾཁૉݻ༗ͷղੳͱdocument.writeϝιουͷ ɾCSSηϨΫλ ɾ஗͍ॲཧʢϑϩʔτɺςʔϒϧɺϚϧνΧϥϜɺॎॻ͖Ϟʔυʣ ʲWebΧελϚʔͱͷର࿩ʳ ɾεϨουԽ͞ΕͨhtmlύʔαʔʹJSจࣈྻΛ௨͢ํ๏͸ͳ͍ ɾBlinkεέδϡʔϦϯά ɾ࠷খݶͷ࠶ඳը ʲBravoʳ ɾURL͔ΒJavaScriptίʔυΛϑΣονͯ͠ɺHTMLΛհͣ͞ʹDOMΛղऍ͠ɺOpenGLͷAPIΛୟ͘ͱ͍͏ϨΠΞ΢τϞσϧͷݕ౼ Google͸Chrome/Chromiumʹ࢖༻͢Δϒϥ΢βΤϯδϯΛɺWebKit͔ΒϑΥʔΫ͞ΕͨBlink(ϨϯμϦϯάΤϯδϯ)ʹมߋ 2013 8݄ 2013-2014 2014 10-11݄ 2014 12݄ https://docs.google.com/presentation/d/ 1Yhch7KkNC5wbkcsc9p5XkWouEha2hex65l6Pca_SqkM/edit?usp=sharing
9. Before Flutter Part2 ʲEften3→Flutterʳ όάͷվम͕ऴΘΓE ff tenͱ͍͏ϓϩδΣΫτ໊͕FlutterʹมΘΔ ʲεέʔϧΞοϓʳ Navigatorͱ͔Widgetͷ֓೦͕ొ৔ʂ ʲGood Bye DOM, Hello CanvasAPIʳ DOMͱ͔Render TreeͰඳը͞Ε͍͚ͨͨͲɺࣗલͰඳըγεςϜΛಋೖ ʲDart Summit,HelloSky!ʳ ʲE ff enϦΞΫςΟϒɾϑϨʔϜϫʔΫ࣮ݧʳ ReactʹӨڹ͞ΕͨΒ͍͠ ʲJavaScript͔Βͷ୤٫ʳ JavaScript͸WebͷΤίγεςϜʹݶΔͷͰɺ਺͋Δݴޠͷத͔ΒDartΛબ୒ ʲSky Frameworkʳ 2015 4݄ 2015 5݄ 2015 6݄ 2015 ?݄ 2015 3݄ 2015 2݄ 2014 12݄
10. Code
13. Swift UI Flutter
14. Web
16. • Firebase Hosting,Cloud f lare Pages,GitHub PagesͳͲʹ؆୯ʹHosting͕Ͱ͖Δ👍 • CanvasͰͷϨϯμϦϯά͕஗͍👎 • JSͷϥΠϒϥϦ΋࢖༻Ͱ͖Δ👍 • SEOରࡦ͕΍Γʹ͍͘🤔 • WebAssemblyʹΑͯύϑΥʔϚϯεվળʹظ଴💙 • Web EmbeddedʹΑͬͯElementͷҰͭͱͯ͠૊ΈࠐΊΔ👍 https://zenn.dev/bs_kansai/articles/e5d7ad28baab59 https://zenn.dev/heyhey1028/articles/abd818ca760e33 pros & cons
17. https://gallery. f lutter.dev/ https://gallery. f lutter.dev/
18. Game
19. https://github.com/renancaraujo/trex- f lame https://github.com/ f lutter/codelabs
20. Flame • FlutterͷήʔϜΤϯδϯϞδϡʔϧ • γϯϓϧͰߴޮ཰ͳήʔϜϧʔϓɺϢʔβʔͷೖྗɺը૾ɺεϓϥΠτγʔτɺΞχ ϝʔγϣϯɺিಥ൑ఆɺFCS(Flame Component System)ͱݺ͹ΕΔίϯϙʔωϯ τͷ࢓૊Έ • Flame͸ωοτϫʔΫػೳΛఏڙ͠ͳ͍ͨΊɺNakama΍FirebaeͳͲͷͺέʔδΛ ར༻͢Δ͜ͱΛ͓͢͢Ί(ΦϯϥΠϯήʔϜͷ࣮૷ͳͲʹඞཁ) • Discordʹͯٞ࿦͞Ε͍ͯΔ https://docs. f lame-engine.org/latest/
21. Comment • ઙ͘޿͘৮ͬͯΈͯɺFlutterΛʮͪΐͬͱʯ஌͍ͬͯΕ͹ɺ৭ʑͰ͖ΔΜͩͳ͋ͱ ײͨ͡ • f irst commit·Ͱ3೥ͱ͍͏εϐʔυײ͕͍͢͝(ଞͷϑϨʔϜϫʔΫͷ͜ͱ͸Α͘஌ Βͳ͍͕) • Web΍Gameʹؔͯ͠΋ɺ͜Ε͔ΒͲΜͲΜΞοϓσʔτ͞Εͯੑೳ͕޲্͢Δ͜ ͱʹظ଴Ͱ͖Δ • ৭ʑͰָ͖͍ͯ͠ͷͰFlutterΛษڧ͢ΔϞνϕ্͕͕Δ
22. Thank you for listening🍵