$30 off During Our Annual Pro Sale. View Details »

Flutter x Graph

Flutter x Graph

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

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

4geru sakisaka

July 22, 2022
Tweet

More Decks by 4geru sakisaka

Other Decks in Technology

Transcript

  1. Flutter x Graph
    ୈ2ճ FlutterG
    a
    kk
    a
    i


    4geru

    View Slide

  2. ࣗݾ঺հ
    ໊લɿ͛͠Δ(@_4geru)


    ձࣾɿϚωʔϑΥϫʔυ


    ࢓ࣄɿWebΤϯδχΞ(ϑϩϯτ / όοΫ)


    Flutterྺɿ5ϲ݄(2022/03~)


    झຯɿΧϝϥ / μΠϏϯά

    View Slide

  3. ࣗݾ঺հ

    View Slide

  4. ࠓճ࿩͢͜ͱ
    💣 charts_
    f
    lutter ʹ͍ͭͯ


    💣 αϯϓϧίʔυ class ߏ੒


    💣 ๮άϥϑ / ԁάϥϑ


    💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ


    💣 ෳ߹άϥϑ

    View Slide

  5. ࠓճ࿩͢͜ͱ
    🔥 charts_
    f
    lutter ʹ͍ͭͯ


    💣 αϯϓϧίʔυ class ߏ੒


    💣 ๮άϥϑ / ԁάϥϑ


    💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ


    💣 ෳ߹άϥϑ

    View Slide

  6. View Slide

  7. ɾGoogle ͕ఏڙ͍ͯ͠Δ άϥϑදࣔͷϥΠϒϥϦ


    ɹɾhttps://github.com/google/charts


    ɾެࣜͷαϯϓϧίʔυ͕ॆ࣮͍ͯ͠Δ

    ɹɾhttps://google.github.io/charts/
    f
    lutter/gallery.html
    chart_
    f
    lutter ʹ͍ͭͯ

    View Slide

  8. ެࣜͷαϯϓϧ


    ͕ਖ਼ٛ

    View Slide

  9. αϯϓϧίʔυʹ͍ͭͯ

    View Slide

  10. ɾcharts_
    f
    lutter/example/lib ҎԼʹ

    αϯϓϧίʔυ͕͋Γ·͢


    ɾ๮άϥϑΛಡΈ·͢
    αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

    View Slide

  11. ɾݺͼग़͠


    https://github.com/google/charts/blob/master/charts_
    f
    lutter/example/lib/bar_chart/
    bar_gallery.dart#L40-L45


    SampleBarChart Ͱ͸ɺfactory Λ࢖ͬͯද͍ࣔͯ͠Δ
    αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

    View Slide

  12. ɾσʔλ࡞੒


    https://github.com/google/charts/blob/master

    /charts_
    f
    lutter/example/lib/bar_chart/simple.dart

    #L42-L66


    chart.Series Λฦ͍ͯ͠Δ
    αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

    View Slide

  13. ɾModel class


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

    View Slide

  14. ɾUIදࣔ


    https://github.com/google/charts/blob/master/charts_
    f
    lutter/example/lib/bar_chart/simple.dart#L99-L104


    άϥϑʹΑͬͯɺcharts.BarChart / PieChart ͳͲΛઃఆ͢Δ
    αϯϓϧίʔυͷಡΈํʢ๮άϥϑʣ

    View Slide

  15. ࠓճ࿩͢͜ͱ
    🔥 charts_
    f
    lutter ʹ͍ͭͯ


    🔥 άϥϑΛ࡞Δ class ߏ੒


    💣 ๮άϥϑ / ԁάϥϑ


    💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ


    💣 ෳ߹άϥϑ

    View Slide

  16. ɾొ৔ਓ෺


    ɾParent View classɿ৘ใΛ؅ཧ͢Δ


    ɾModel classɿσʔλΛ؅ཧ͢Δ


    ɾChart View classɿάϥϑΛ؅ཧ͢Δ
    ͔͜͜Β࿩͢ίʔυʹ͍ͭͯ

    View Slide

  17. ࠓճ࿩͢͜ͱ
    🔥 charts_
    f
    lutter ʹ͍ͭͯ


    🔥 αϯϓϧίʔυ class ߏ੒


    🔥 ๮άϥϑ / ԁάϥϑ


    💣 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ


    💣 ෳ߹άϥϑ

    View Slide

  18. ɾొ৔ਓ෺


    ɾParent View class


    ɾChart View class


    ɾModel class
    ๮άϥϑͱԁάϥϑ

    View Slide

  19. ɾొ৔ਓ෺


    ɾParent View class


    ɾσʔλͷ࡞੒


    ɾ഑৭ͷઃఆ


    ɾModel class


    ɾChart View class
    ๮άϥϑͱԁάϥϑ

    View Slide

  20. ɾొ৔ਓ෺


    ɾParent View class


    ɾModel class


    ɾ҆৺ͷ Model class


    ɾChart View class
    ๮άϥϑͱԁάϥϑ

    View Slide

  21. ɾొ৔ਓ෺


    ɾParent View class


    ɾModel class


    ɾChart View class


    ɾbuild Ͱ series ͷॳظԽ


    ɾdata͔ΒσʔλΛ࡞Δؔ਺͕͋Δ
    ๮άϥϑͱԁάϥϑ

    View Slide

  22. ɾొ৔ਓ෺


    ɾParent View class


    ɾModel class


    ɾChart View class


    ɾ๮άϥϑͱԁάϥϑΛදࣔ͢Δ


    ɾ๮άϥϑͷॎԣ͸ vertical: true / false
    ๮άϥϑͱԁάϥϑ

    View Slide

  23. ɾొ৔ਓ෺


    ɾParent View class


    ɾModel class


    ɾChart View class


    ɾseries Λ૿΍͢
    ๮άϥϑͱԁάϥϑ

    View Slide

  24. Series Λ૿΍͢
    ɾදࣔσʔλΛ૿΍͢


    ɾԁάϥϑҎ֎͸ Series Λ૿ͤΔ


    ɾੵΈ্͛๮άϥϑ͕දݱͰ͖Δ

    View Slide

  25. ࠓճ࿩͢͜ͱ
    🔥 charts_
    f
    lutter ʹ͍ͭͯ


    🔥 αϯϓϧίʔυ class ߏ੒


    🔥 ๮άϥϑ / ԁάϥϑ


    🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ


    💣 ෳ߹άϥϑ

    View Slide

  26. ɾొ৔ਓ෺


    ɾParent View class


    ɾModel class


    ɾChart View class
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

    View Slide

  27. ɾొ৔ਓ෺


    ɾParent View class


    ɾંΕઢάϥϑͱλΠϜϥΠϯνϟʔτͷ

    σʔλ͕ҧ͏


    ɾModel class


    ɾChart View class
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

    View Slide

  28. ɾొ৔ਓ෺


    ɾParent View class


    ɾkey / date Ͱҧ͏ num / DateTime ܕͰѻ͏


    ɾModel class


    ɾChart View class
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

    View Slide

  29. ɾొ৔ਓ෺


    ɾParent View class


    ɾModel class


    ɾંΕઢάϥϑ / λΠϜϥΠϯνϟʔτ

    (int / DateTime)Ͱσʔλܕ͕ҧ͏


    ɾChart View class
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

    View Slide

  30. ɾొ৔ਓ෺


    ɾParent View class


    ɾModel class


    ɾChart View class


    ɾLineChart / TimeSeriesChart ͰมΘΔ
    ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ

    View Slide

  31. ࠓճ࿩͢͜ͱ
    🔥 charts_
    f
    lutter ʹ͍ͭͯ


    🔥 αϯϓϧίʔυ class ߏ੒


    🔥 ๮άϥϑ / ԁάϥϑ


    🔥 ંΕઢάϥϑ vs λΠϜϥΠϯνϟʔτ


    🔥 ෳ߹άϥϑ

    View Slide

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

    View Slide

  33. ɾϝΠϯʹΑΓάϥϑ͕มΘΔ


    ɾ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

    View Slide

  34. ɾઃఆํ๏


    1. customSeriesRenders ͰΧελϜදࣔ͢Δ

    chart ͷ type Λઃఆ͢Δ


    2. customRenderId ͰΧελϜද͍ࣔͨ͠ID

    Λࢦఆ͢Δ
    ෳ߹άϥϑ

    View Slide

  35. ෳ߹άϥϑ
    ɾઃఆํ๏


    1. customSeriesRenders ͰΧελϜදࣔ͢Δ

    chart ͷ type Λઃఆ͢Δ


    2. customRenderId ͰΧελϜද͍ࣔͨ͠ID

    Λࢦఆ͢Δ


    3. ը૾Λඳը͢Δ Series ʹ setAttribute Ͱ

    ΧελϜද͍ࣔͨ͠ID Λࢦఆ͢Δ

    View Slide

  36. ɾ໨੝(Axes) / ຌྫ(Legends) / ڍಈ(Behaviors) / ΞΫηγϏϦςΟ(a11y) / ଞݴޠ(i18n) ͳͲͷྫ΋
    ͋Γ·͢ɻ


    ɾchart_
    f
    lutter ͸ Google ͷϥΠϒϥϦͰ͕͢ɺ
    f
    l_chart ͳͲͷผͷύοέʔδ΋͋Γ·͢ɻͥͻ
    ͞·͟·ͳϥΠϒϥϦͰ༡ΜͰ͍ͩ͘͞ɻ


    ɾOSSͳͷͰɺ·ͩ଍Γͳ͍෦෼౳͋Ε͹ɺͲΜͲΜ contribute νϟϨϯδ͠·͠ΐ͏ɻ


    ࠷ޙʹ

    View Slide

  37. Let’s enjoy your


    hacking life.

    View Slide