added Get Visible Columns Feature

Author: doonfrs

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## [8.4.8] - 2025. 03. 06
+
+* Added getVisibleColumns method & isColumnVisible
+
 ## [8.4.7] - 2025. 03. 04
 
 * Fix pagination bug

demo/lib/main.dart

@@ -1,3 +1,4 @@
+import 'package:demo/screen/feature/check_visible_columns_screen.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 
@@ -65,6 +66,8 @@ class MyApp extends StatelessWidget {
             const AddRowsAsynchronouslyScreen(),
         CellRendererScreen.routeName: (context) => const CellRendererScreen(),
         CellSelectionScreen.routeName: (context) => const CellSelectionScreen(),
+        CheckVisibleColumnsScreen.routeName: (context) =>
+            const CheckVisibleColumnsScreen(),
         RTLScreen.routeName: (context) => const RTLScreen(),
         ColumnFilteringScreen.routeName: (context) =>
             const ColumnFilteringScreen(),

demo/lib/screen/feature/check_visible_columns_screen.dart

@@ -0,0 +1,170 @@
+import 'package:faker/faker.dart';
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+import 'package:pluto_grid_plus/pluto_grid_plus.dart';
+
+import '../../widget/pluto_example_screen.dart';
+
+class CheckVisibleColumnsScreen extends StatefulWidget {
+  static const routeName = 'check-visible-columns';
+
+  const CheckVisibleColumnsScreen({super.key});
+
+  @override
+  _CheckVisibleColumnsScreenState createState() =>
+      _CheckVisibleColumnsScreenState();
+}
+
+class _CheckVisibleColumnsScreenState extends State<CheckVisibleColumnsScreen> {
+  final List<PlutoColumn> columns = [];
+
+  final List<PlutoRow> rows = [];
+
+  late PlutoGridStateManager stateManager;
+
+  @override
+  void initState() {
+    super.initState();
+
+    columns.addAll([
+      for (var i = 1; i < 50; i++)
+        PlutoColumn(
+          title: 'Column $i',
+          field: 'column$i',
+          type: PlutoColumnType.text(),
+        ),
+    ]);
+
+    rows.addAll([
+      for (var i = 1; i < 50; i++)
+        PlutoRow(cells: {
+          for (var column in columns)
+            column.field: PlutoCell(value: faker.lorem.sentence()),
+        }),
+    ]);
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return PlutoExampleScreen(
+      title: 'Check visible columns',
+      topTitle: 'Check visible columns',
+      topContents: const [
+        Text('You can check visible columns.'),
+      ],
+      body: PlutoGrid(
+        columns: columns,
+        rows: rows,
+        onLoaded: (PlutoGridOnLoadedEvent event) {
+          stateManager = event.stateManager;
+        },
+        createHeader: (stateManager) => _Header(stateManager: stateManager),
+      ),
+    );
+  }
+}
+
+class _Header extends StatefulWidget {
+  const _Header({
+    required this.stateManager,
+  });
+
+  final PlutoGridStateManager stateManager;
+
+  @override
+  State<_Header> createState() => _HeaderState();
+}
+
+class _HeaderState extends State<_Header> {
+  PlutoGridSelectingMode gridSelectingMode = PlutoGridSelectingMode.row;
+
+  @override
+  void initState() {
+    super.initState();
+  }
+
+  void _showVisibleColumns() {
+    showDialog(
+        context: context,
+        builder: (context) => SimpleDialog(
+              title: const Text('Visible columns'),
+              children: [
+                for (var element in widget.stateManager.getVisibleColumns())
+                  SimpleDialogOption(
+                    onPressed: () {},
+                    child: Text(element.title),
+                  )
+              ],
+            ));
+  }
+
+  void _isColumnVisible() {
+    int? columnIndex;
+
+    showDialog(
+        context: context,
+        builder: (context) => AlertDialog(
+            title: const Text('Is column visible?'),
+            content: StatefulBuilder(builder: (context, setState) {
+              return Column(
+                mainAxisSize: MainAxisSize.min,
+                children: [
+                  Row(
+                    children: [
+                      SizedBox(
+                        width: 200,
+                        child: TextField(
+                          onChanged: (value) {
+                            columnIndex = int.tryParse(value);
+                          },
+                          keyboardType: TextInputType.number,
+                          inputFormatters: [
+                            FilteringTextInputFormatter.digitsOnly
+                          ],
+                          decoration: const InputDecoration(
+                            labelText: 'Column index',
+                          ),
+                        ),
+                      ),
+                      const SizedBox(width: 10),
+                      ElevatedButton(
+                        onPressed: () {
+                          setState(() {});
+                        },
+                        child: const Text('Check'),
+                      )
+                    ],
+                  ),
+                  const SizedBox(height: 20),
+                  if (columnIndex != null)
+                    Text(widget.stateManager.isColumnVisible(
+                            widget.stateManager.refColumns[columnIndex!])
+                        ? 'Visible'
+                        : 'Hidden')
+                ],
+              );
+            })));
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return SingleChildScrollView(
+      scrollDirection: Axis.horizontal,
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 8.0),
+        child: Wrap(
+          spacing: 10,
+          crossAxisAlignment: WrapCrossAlignment.center,
+          children: [
+            ElevatedButton(
+                onPressed: _showVisibleColumns,
+                child: const Text('Show visible columns')),
+            ElevatedButton(
+                onPressed: _isColumnVisible,
+                child: const Text('Is column visible?')),
+          ],
+        ),
+      ),
+    );
+  }
+}

demo/lib/screen/home_screen.dart

@@ -1,6 +1,7 @@
 import 'dart:math';
 
 import 'package:demo/screen/empty_screen.dart';
+import 'package:demo/screen/feature/check_visible_columns_screen.dart';
 import 'package:flutter/material.dart';
 import 'package:font_awesome_flutter/font_awesome_flutter.dart';
 
@@ -493,6 +494,16 @@ class PlutoFeatures extends StatelessWidget {
               Navigator.pushNamed(context, PagesListScreen.routeName);
             },
           ),
+          PlutoListTile(
+            title: 'Check visible columns',
+            description: 'Check visible columns.',
+            onTapLiveDemo: () {
+              Navigator.pushNamed(
+                context,
+                CheckVisibleColumnsScreen.routeName,
+              );
+            },
+          ),
           PlutoListTile.dark(
             title: 'Dark mode',
             description: 'Change the entire theme of the grid to Dark.',

lib/src/manager/pluto_grid_state_manager.dart

@@ -275,6 +275,35 @@ class PlutoGridStateManager extends PlutoGridStateChangeNotifier {
     );
   }
 
+  /// Returns a list of columns that are currently visible in the viewport
+  List<PlutoColumn> getVisibleColumns() {
+    if (refColumns.isEmpty) return [];
+
+    return refColumns.where((column) => isColumnVisible(column)).toList();
+  }
+
+  /// Checks if a specific column is currently visible in the viewport
+  bool isColumnVisible(PlutoColumn column) {
+    if (column.hide) return false;
+
+    final RenderBox? gridRenderBox =
+        gridKey.currentContext?.findRenderObject() as RenderBox?;
+
+    if (gridRenderBox == null) {
+      return false;
+    }
+
+    final scrollPosition = scroll.horizontal?.offset ?? 0;
+    final viewportWidth = gridRenderBox.size.width;
+    final viewportEnd = scrollPosition + viewportWidth;
+
+    final columnStart = column.startPosition;
+    final columnEnd = columnStart + column.width;
+
+    // Column is visible if any part of it is in the viewport
+    return (columnStart <= viewportEnd && columnEnd > scrollPosition);
+  }
+
   /// It handles the necessary settings when [rows] are first set or added to the [PlutoGrid].
   ///
   /// {@template initialize_rows_params}

pubspec.yaml

@@ -1,6 +1,6 @@
 name: pluto_grid_plus
 description: PlutoGrid plus is a maintained version of PlutoGrid, PlutoGrid is a dataGrid that can be controlled by the keyboard on desktop and web. Of course, it works well on Android and IOS. (DataGrid, DataTable, Data Grid, Data Table, Sticky)
-version: 8.4.7
+version: 8.4.8
 homepage: https://pluto.weblaze.dev
 repository: https://github.com/doonfrs/pluto_grid_plus