## Preview: Two-dimensional scrolling in Flutter
note:
- What is "Two-dimensional scrolling"
- Why "Preview:" -> Coming soon in a future release of Flutter
- [youtube](https://www.youtube.com/watch?v=UDZ0LPQq-n8&list=PLjxrf2q8roU3LvrdR8Hv_phLrTj0xmjnD&index=13)
---
## Outline
- Video Introduction
- 即時市況與排行 Table
note:
- Why pick this topic？即時排行 Table
- Video length noly ~ 7 mins
- Not release yet -> do it yourself!
---
note:
- We don't actully have a widget for yet.
---
note:
- 等等，我們有 1-D scolling 的 Widget，如果...
- 是不是就可以收工回家啦～
- 大部分的 Case 也許適用，但某些 Case 可能有問題
---
note:
- 舉個例子
1. Multiple [ScrollNotification](https://api.flutter.dev/flutter/widgets/ScrollNotification-class.html) - viewports
2. Lazy loading, paramount to scrolling UI performance
3. ScrollBar -> vertical bar far away from horiztonal scroll view
4. Sync scroll position for multiple scroll view
5. diagonal movement: 支援對角線的滑動手勢
---
### Provide something better that doesn't have all these gotchas.
note:
- Back to topic, why create 2-D scrolling widget in Flutter.
- Even there are a lot of widgets in Flutter.
- Everything is Widget in Flutter development.
---
### Provide something better that doesn't have all these gotchas.
note:
最常發生於 Destop or Web on Destop, 當在建立 Table & Tree
---
note:
已經有的 Widget，但無法滑動。
---
note:
新的相對應可捲動的 Widget
---
note:
還有更多...提供開發者拓展、客製化
尚未是最終版本
---
note:
總結提供的特性
---
note: demo TableView
---
note: demo TreeView
---
# 即時市況與排行 Table
## Fugle Table View
---
<!--  -->
note: FugleTableView Figma Spec
---
<!--  -->
note: 拆解結構
---
### 相關 Pubs
- [syncfusion_flutter_datagrid](https://pub.dev/packages/syncfusion_flutter_datagrid)：標註為 commercial（商用的），以及 dart >= 3.7 才能 build。
下面的都只有 header 和 left column 能夠固定：
- [data_table_2](https://pub.dev/packages/data_table_2)
- [table_sticky_headers](https://pub.dev/packages/table_sticky_headers)
- [horizontal_data_table](https://pub.dev/packages/horizontal_data_table)
- [stack overflow](https://stackoverflow.com/questions/58398787/fixed-column-and-row-header-for-datatable-on-flutter-dart)
---
# Recap
- New 2-D scrolling Widget: `TableView` & `TreeView`
- Solved the gotchas in some cases
1. Multiple scroll notification: sync scroll position
2. Lazing loading
3. Scrollbars, overscroll indicators
4. Diagonal movement
---
# One more thing
## HackMD - Slide mode
- [用 HackMD 做簡報](https://hackmd.io/c/tutorials-tw/%2Fs%2Fhow-to-create-slide-deck-tw)
---
{"metaMigratedAt":"2023-06-17T20:20:19.508Z","metaMigratedFrom":"YAML","title":"App team 讀書會：Two-dimensional scrolling in Flutter","breaks":true,"slideOptions":"{\"transition\":\"fade\",\"spotlight\":{\"enabled\":true}}","description":"note:","contributors":"[{\"id\":\"0d64b6fc-ba02-4bb9-b32f-87767474c6b1\",\"add\":4687,\"del\":1581}]"}