DataGrid: Kitchen sink - remove button on a row does not work

[kmahmood74]

Open Kitchen Sink
Tap on Layout Widgets
DataGrid
Load Dynamic Data

Now find the remove button next to a row and click on it. It doesn't do anything.

also help improve the DataGrid styling a bit. Just go with the basic style here

[vinothvino42]

@kmahmood74 I couldn't able to scroll horizontally in the studio preview. For horizontal scrolling, Shift + Mouse wheel up/down right? It's working fine locally in the iOS simulator and also the remove button is triggering the onTap callback correctly

[kmahmood74]

if you turn device preview off, you can scroll fine. It's yet another regression with device previews. Kindly turn off device preview until we have fixed all the issues related to it. @vinothvino42 are you working on fixing the device preview issues?

[vinothvino42]

@kmahmood74 Okay. There is one property useInheritedMediaQuery in the MaterialApp is deprecated, the device preview package uses it. I created an issue for that in the device preview. But I guess it's not related to that. I tried running the sample material app with device_preview and it works fine. I'm trying to figure out the issue, it's somewhere happening in our ensemble app. Please see the video

[vinothvino42]

@kmahmood74 Do we need to change the DataGrid to a basic style? I think it's added to show how we can style all the borders of the DataGrid view. Or we can convert it to the default basic style but anyway, the user needs to know all the capabilities of DataGrid styling via a proper documentation

border:
  top:
    color: red
    width: 6
  bottom:
    color: blue
    width: 8
  left:
    color: amber
    width: 10
  right:
    color: yellow
    width: 10
  horizontalInside:
    color: grey
    width: 2
  verticalInside:
    color: blue
    width: 8

[kmahmood74]

@kmahmood74 Okay. There is one property useInheritedMediaQuery in the MaterialApp is deprecated, the device preview package uses it. I created an issue for that in the device preview. But I guess it's not related to that. I tried running the sample material app with device_preview and it works fine. I'm trying to figure out the issue, it's somewhere happening in our ensemble app. Please see the video

this was the selectionArea issue you identified right?

[kmahmood74]

@kmahmood74 Do we need to change the DataGrid to a basic style? I think it's added to show how we can style all the borders of the DataGrid view. Or we can convert it to the default basic style but anyway, the user needs to know all the capabilities of DataGrid styling via a proper documentation

border:
  top:
    color: red
    width: 6
  bottom:
    color: blue
    width: 8
  left:
    color: amber
    width: 10
  right:
    color: yellow
    width: 10
  horizontalInside:
    color: grey
    width: 2
  verticalInside:
    color: blue
    width: 8

yes you are right. The style are pretty horrible. Please make the remove button work and @amin-nas or Andrew can give us the styles

[vinothvino42]

Yes. SelectionArea widget issue is related to device preview.

[vinothvino42]

@kmahmood74 I identified this remove button on tap issue too. It's happening due to the borderRadius. Try commenting on the borderRadius in the DataGrid and it will work. The borderRadius is not working in the DataGrid view. I've a few doubts, we'll discuss that in today's standup call

[kmahmood74]

But it has always been working until something changed very recently. We can't disable borderRadius, let's figure out why this regression is happening.

[vinothvino42]

@kmahmood74 Are you sure it worked before migrating to Flutter v3.10? Because I took the default example of DataTable (we named it as DataGrid and used this DataTable) and tried adding the borderRadius. It's not working and I thought to create an issue in the flutter repo. Can you try the following code in the dartpad.dev

Here's the doc of DataTable

import 'package:flutter/material.dart';

/// Flutter code sample for [DataTable].

void main() => runApp(const DataTableExampleApp());

class DataTableExampleApp extends StatelessWidget {
  const DataTableExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DataTable Sample')),
        body: const DataTableExample(),
      ),
    );
  }
}

class DataTableExample extends StatelessWidget {
  const DataTableExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(30),
      child: DataTable(
        border: TableBorder(
          top: const BorderSide(width: 3),
          right: const BorderSide(width: 3),
          bottom: const BorderSide(width: 3),
          left: const BorderSide(width: 3),
          verticalInside: const BorderSide(width: 5.5),
          horizontalInside: const BorderSide(width: 5.5),
          borderRadius: BorderRadius.circular(30),
        ),
        columns: const <DataColumn>[
          DataColumn(
            label: Expanded(
              child: Text(
                'Name',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
            ),
          ),
          DataColumn(
            label: Expanded(
              child: Text(
                'Age',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
            ),
          ),
          DataColumn(
            label: Expanded(
              child: Text(
                'Role',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
            ),
          ),
        ],
        rows: const <DataRow>[
          DataRow(
            cells: <DataCell>[
              DataCell(Text('Sarah')),
              DataCell(Text('19')),
              DataCell(Text('Student')),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Text('Janine')),
              DataCell(Text('43')),
              DataCell(Text('Professor')),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Text('William')),
              DataCell(Text('27')),
              DataCell(Text('Associate Professor')),
            ],
          ),
        ],
      ),
    );
  }
}

But this is working with TableBorder.all constructor. But it doesn't have few properties like left, top, etc

border: TableBorder.all(
          width: 3,
          borderRadius: const BorderRadius.all(Radius.circular(30)),
        ),

[kmahmood74]

yes, it used to work. I have tested it many times before. @amin-nas was probably using it inside a customer app as well. @amin-nas is the sah app broken because of this regression, can you please check.

[kmahmood74]

@kmahmood74 Are you sure it worked before migrating to Flutter v3.10? Because I took the default example of DataTable (we named it as DataGrid and used this DataTable) and tried adding the borderRadius. It's not working and I thought to create an issue in the flutter repo. Can you try the following code in the dartpad.dev

Here's the doc of DataTable

import 'package:flutter/material.dart';

/// Flutter code sample for [DataTable].

void main() => runApp(const DataTableExampleApp());

class DataTableExampleApp extends StatelessWidget {
  const DataTableExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('DataTable Sample')),
        body: const DataTableExample(),
      ),
    );
  }
}

class DataTableExample extends StatelessWidget {
  const DataTableExample({super.key});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(30),
      child: DataTable(
        border: TableBorder(
          top: const BorderSide(width: 3),
          right: const BorderSide(width: 3),
          bottom: const BorderSide(width: 3),
          left: const BorderSide(width: 3),
          verticalInside: const BorderSide(width: 5.5),
          horizontalInside: const BorderSide(width: 5.5),
          borderRadius: BorderRadius.circular(30),
        ),
        columns: const <DataColumn>[
          DataColumn(
            label: Expanded(
              child: Text(
                'Name',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
            ),
          ),
          DataColumn(
            label: Expanded(
              child: Text(
                'Age',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
            ),
          ),
          DataColumn(
            label: Expanded(
              child: Text(
                'Role',
                style: TextStyle(fontStyle: FontStyle.italic),
              ),
            ),
          ),
        ],
        rows: const <DataRow>[
          DataRow(
            cells: <DataCell>[
              DataCell(Text('Sarah')),
              DataCell(Text('19')),
              DataCell(Text('Student')),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Text('Janine')),
              DataCell(Text('43')),
              DataCell(Text('Professor')),
            ],
          ),
          DataRow(
            cells: <DataCell>[
              DataCell(Text('William')),
              DataCell(Text('27')),
              DataCell(Text('Associate Professor')),
            ],
          ),
        ],
      ),
    );
  }
}

But this is working

border: TableBorder.all(
          width: 3,
          borderRadius: const BorderRadius.all(Radius.circular(30)),
        ),

is dartpad on is on Flutter 3.10 so this is probably a regression in Flutter 3.10. Kindly link the ticket you opened for the flutter team. Meanwhile, we can ignore the borderRadius on grid instead of causing this issue

[vinothvino42]

@kmahmood74 Yes, you can see it in the bottom right corner. Okay, I'll try the following code with a previous stable version of Flutter v3.7.12 and let you know. I'll show this to vu in the standup and then I'll create an issue in flutter repo

[vinothvino42]

@kmahmood74 It is fixed with this PR #511
@vusters Can you review it?

[amin-nas]

Confirming no impact to the customer app as we use very few styling properties there:

            - DataGrid:
                headingTextStyle: { font: heading, fontSize: 16, color: grey }
                horizontalMargin: 0
                headingRowHeight: 32
                columnSpacing: 60

[vinothvino42]

@amin-nas Yeah, I changed only the border property of DataGrid, so there will be no issues. Still I didn't merged it, need to add schema for DataGrid and then I'll merge it

[vinothvino42]

@amin-nas As per the suggestion by @vusters. Today I changed the headingText and dataText styles, now it'll be inside the styles property. Check this Link