get selected row index from dynamic datatable flutter

6,278

when delete data, please delete data in model list
code snippet

deleteSelected() async {
    setState(() {
      if (selectedUsers.isNotEmpty) {
        List<User> temp = [];
        temp.addAll(selectedUsers);
        for (User user in temp) {
          users.remove(user);
          selectedUsers.remove(user);
        }
      }
    });
  }

and in rows attribute use map

rows: users
            .map(
              (user) => DataRow(
              selected: selectedUsers.contains(user),
              onSelectChanged: (b) {
                print("Onselect");
                onSelectedRow(b, user);
              }

full code

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: DataTableDemo(),
    );
  }
}



class User {
  String firstName;
  String lastName;

  User({this.firstName, this.lastName});

  static List<User> getUsers() {
    return <User>[
      User(firstName: "Aaryan", lastName: "Shah"),
      User(firstName: "Ben", lastName: "John"),
      User(firstName: "Carrie", lastName: "Brown"),
      User(firstName: "Deep", lastName: "Sen"),
      User(firstName: "Emily", lastName: "Jane"),
    ];
  }
}

class DataTableDemo extends StatefulWidget {
  DataTableDemo() : super();

  final String title = "Data Table Flutter Demo";

  @override
  DataTableDemoState createState() => DataTableDemoState();
}

class DataTableDemoState extends State<DataTableDemo> {
  List<User> users;
  List<User> selectedUsers;
  bool sort;

  @override
  void initState() {
    sort = false;
    selectedUsers = [];
    users = User.getUsers();
    super.initState();
  }

  onSortColum(int columnIndex, bool ascending) {
    if (columnIndex == 0) {
      if (ascending) {
        users.sort((a, b) => a.firstName.compareTo(b.firstName));
      } else {
        users.sort((a, b) => b.firstName.compareTo(a.firstName));
      }
    }
  }

  onSelectedRow(bool selected, User user) async {
    setState(() {
      if (selected) {
        selectedUsers.add(user);
      } else {
        selectedUsers.remove(user);
      }
    });
  }

  deleteSelected() async {
    setState(() {
      if (selectedUsers.isNotEmpty) {
        List<User> temp = [];
        temp.addAll(selectedUsers);
        for (User user in temp) {
          users.remove(user);
          selectedUsers.remove(user);
        }
      }
    });
  }

  SingleChildScrollView dataBody() {
    return SingleChildScrollView(
      scrollDirection: Axis.vertical,
      child: DataTable(
        sortAscending: sort,
        sortColumnIndex: 0,
        columns: [
          DataColumn(
              label: Text("FIRST NAME"),
              numeric: false,
              tooltip: "This is First Name",
              onSort: (columnIndex, ascending) {
                setState(() {
                  sort = !sort;
                });
                onSortColum(columnIndex, ascending);
              }),
          DataColumn(
            label: Text("LAST NAME"),
            numeric: false,
            tooltip: "This is Last Name",
          ),
        ],
        rows: users
            .map(
              (user) => DataRow(
              selected: selectedUsers.contains(user),
              onSelectChanged: (b) {
                print("Onselect");
                onSelectedRow(b, user);
              },
              cells: [
                DataCell(
                  Text(user.firstName),
                  onTap: () {
                    print('Selected ${user.firstName}');
                  },
                ),
                DataCell(
                  Text(user.lastName),
                ),
              ]),
        )
            .toList(),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.center,
        verticalDirection: VerticalDirection.down,
        children: <Widget>[
          Expanded(
            child: dataBody(),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.all(20.0),
                child: OutlineButton(
                  child: Text('SELECTED ${selectedUsers.length}'),
                  onPressed: () {},
                ),
              ),
              Padding(
                padding: EdgeInsets.all(20.0),
                child: OutlineButton(
                  child: Text('DELETE SELECTED'),
                  onPressed: selectedUsers.isEmpty
                      ? null
                      : () {
                    deleteSelected();
                  },
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

enter image description here

Share:
6,278
PrakashKing
Author by

PrakashKing

Updated on December 14, 2022

Comments

  • PrakashKing
    PrakashKing over 1 year

    In flutter, I have dynamic widget data table. rows are added on submitting values (via edittextbox) with button. add and remove row on actions within row field(on clicking particular row). below code gives me output that removes last row from list. i need to remove row that I clicked/selected row from table. it should found index of that row to remove that one. is there alternative way to achieve the expected result? I am using List<DataRow> row =[];

     Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
           FlatButton.icon(
          color: Colors.orange,
          icon: Icon(FontAwesomeIcons.shoppingBag),
          label: Text('Add to List'), 
    
          onPressed: () async{
            ttl = int.parse(rate) * int.parse(noInputController.text);
    
             setState(() {
    
             this.row.add(
               new DataRow(
            cells: [
              DataCell( Icon(Icons.remove_circle, color: Colors.red,),
                //Text('remove', style: TextStyle(color: Colors.blue,decoration: TextDecoration.underline,),
    
            onTap: () {
           setState(() {
            //remove  item
            if(amt > 0){
            amt = amt - ttl;
            }
            print(amt);
            if (index  != -1){
            print("before: $index $rowindex");
           rowindex.removeAt(index);
           //row.removeAt(index);
           index = index - 1;
           print("after: $index $rowindex");
            }else{
              print('no rows');
            }
    
           });
          }),
            DataCell(Text(prd),
            onTap: () {
           setState(() {
    
           });
          }),
          DataCell(Text(noInputController.text),
          onTap: () {
          setState(() {
    
           });
          }),
          DataCell(Text(rate),
            onTap: () {
            setState(() {
    
           });
          }),
           DataCell(Text(ttl.toString()),
            onTap: () {
            setState(() {
    
           });
          }),
          DataCell(Text(stype),
            onTap: () {
            setState(() {
    
           });
          }),
            ]));
               print("before: $index $rowindex");
               index = index + 1;
                this.rowindex.add(index);
                print("after: $index $rowindex");
           // print(this.row.length);
             return this.row;
             });
    
             rstitem();  //get total
                    }
        ),]),
            SizedBox(
              height: ScreenUtil.getInstance().setHeight(20),
            ),
    
    
    
             new SingleChildScrollView(
              scrollDirection: Axis.horizontal,
                child: DataTable(
      columns: [
        DataColumn(label: Text("Remove",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0,color: Colors.blue))),
        DataColumn(  //tooltip: "item code for products",
              label: Text("Name",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 15.0,color: Colors.blue))),
            DataColumn(label: Text("Quantity",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0,color: Colors.blue))),
            DataColumn(label: Text("Rate",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0,color: Colors.blue))),
            DataColumn(label: Text("Total",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0,color: Colors.blue))),
            DataColumn(label: Text("Item Type",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 15.0,color: Colors.blue)))
      ],
      rows: row,
    ),),
    

    help me fix this issue.