How to set vertical and horizontal border in flutter datatable?

Question

As I am new to flutter, I could not set the border in DataTable. Can anybody tell me how can I do that by using DataTable Widget? As per my requirement, I have to give borders between each rows and columns. Only I found the showBottomBorder properties in that but not satisfied! because I have to do a table like structure with black borders in each rows and columns. Please help me how can I achieve this!

Thanks in advance :)

This is the image link]1

Below is my code.

Widget bodyData(PatientDataNotifier patientDataNotifier) {
    return SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: DataTable(
              onSelectAll: (b) {},
              sortColumnIndex: 1,
              sortAscending: true,
              columns: <DataColumn>[
                DataColumn(
                  label: Text('Profile'),
                  numeric: false,
                ),
                DataColumn(
                    label: Text('Name'),
                    numeric: false,
                    onSort: (i, b) {
                    //  patientDataNotifier.sortPatient();
                      print('$i $b');
                     },
                    tooltip: 'First Name'),
                DataColumn(
                  label: Text('Age'),
                  numeric: false,
                ),
                DataColumn(
                  label: Text('Assigned Slots'),
                  numeric: false,
                ),
                DataColumn(
                  label: Text('Completed Slots'),
                  numeric: false,
                )
              ],
              rows: patientDataNotifier.patientMaster.map(
                    (detail) => DataRow(
                      cells: [
                        DataCell(CircleAvatar(radius: 25, backgroundImage: NetworkImage(detail.profile_pic),)),
                        DataCell(Text(detail.name), showEditIcon: false),
                        DataCell(Text(detail.age.toString()), showEditIcon: false),
                        DataCell(Text(detail.assigned_slots), showEditIcon: false),
                        DataCell(Text(detail.completed_slots), showEditIcon: false)
                      ],
                    ),
                  ).toList(),
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: PreferredSize(
        preferredSize: const Size.fromHeight(80),
        child: Consumer<PatientDataNotifier>(
          builder: (context, patientDataNotifier, _){
            return appBarSection('Patient Details', patientDataNotifier);
          },
        ),
      ),
      //appBar: appBarSection('Patient Details'),
      body: Container(
        child: Consumer<PatientDataNotifier>(
          builder: (context, patientDataNotifier, _){
            return bodyData(patientDataNotifier);
          },
        ),
      ),
    );
  }

  Widget appBarSection(String title, PatientDataNotifier patientDataNotifier) {
    return AppBar(
      title: Text(title),
      actions: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: SizedBox(
            width: 150,
            child: TextFormField(
              controller: nameController,
              decoration: InputDecoration(
                hintText: "Search",
                hintStyle: TextStyle(fontSize: 16, color: Colors.white),
                isDense: true,
                suffixIcon: Icon(Icons.search, color: Colors.white),
                focusedBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(16),
                  borderSide: BorderSide(
                    color: Colors.white,
                    width: 2.0,
                  ),
                ),
                enabledBorder: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(16),
                  borderSide: BorderSide(style: BorderStyle.none),
                ),
                filled: true,
                fillColor: Colors.lightBlue.shade200,
              ),
            ),
          ),
        ),
      ],
    );
  }

Brendan · Accepted Answer · 2022-09-21 11:11:38Z

6

You can actually use DataTable's border property to achieve this;

DataTable(
  ...
  border: TableBorder(
    horizontalInside: BorderSide(color: Colors.white, width: 0.7),
    verticalInside: BorderSide(color: Colors.white, width: 0.7),
    borderRadius: BorderRadius.circular(10),
    bottom: BorderSide(color: Colors.white, width: 0.7),
    top: BorderSide(color: Colors.white, width: 0.7),
    left: BorderSide(color: Colors.white, width: 0.7),
    right: BorderSide(color: Colors.white, width: 0.7),
  ),
  ...
);

answered Sep 21, 2022 at 11:11

Brendan

1,2371 gold badge21 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Md. Yeasin Sheikh · Accepted Answer · 2021-10-26 14:21:35Z

Using DataTable decoration can be used to have table border. to have inner-border line, we can put VerticalDivider() widget inside columns and every DataRow's cells.

As you can see I'm just missing centering Text.


  Widget buildTable(BuildContext context) {
    return Theme(
          data: Theme.of(context).copyWith(dividerColor: Colors.black),
          child: DataTable(
            decoration: BoxDecoration(
                border: Border.all(
              width: 1,
              color: Colors.black,
            )),
            columns: const <DataColumn>[
              DataColumn(label: Text("Sport", textAlign: TextAlign.center)),
              DataColumn(label: VerticalDivider()),
              DataColumn(
                  label: Text("Total Players", textAlign: TextAlign.center))
            ],
            rows: const <DataRow>[
              DataRow(
                cells: <DataCell>[
                  DataCell(Text('Soccer')),
                  DataCell(VerticalDivider()),
                  DataCell(Text("11")),
                ],
              ),
              DataRow(
                cells: <DataCell>[
                  DataCell(Text('Hockey')),
                  DataCell(VerticalDivider()),
                  DataCell(Text("11")),
                ],
              ),
            ],
          ),
    );
  }

Kareem Mohamed · Accepted Answer · 2021-06-11 23:20:58Z

0

you can use dividerThickness to determine the Thickness of you divider, unfortunately there is no ability to add vertical divider in DataTable.

answered Jun 11, 2021 at 23:20

Kareem Mohamed

613 silver badges7 bronze badges

Comments

Антон · Accepted Answer · 2022-04-18 17:41:31Z

0

I used Container with "decoration: BoxDecoration(border: Border.all(color: Colors.grey[300]!))" in DataCell. Also I gave constraints "height: 50.0, width: 100.0" for my Container, because my Content is dynamic. And finally, I make columnSpacing: 0 into DataTable options.

answered Apr 18, 2022 at 17:41

Антон

1

Collectives™ on Stack Overflow

How to set vertical and horizontal border in flutter datatable?

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related