Flutter x Graph - Speaker Deck

Slide 1

Slide 1 text

Flutter x Graph ୈ2ճ FlutterG a kk a i 4geru

Slide 2

Slide 2 text

ࣗݾ঺հ ໊લɿ͛͠Δ(@_4geru) ձࣾɿϚωʔϑΥϫʔυ ࢓ࣄɿWebΤϯδχΞ(ϑϩϯτ / όοΫ) Flutterྺɿ5ϲ݄(2022/03~) झຯɿΧϝϥ / μΠϏϯά

Slide 3

Slide 3 text

ࣗݾ঺հ

Slide 4

Slide 4 text

ࠓճ࿩͢͜ͱ 💣 charts_ f lutter ʹ͍ͭͯ 💣 αϯϓϧίʔυ class ߏ੒ 💣 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ

Slide 5

Slide 5 text

ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 💣 αϯϓϧίʔυ class ߏ੒ 💣 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

ɾGoogle ͕ఏڙ͍ͯ͠Δ άϥϑදࣔͷϥΠϒϥϦ ɹɾhttps://github.com/google/charts ɾެࣜͷαϯϓϧίʔυ͕ॆ࣮͍ͯ͠Δ   ɹɾhttps://google.github.io/charts/ f lutter/gallery.html chart_ f lutter ʹ͍ͭͯ

Slide 8

Slide 8 text

ެࣜͷαϯϓϧ ͕ਖ਼ٛ

Slide 9

Slide 9 text

αϯϓϧίʔυʹ͍ͭͯ

Slide 10

Slide 10 text

ɾcharts_ f lutter/example/lib ҎԼʹ   αϯϓϧίʔυ͕͋Γ·͢ ɾ๮άϥϑΛಡΈ·͢ αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

Slide 11

Slide 11 text

ɾݺͼग़͠ https://github.com/google/charts/blob/master/charts_ f lutter/example/lib/bar_chart/ bar_gallery.dart#L40-L45 SampleBarChart Ͱ͸ɺfactory Λ࢖ͬͯද͍ࣔͯ͠Δ αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

Slide 12

Slide 12 text

ɾσʔλ࡞੒ https://github.com/google/charts/blob/master   /charts_ f lutter/example/lib/bar_chart/simple.dart   #L42-L66 chart.Series Λฦ͍ͯ͠Δ αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

Slide 13

Slide 13 text

ɾModel class https://github.com/google/charts/blob/master/charts_ f lutter/example/lib/bar_chart/simple.dart#L99- L104 αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

Slide 14

Slide 14 text

ɾUIදࣔ https://github.com/google/charts/blob/master/charts_ f lutter/example/lib/bar_chart/simple.dart#L99-L104 άϥϑʹΑͬͯɺcharts.BarChart / PieChart ͳͲΛઃఆ͢Δ αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

Slide 15

Slide 15 text

ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 άϥϑΛ࡞Δ class ߏ੒ 💣 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ

Slide 16

Slide 16 text

ɾొ৔ਓ෺ ɾParent View classɿ৘ใΛ؅ཧ͢Δ ɾModel classɿσʔλΛ؅ཧ͢Δ ɾChart View classɿάϥϑΛ؅ཧ͢Δ ͔͜͜Β࿩͢ίʔυʹ͍ͭͯ

Slide 17

Slide 17 text

ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 αϯϓϧίʔυ class ߏ੒ 🔥 ๮άϥϑ / ԁάϥϑ 💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ

Slide 18

Slide 18 text

ɾొ৔ਓ෺ ɾParent View class ɾChart View class ɾModel class ๮άϥϑͱԁάϥϑ

Slide 19

Slide 19 text

ɾొ৔ਓ෺ ɾParent View class ɾσʔλͷ࡞੒ ɾ഑৭ͷઃఆ ɾModel class ɾChart View class ๮άϥϑͱԁάϥϑ

Slide 20

Slide 20 text

ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾ҆৺ͷ Model class ɾChart View class ๮άϥϑͱԁάϥϑ

Slide 21

Slide 21 text

ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾbuild Ͱ series ͷॳظԽ ɾdata͔ΒσʔλΛ࡞Δؔ਺͕͋Δ ๮άϥϑͱԁάϥϑ

Slide 22

Slide 22 text

ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾ๮άϥϑͱԁάϥϑΛදࣔ͢Δ ɾ๮άϥϑͷॎԣ͸ vertical: true / false ๮άϥϑͱԁάϥϑ

Slide 23

Slide 23 text

ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾseries Λ૿΍͢ ๮άϥϑͱԁάϥϑ

Slide 24

Slide 24 text

Series Λ૿΍͢ ɾදࣔσʔλΛ૿΍͢ ɾԁάϥϑҎ֎͸ Series Λ૿ͤΔ ɾੵΈ্͛๮άϥϑ͕දݱͰ͖Δ

Slide 25

Slide 25 text

ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 αϯϓϧίʔυ class ߏ੒ 🔥 ๮άϥϑ / ԁάϥϑ 🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 💣 ෳ߹άϥϑ

Slide 26

Slide 26 text

ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

Slide 27

Slide 27 text

ɾొ৔ਓ෺ ɾParent View class ɾંΕઢάϥϑͱλΠϜϥΠϯνϟʔτͷ   σʔλ͕ҧ͏ ɾModel class ɾChart View class ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

Slide 28

Slide 28 text

ɾొ৔ਓ෺ ɾParent View class ɾkey / date Ͱҧ͏ num / DateTime ܕͰѻ͏ ɾModel class ɾChart View class ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

Slide 29

Slide 29 text

ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾંΕઢάϥϑ / λΠϜϥΠϯνϟʔτ   (int / DateTime)Ͱσʔλܕ͕ҧ͏ ɾChart View class ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

Slide 30

Slide 30 text

ɾొ৔ਓ෺ ɾParent View class ɾModel class ɾChart View class ɾLineChart / TimeSeriesChart ͰมΘΔ ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

Slide 31

Slide 31 text

ࠓճ࿩͢͜ͱ 🔥 charts_ f lutter ʹ͍ͭͯ 🔥 αϯϓϧίʔυ class ߏ੒ 🔥 ๮άϥϑ / ԁάϥϑ 🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ 🔥 ෳ߹άϥϑ

Slide 32

Slide 32 text

ෳ߹άϥϑʢαϯϓϧίʔυʣ

Slide 33

Slide 33 text

ɾϝΠϯʹΑΓάϥϑ͕มΘΔ ɾOrdinalComboChart ͸ List> ɾ NumericComboChart ͸ List> ෳ߹άϥϑ 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

Slide 34

Slide 34 text

ɾઃఆํ๏ 1. customSeriesRenders ͰΧελϜදࣔ͢Δ   chart ͷ type Λઃఆ͢Δ 2. customRenderId ͰΧελϜද͍ࣔͨ͠ID   Λࢦఆ͢Δ ෳ߹άϥϑ

Slide 35

Slide 35 text

ෳ߹άϥϑ ɾઃఆํ๏ 1. customSeriesRenders ͰΧελϜදࣔ͢Δ   chart ͷ type Λઃఆ͢Δ 2. customRenderId ͰΧελϜද͍ࣔͨ͠ID   Λࢦఆ͢Δ 3. ը૾Λඳը͢Δ Series ʹ setAttribute Ͱ   ΧελϜද͍ࣔͨ͠ID Λࢦఆ͢Δ

Slide 36

Slide 36 text

ɾ໨੝(Axes) / ຌྫ(Legends) / ڍಈ(Behaviors) / ΞΫηγϏϦςΟ(a11y) / ଞݴޠ(i18n) ͳͲͷྫ΋ ͋Γ·͢ɻ ɾchart_ f lutter ͸ Google ͷϥΠϒϥϦͰ͕͢ɺ f l_chart ͳͲͷผͷύοέʔδ΋͋Γ·͢ɻͥͻ ͞·͟·ͳϥΠϒϥϦͰ༡ΜͰ͍ͩ͘͞ɻ ɾOSSͳͷͰɺ·ͩ଍Γͳ͍෦෼౳͋Ε͹ɺͲΜͲΜ contribute νϟϨϯδ͠·͠ΐ͏ɻ ࠷ޙʹ

Slide 37

Slide 37 text

Let’s enjoy your hacking life.