|
1 | | -# How-to-inherit-scrolling-from-NestedScrollView-to-Flutter-DataTable |
2 | | -This demo shows how to inherit scrolling from NestedScrollView to Flutter DataTable?. |
| 1 | +# How to inherit scrolling from NestedScrollView to Flutter DataTable (SfDataGrid)? |
| 2 | + |
| 3 | +In this article, we will show you how to inherit scrolling from NestedScrollView to [Flutter DataTable](https://www.syncfusion.com/flutter-widgets/flutter-datagrid). |
| 4 | + |
| 5 | +Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) with the necessary properties. The [NestedScrollView](https://api.flutter.dev/flutter/widgets/NestedScrollView-class.html) enables a SliverAppBar (or other sliver widgets) to remain fixed while allowing the inner content, such as SfDataGrid, to scroll independently. To avoid conflicts with the scrolling mechanism, [NeverScrollableScrollPhysics](https://api.flutter.dev/flutter/widgets/NeverScrollableScrollPhysics-class.html) is applied to disable DataGrid’s internal scrolling, ensuring that the parent widget controls it. [SliverOverlapAbsorber](https://api.flutter.dev/flutter/widgets/SliverOverlapAbsorber-class.html) and [SliverOverlapInjector](https://api.flutter.dev/flutter/widgets/SliverOverlapInjector-class.html) maintain layout consistency, while [SliverToBoxAdapter](https://api.flutter.dev/flutter/widgets/SliverToBoxAdapter-class.html) wraps the SfDataGrid for seamless integration within the sliver structure. Additionally, setting [shrinkWrapRows](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid/shrinkWrapRows.html) to true ensures the DataGrid adjusts its height dynamically, allowing the parent widget to manage scrolling effectively. |
| 6 | + |
| 7 | +```dart |
| 8 | +@override |
| 9 | + Widget build(BuildContext context) { |
| 10 | + final List<String> tabs = ['Tab 1', 'Tab 2', 'Tab 3']; |
| 11 | +
|
| 12 | + return DefaultTabController( |
| 13 | + length: tabs.length, |
| 14 | + child: Scaffold( |
| 15 | + body: NestedScrollView( |
| 16 | + headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) { |
| 17 | + return [ |
| 18 | + SliverOverlapAbsorber( |
| 19 | + handle: |
| 20 | + NestedScrollView.sliverOverlapAbsorberHandleFor(context), |
| 21 | + sliver: SliverAppBar( |
| 22 | + title: const Text('Syncfusion Flutter DataGrid'), |
| 23 | + floating: false, |
| 24 | + pinned: true, |
| 25 | + expandedHeight: 40.0, |
| 26 | + bottom: TabBar( |
| 27 | + labelColor: Colors.black, |
| 28 | + unselectedLabelColor: Colors.grey, |
| 29 | + controller: _tabController, |
| 30 | + isScrollable: true, |
| 31 | + tabs: const [ |
| 32 | + Tab(child: Text('1')), |
| 33 | + Tab(child: Text('2')), |
| 34 | + Tab(child: Text('3')), |
| 35 | + ], |
| 36 | + ), |
| 37 | + ), |
| 38 | + ), |
| 39 | + ]; |
| 40 | + }, |
| 41 | + body: TabBarView( |
| 42 | + controller: _tabController, |
| 43 | + children: tabs.map((String name) { |
| 44 | + return SafeArea( |
| 45 | + top: false, |
| 46 | + bottom: false, |
| 47 | + child: Builder( |
| 48 | + builder: (BuildContext context) { |
| 49 | + return CustomScrollView( |
| 50 | + key: PageStorageKey<String>(name), |
| 51 | + slivers: [ |
| 52 | + SliverOverlapInjector( |
| 53 | + handle: |
| 54 | + NestedScrollView.sliverOverlapAbsorberHandleFor( |
| 55 | + context), |
| 56 | + ), |
| 57 | + SliverPadding( |
| 58 | + padding: const EdgeInsets.all(8.0), |
| 59 | + sliver: SliverToBoxAdapter( |
| 60 | + child: buildDataGrid(), |
| 61 | + ), |
| 62 | + ), |
| 63 | + ], |
| 64 | + ); |
| 65 | + }, |
| 66 | + ), |
| 67 | + ); |
| 68 | + }).toList(), |
| 69 | + ), |
| 70 | + ), |
| 71 | + ), |
| 72 | + ); |
| 73 | +} |
| 74 | +``` |
| 75 | + |
| 76 | +You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-inherit-scrolling-from-NestedScrollView-to-Flutter-DataTable). |
0 commit comments