flutterdartmobilerowdatarow

Flutter DataTable select Row


I have a problem with DataTable in flutter. I want to change the state of the row, when the user click on one of them, but I found just how to do this "manually" with selected: true, inside DataRow.

How can I let the user select just a single row, and deselect the rest, by changing the state?

content: Column(
               children: <Widget>[
                 DataTable(
                   columns: [
                     DataColumn(label: Text('Language')),
                     DataColumn(label: Text('Translation')),
                   ],
                   rows: [
                     DataRow(selected: true, cells: [
                       DataCell(
                         Text(
                           "RO",
                           textAlign: TextAlign.left,
                           style: TextStyle(fontWeight: FontWeight.bold),
                         ),
                         onTap: () {
                           setState(() {
                             color = Colors.lightBlueAccent;

                           });
                         },
                       ),
                       DataCell(
                         TextField(
                           decoration: InputDecoration(
                               border: InputBorder.none, hintText: 'paine'),
                         ),
                       ),
                     ]),
                     DataRow(cells: [
                       DataCell(
                           Text(
                             "EN",
                             textAlign: TextAlign.left,
                             style: TextStyle(fontWeight: FontWeight.bold),
                           ), onTap: () {
                         print('EN is clicked');
                       }),
                       DataCell(
                         TextField(
                           decoration: InputDecoration(
                               border: InputBorder.none, hintText: 'bread'),
                         ),
                       ),
                     ]),
                     DataRow(cells: [
                       DataCell(
                           Text(
                             "FR",
                             textAlign: TextAlign.left,
                             style: TextStyle(fontWeight: FontWeight.bold),
                           ), onTap: () {
                         print('FR is clicked');
                       }),
                       DataCell(
                         TextField(
                           decoration: InputDecoration(
                               border: InputBorder.none, hintText: 'pain'),
                         ),
                       ),
                     ]),
                   ],
                 ),
               ],
             ),

Solution

  • You can copy past run full code below
    You can use condition in selected like this 0 == selectedIndex where 0 is DataRow index
    and change selectedIndex in onSelectChanged
    code snippet

        int selectedIndex = -1;
        ... 
        rows: [
        DataRow(
            selected: 0 == selectedIndex,
            onSelectChanged: (val) {
              setState(() {
                selectedIndex = 0;
              });
            },
            ...
        DataRow(
            selected: 1 == selectedIndex,
            onSelectChanged: (val) {
              setState(() {
                selectedIndex = 1;
              });
            },
    

    working demo

    enter image description here

    full code

    import 'package:flutter/material.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      Color color;
      int selectedIndex = -1;
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              children: <Widget>[
                DataTable(
                  onSelectAll: (val) {
                    setState(() {
                      selectedIndex = -1;
                    });
                  },
                  columns: [
                    DataColumn(label: Text('Language')),
                    DataColumn(label: Text('Translation')),
                  ],
                  rows: [
                    DataRow(
                        selected: 0 == selectedIndex,
                        onSelectChanged: (val) {
                          setState(() {
                            selectedIndex = 0;
                          });
                        },
                        cells: [
                          DataCell(
                            Text(
                              "RO",
                              textAlign: TextAlign.left,
                              style: TextStyle(fontWeight: FontWeight.bold),
                            ),
                            onTap: () {
                              setState(() {
                                color = Colors.lightBlueAccent;
                              });
                            },
                          ),
                          DataCell(
                            TextField(
                              decoration: InputDecoration(
                                  border: InputBorder.none, hintText: 'paine'),
                            ),
                          ),
                        ]),
                    DataRow(
                        selected: 1 == selectedIndex,
                        onSelectChanged: (val) {
                          setState(() {
                            selectedIndex = 1;
                          });
                        },
                        cells: [
                          DataCell(
                              Text(
                                "EN",
                                textAlign: TextAlign.left,
                                style: TextStyle(fontWeight: FontWeight.bold),
                              ), onTap: () {
                            print('EN is clicked');
                          }),
                          DataCell(
                            TextField(
                              decoration: InputDecoration(
                                  border: InputBorder.none, hintText: 'bread'),
                            ),
                          ),
                        ]),
                    DataRow(
                        selected: 2 == selectedIndex,
                        onSelectChanged: (val) {
                          setState(() {
                            selectedIndex = 2;
                          });
                        },
                        cells: [
                          DataCell(
                              Text(
                                "FR",
                                textAlign: TextAlign.left,
                                style: TextStyle(fontWeight: FontWeight.bold),
                              ), onTap: () {
                            print('FR is clicked');
                          }),
                          DataCell(
                            TextField(
                              decoration: InputDecoration(
                                  border: InputBorder.none, hintText: 'pain'),
                            ),
                          ),
                        ]),
                  ],
                ),
              ],
            ),
          ),
        );
      }
    }