Scroll by Row index #57

selvam920 · 2021-11-19T02:08:02Z

automatcially scroll vertically by row index feature need

maxim-saplin · 2021-11-21T19:17:26Z

Please elaborate

selvam920 · 2021-11-22T02:22:45Z

i need hightlight the row using textfield arrow key up & down. this issue i'm facing i'm able to highlight but scroll is not moving automatically to the particular row

maxim-saplin · 2021-11-22T07:33:27Z

Still don't get it, sorry

selvam920 · 2021-11-22T13:34:39Z

2021_11_22_190145.mp4

scroll is not happening selected row.
and also provide the selectedrow background color

maxim-saplin · 2021-11-23T19:27:47Z

I see. Running examples on macOS doesn't seem to have the issue, arrow up/down key move row selection as well as scroll position. WIll check on Windows latter.

In the meantime could you please paste here flutter doctor output?

selvam920 · 2021-11-24T05:41:54Z

[✓] Flutter (Channel master, 2.6.0-12.0.pre.825, on Microsoft Windows [Version 10.0.22000.318], locale en-US)
[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
[✗] Chrome - develop for the web (Cannot find Chrome executable at .\Google\Chrome\Application\chrome.exe)
! Cannot find Chrome. Try setting CHROME_EXECUTABLE to a Chrome executable.
[✓] Visual Studio - develop for Windows (Visual Studio Community 2022 17.0.1)
[✓] Android Studio (version 2020.3)
[✓] VS Code (version 1.62.3)
[✓] Connected device (3 available)

selvam920 · 2021-11-24T05:47:38Z

Flutter 2.6.0-12.0.pre.825 • channel master • https://github.com/flutter/flutter.git
Framework • revision 6a3ea7eb83 (4 hours ago) • 2021-11-23 17:38:02 -0800
Engine • revision 635b4202d7
Tools • Dart 2.16.0 (build 2.16.0-38.0.dev) • DevTools 2.8.0

maxim-saplin · 2021-11-24T07:32:25Z

Please try stable channel, master channel is can be the reason for the issue

selvam920 · 2021-11-27T00:29:53Z

i tried in stable channel still is not working

selvam920 · 2021-11-27T01:02:05Z

even in web also i tried, it's not working

maxim-saplin · 2021-11-27T05:44:58Z

What's your code?

selvam920 · 2021-11-27T09:28:13Z

import 'package:data_table_2/data_table_2.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/// Example without a datasource
class DataTable2SimpleDemo extends StatefulWidget {
const DataTable2SimpleDemo();

@OverRide
State createState() => _DataTable2SimpleDemoState();
}

class _DataTable2SimpleDemoState extends State {
final FocusNode _searchFocusNode = FocusNode();
ScrollController _scrollController = ScrollController();
int _selectedIndex = 0;

void _handleKeyEvent(RawKeyEvent event) {
if (event.runtimeType.toString() == 'RawKeyDownEvent') {
if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
if (_selectedIndex != 0)
setState(() {
_selectedIndex--;
});
} else if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
if (_selectedIndex < 100)
setState(() {
_selectedIndex++;
});
}
}
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Container(
color: Colors.yellow,
child: RawKeyboardListener(
focusNode: _searchFocusNode,
onKey: _handleKeyEvent,
child: TextField(
decoration: InputDecoration(
hintText: 'press arrow up & down key',
border: InputBorder.none),
)),
),
Expanded(
child: DataTable2(
scrollController: _scrollController,
columnSpacing: 12,
horizontalMargin: 12,
minWidth: 600,
columns: [
DataColumn2(
label: Text('Column A'),
size: ColumnSize.L,
),
DataColumn(
label: Text('Column B'),
),
DataColumn(
label: Text('Column C'),
),
DataColumn(
label: Text('Column D'),
),
DataColumn(
label: Text('Column NUMBERS'),
numeric: true,
),
],
rows: List.generate(
100,
(index) =>
DataRow2(selected: _selectedIndex == index, cells: [
DataCell(Text('A' * (10 - index % 10))),
DataCell(Text('B' * (10 - (index + 5) % 10))),
DataCell(Text('C' * (15 - (index + 5) % 10))),
DataCell(Text('D' * (15 - (index + 10) % 10))),
DataCell(Text(((index + 0.1) * 25.4).toString()))
]))),
)
],
)),
);
}
}

selvam920 · 2021-11-27T09:29:47Z

inside datatable 2 arrow key with scroll it's working, the issue is in the textbox key handler changing the selected row by index, the row is highlighted inside datatable but scroll is not happening

selvam920 · 2021-11-27T14:16:50Z

2021_11_27_194254.mp4

selvam920 · 2021-11-27T14:16:59Z

import 'package:data_table_2/data_table_2.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

/// Example without a datasource
class DataTable2SimpleDemo extends StatefulWidget {
const DataTable2SimpleDemo();

@OverRide
State createState() => _DataTable2SimpleDemoState();
}

class _DataTable2SimpleDemoState extends State {
final FocusNode _searchFocusNode = FocusNode();
ScrollController _scrollController = ScrollController();
int _selectedIndex = 0;

void _handleKeyEvent(RawKeyEvent event) {
if (event.runtimeType.toString() == 'RawKeyDownEvent') {
if (event.logicalKey == LogicalKeyboardKey.arrowUp) {
if (_selectedIndex != 0)
setState(() {
_selectedIndex--;
});
} else if (event.logicalKey == LogicalKeyboardKey.arrowDown) {
if (_selectedIndex < 100)
setState(() {
_selectedIndex++;
});
}
}
}

@OverRide
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
Container(
color: Colors.yellow,
child: RawKeyboardListener(
focusNode: _searchFocusNode,
onKey: _handleKeyEvent,
child: TextField(
decoration: InputDecoration(
hintText: 'press arrow up & down key',
border: InputBorder.none),
)),
),
Expanded(
child: DataTable2(
scrollController: _scrollController,
columnSpacing: 12,
horizontalMargin: 12,
minWidth: 600,
columns: [
DataColumn2(
label: Text('Column A'),
size: ColumnSize.L,
),
DataColumn(
label: Text('Column B'),
),
DataColumn(
label: Text('Column C'),
),
DataColumn(
label: Text('Column D'),
),
DataColumn(
label: Text('Column NUMBERS'),
numeric: true,
),
],
rows: List.generate(
100,
(index) => DataRow2(
color: _selectedIndex == index
? MaterialStateColor.resolveWith((states) {
return Theme.of(context).primaryColor;
})
: null,
selected: _selectedIndex == index,
cells: [
DataCell(Text('A' * (10 - index % 10))),
DataCell(Text('B' * (10 - (index + 5) % 10))),
DataCell(Text('C' * (15 - (index + 5) % 10))),
DataCell(
Text('D' * (15 - (index + 10) % 10))),
DataCell(
Text(((index + 0.1) * 25.4).toString()))
]))),
)
],
)),
);
}
}

selvam920 · 2021-11-27T14:19:34Z

sample code attached for that video and same is working with flutter datatable widget.

maxim-saplin · 2021-11-28T16:47:45Z

Thanks for providing the sample code, can see the issue, will have a thorough look latter during the week

selvam920 · 2021-12-08T11:58:17Z

any update on this?

maxim-saplin · 2021-12-08T18:36:59Z

Investigation showed that the default implementation of keyboard events within data table and scroll view allow moving the highlighted row and scroll position without rebuilding the widget. Yet your code relies on widget rebuilding via serState()

I don't have a nice solution that may avoid the rebuilds/setState(), didn't have time to dive that deep in Flutter's focus model.

The workaround I can suggest you is using the scroll controller provided to the data table and set positions via it in the event handler of key strokes

selvam920 · 2021-12-09T01:04:23Z

can you provide sample code

selvam920 · 2021-12-09T01:06:55Z

what about the bug row background color changed black when mouse focused?

selvam920 · 2021-12-09T01:12:03Z

in you provide method to change the row selected via global key then it's fine

selvam920 · 2021-12-09T02:39:34Z

i have done using scrollcontroller.jumpto, issue fixed
but the row background color is blank issue only there

maxim-saplin · 2021-12-09T13:42:05Z

Can you please provide your current implementation the way you did with the example before?

mubarakar · 2022-03-08T13:02:01Z

Can you please provide your current implementation the way you did with the example before?

Can you tell me how to unfocus the DataTable so that the black issue can be fixed? I also faced that black issue, when navigating with arrows on the table.

I used to Wrap the dataTable2 with a Focus() widget that has property descendantsAreFocusable: false.

it's working fine, but I have a text field inside the data table, so I cannot focus the text field because of the parent Focus() Widget with descendantsAreFocusable: false. Is there any other way to unfocus the table, please help? Thank you for the great work.

mubarakar · 2022-03-09T07:04:55Z

I found a solution to this problem. if you are not using the border property, you can use color inside the DataRow() and change the focus color like this.

Color getDataRowColor(Set<MaterialState> states, int index) {
      if (states.contains(MaterialState.selected)) {
        return Colors.yellow.shade100;
      }
      if (states.contains(MaterialState.hovered)) {
        return const Color(0xFFE7EDFF);
      }
      if (states.contains(MaterialState.focused)) {
          return Colors.white;
     }

      return Colors.transparent;
    }


  DataRow2(
       selected: isSelected(index),
       color: MaterialStateProperty.resolveWith((states) => getDataRowColor(states, index)),

selvam920 · 2023-05-21T11:52:10Z

can you implement like this in datatable2, scroll by row index
https://github.com/lucian1024/anchor_scroll_controller

maxim-saplin added the bug Something isn't working label Mar 9, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Scroll by Row index #57

Scroll by Row index #57

selvam920 commented Nov 19, 2021

maxim-saplin commented Nov 21, 2021

selvam920 commented Nov 22, 2021

maxim-saplin commented Nov 22, 2021

selvam920 commented Nov 22, 2021

maxim-saplin commented Nov 23, 2021 •

edited

Loading

selvam920 commented Nov 24, 2021

selvam920 commented Nov 24, 2021

maxim-saplin commented Nov 24, 2021

selvam920 commented Nov 27, 2021

selvam920 commented Nov 27, 2021

maxim-saplin commented Nov 27, 2021

selvam920 commented Nov 27, 2021

selvam920 commented Nov 27, 2021 •

edited

Loading

selvam920 commented Nov 27, 2021

selvam920 commented Nov 27, 2021

selvam920 commented Nov 27, 2021

maxim-saplin commented Nov 28, 2021

selvam920 commented Dec 8, 2021

maxim-saplin commented Dec 8, 2021

selvam920 commented Dec 9, 2021

selvam920 commented Dec 9, 2021

selvam920 commented Dec 9, 2021

selvam920 commented Dec 9, 2021

maxim-saplin commented Dec 9, 2021

mubarakar commented Mar 8, 2022

mubarakar commented Mar 9, 2022

selvam920 commented May 21, 2023

Scroll by Row index #57

Scroll by Row index #57

Comments

selvam920 commented Nov 19, 2021

maxim-saplin commented Nov 21, 2021

selvam920 commented Nov 22, 2021

maxim-saplin commented Nov 22, 2021

selvam920 commented Nov 22, 2021

maxim-saplin commented Nov 23, 2021 • edited Loading

selvam920 commented Nov 24, 2021

selvam920 commented Nov 24, 2021

maxim-saplin commented Nov 24, 2021

selvam920 commented Nov 27, 2021

selvam920 commented Nov 27, 2021

maxim-saplin commented Nov 27, 2021

selvam920 commented Nov 27, 2021

selvam920 commented Nov 27, 2021 • edited Loading

selvam920 commented Nov 27, 2021

selvam920 commented Nov 27, 2021

selvam920 commented Nov 27, 2021

maxim-saplin commented Nov 28, 2021

selvam920 commented Dec 8, 2021

maxim-saplin commented Dec 8, 2021

selvam920 commented Dec 9, 2021

selvam920 commented Dec 9, 2021

selvam920 commented Dec 9, 2021

selvam920 commented Dec 9, 2021

maxim-saplin commented Dec 9, 2021

mubarakar commented Mar 8, 2022

mubarakar commented Mar 9, 2022

selvam920 commented May 21, 2023

maxim-saplin commented Nov 23, 2021 •

edited

Loading

selvam920 commented Nov 27, 2021 •

edited

Loading