Flutter x Graph

flutter_charts について、まとめた LT です

第2回 FlutterGakkai https://fluttergakkai.connpass.com/event/248999/ で登壇しました

Transcript

1. Flutter x Graph ୈ2ճ FlutterG a kk a i 4geru
2. ࣗݾ঺հ ໊લɿ͛͠Δ(@_4geru) ձࣾɿϚωʔϑΥϫʔυ ࢓ࣄɿWebΤϯδχΞ(ϑϩϯτ / όοΫ) Flutterྺɿ5ϲ݄(2022/03~) झຯɿΧϝϥ / μΠϏϯά
3. ࣗݾ঺հ
4. ࠓճ࿩͢͜ͱ 💣 charts_ f lutter ʹ͍ͭͯ 💣 αϯϓϧίʔυ class ߏ੒ 💣 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ
5. ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 💣 αϯϓϧίʔυ class ߏ੒ 💣 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ
7. ɾGoogle ͕ఏڙ͍ͯ͠Δ άϥϑදࣔͷϥΠϒϥϦ ɹɾhttps://github.com/google/charts ɾެࣜͷαϯϓϧίʔυ͕ॆ࣮͍ͯ͠Δ 
 ɹɾhttps://google.github.io/charts/ f lutter/gallery.html chart_ f lutter ʹ͍ͭͯ
8. ެࣜͷαϯϓϧ ͕ਖ਼ٛ
9. αϯϓϧίʔυʹ͍ͭͯ
10. ɾcharts_ f lutter/example/lib ҎԼʹ 
 αϯϓϧίʔυ͕͋Γ·͢ ɾ๮άϥϑΛಡΈ·͢ αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
11. ɾݺͼग़͠ https://github.com/google/charts/blob/master/charts_ f lutter/example/lib/bar_chart/ bar_gallery.dart#L40-L45 SampleBarChart Ͱ͸ɺfactory Λ࢖ͬͯද͍ࣔͯ͠Δ αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
12. ɾσʔλ࡞੒ https://github.com/google/charts/blob/master 
 /charts_ f lutter/example/lib/bar_chart/simple.dart 
 #L42-L66 chart.Series<Model, String> Λฦ͍ͯ͠Δ αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
13. ɾModel class https://github.com/google/charts/blob/master/charts_ f lutter/example/lib/bar_chart/simple.dart#L99- L104 αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
14. ɾUIදࣔ https://github.com/google/charts/blob/master/charts_ f lutter/example/lib/bar_chart/simple.dart#L99-L104 άϥϑʹΑͬͯɺcharts.BarChart / PieChart ͳͲΛઃఆ͢Δ αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ
15. ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 άϥϑΛ࡞Δ class ߏ੒ 💣 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ
16. ɾొ৔ਓ෺ ɾParent View classɿ৘ใΛ؅ཧ͢Δ ɾModel classɿσʔλΛ؅ཧ͢Δ ɾChart View classɿάϥϑΛ؅ཧ͢Δ ͔͜͜Β࿩͢ίʔυʹ͍ͭͯ
17. ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 αϯϓϧίʔυ class ߏ੒ 🔥 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ
18. ɾొ৔ਓ෺ ɾParent View class ɾChart View class ɾModel class ๮άϥϑͱԁάϥϑ
19. ɾొ৔ਓ෺ ɾParent View class ɾσʔλͷ࡞੒ ɾ഑৭ͷઃఆ ɾModel class ɾChart View class ๮άϥϑͱԁάϥϑ
20. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾ҆৺ͷ Model class ɾChart View class ๮άϥϑͱԁάϥϑ
21. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾbuild Ͱ series ͷॳظԽ ɾdata͔ΒσʔλΛ࡞Δؔ਺͕͋Δ ๮άϥϑͱԁάϥϑ
22. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾ๮άϥϑͱԁάϥϑΛදࣔ͢Δ ɾ๮άϥϑͷॎԣ͸ vertical: true / false ๮άϥϑͱԁάϥϑ
23. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾseries Λ૿΍͢ ๮άϥϑͱԁάϥϑ
24. Series Λ૿΍͢ ɾදࣔσʔλΛ૿΍͢ ɾԁάϥϑҎ֎͸ Series Λ૿ͤΔ ɾੵΈ্͛๮άϥϑ͕දݱͰ͖Δ
25. ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 αϯϓϧίʔυ class ߏ੒ 🔥 ๮άϥϑ / ԁάϥϑ 🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ
26. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
27. ɾొ৔ਓ෺ ɾParent View class ɾંΕઢάϥϑͱλΠϜϥΠϯνϟʔτͷ 
 σʔλ͕ҧ͏ ɾModel class ɾChart View class ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
28. ɾొ৔ਓ෺ ɾParent View class ɾkey / date Ͱҧ͏ num / DateTime ܕͰѻ͏ ɾModel class ɾChart View class ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
29. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾંΕઢάϥϑ / λΠϜϥΠϯνϟʔτ 
 (int / DateTime)Ͱσʔλܕ͕ҧ͏ ɾChart View class ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
30. ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾLineChart / TimeSeriesChart ͰมΘΔ ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ
31. ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 αϯϓϧίʔυ class ߏ੒ 🔥 ๮άϥϑ / ԁάϥϑ 🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 🔥 ෳ߹άϥϑ
32. ෳ߹άϥϑʢαϯϓϧίʔυʣ
33. ɾϝΠϯʹΑΓάϥϑ͕มΘΔ ɾOrdinalComboChart ͸ List<common.Series<dynamic, String>> ɾ NumericComboChart ͸ List<common.Series<dynamic, num>> ෳ߹άϥϑ Build defaultRenderer customSeriesRenderer s ordinal_bar_line OrdinalComboChart BarRendererCon f ig LineRendererCon f ig numeric_line_bar NumericComboChart LineRendererCon f ig BarRendererCon f ig numeric_line_point NumericComboChart LineRendererCon f ig PointRendererCon f ig date_time_line_point TimeSeriesChart LineRendererCon f ig PointRendererCon f ig scatter_plot_line ScatterPlotChart PointRendererCon f ig LineRendererCon f ig
34. ɾઃఆํ๏ 1. customSeriesRenders ͰΧελϜදࣔ͢Δ 
 chart ͷ type Λઃఆ͢Δ 2. customRenderId ͰΧελϜද͍ࣔͨ͠ID 
 Λࢦఆ͢Δ ෳ߹άϥϑ
35. ෳ߹άϥϑ ɾઃఆํ๏ 1. customSeriesRenders ͰΧελϜදࣔ͢Δ 
 chart ͷ type Λઃఆ͢Δ 2. customRenderId ͰΧελϜද͍ࣔͨ͠ID 
 Λࢦఆ͢Δ 3. ը૾Λඳը͢Δ Series ʹ setAttribute Ͱ 
 ΧελϜද͍ࣔͨ͠ID Λࢦఆ͢Δ
36. ɾ໨੝(Axes) / ຌྫ(Legends) / ڍಈ(Behaviors) / ΞΫηγϏϦςΟ(a11y) / ଞݴޠ(i18n) ͳͲͷྫ΋ ͋Γ·͢ɻ ɾchart_ f lutter ͸ Google ͷϥΠϒϥϦͰ͕͢ɺ f l_chart ͳͲͷผͷύοέʔδ΋͋Γ·͢ɻͥͻ ͞·͟·ͳϥΠϒϥϦͰ༡ΜͰ͍ͩ͘͞ɻ ɾOSSͳͷͰɺ·ͩ଍Γͳ͍෦෼౳͋Ε͹ɺͲΜͲΜ contribute νϟϨϯδ͠·͠ΐ͏ɻ ࠷ޙʹ
37. Let’s enjoy your hacking life.