How to remove default bottom devider from DataTable widget in flutter - flutter

How to remove default bottom devider from DataTable() widget
here is my code
return SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
dividerThickness: 0,
decoration: BoxDecoration(
border: Border.all(
width: 1,
color: Color(0xFFE6E7EB),
)),
columns: [
DataColumn(label: Text('RollNo')),
DataColumn(label: Text('Name')),
],
rows: [
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Arya')),
]),
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Arya')),
])
]),
),
);
I tried to set devider thickness value to 0 but it still shows some border bellow it


wrap your DataTable with the Theme widget and change the divide color to transparent also set dividerThickness to 0 in DataTable like this :
Widget build(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(dividerColor: Colors.transparent),
child:DataTable(
dividerThickness:0.0,
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: 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')),
],
),
],
));
}

Related

Adding a singlechildscrollview on Datatable

I have a datatable with 4 columns but only 3 are currently showing when the screen is rotated i am able to see all 4 columns it is not even scrollable.
I am try to see the 4 columns in a single view ut I am getting this error:
lib/screens/home_screen.dart:79:29: Error: Cannot invoke a non-'const' constructor where a const expression is expected.
Try using a constructor or factory that is 'const'.
DataTable(
^^^^^^^^^
lib/screens/home_screen.dart:78:54: Error: Too many positional arguments: 0 allowed, but 1 found.
Try removing the extra positional arguments.
const SingleChildScrollView(
^
/C:/src/flutter/flutter/packages/flutter/lib/src/widgets/single_child_scroll_view.dart:140:9: Context: Found this candidate, but the arguments don't match.
const SingleChildScrollView({
^^^^^^^^^^^^^^^^^^^^^
Restarted application in 274ms.
Here is th e code for the table:
ExpansionTile(
title: const Text("Click Here to See table Name"),
children: [
const SingleChildScrollView(
DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'Sr.No',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
DataColumn(
label: Text(
'Website',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
DataColumn(
label: Text(
'Tutorial',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
DataColumn(
label: Text(
'Review',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(
Text('1'),
),
DataCell(
Text('https://flutter.dev/'),
),
DataCell(
Text('Flutter'),
),
DataCell(
Text('5*'),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(
Text('2'),
),
DataCell(
Text('https://dart.dev/'),
),
DataCell(
Text('Dart'),
),
DataCell(
Text('5*'),
),
],
),
DataRow(
cells: <DataCell>[
DataCell(
Text('3'),
),
DataCell(
Text('https://pub.dev/'),
),
DataCell(
Text('Flutter Packages'),
),
DataCell(
Text('5*'),
),
],
),
],
),
),
],
),
My question: How can make the table view in one screen so that it can be wrapped or the columns shrink to be view in a singleview?

You nee to pass DataTable to SingleChildScrollView's child, you forget to add child world also needed to pass scrollDirection too:
SingleChildScrollView(
scrollDirection: Axis.horizontal,// <---add this
child: DataTable(// <---add this
columns: <DataColumn>[
...
]
)
)

You have to define Datatable to child and if you are going to define more than one, you need to remove const in columns.
SingleChildScrollView(
child: DataTable( //Edited
columns: <DataColumn>[ //Edited
...
]
)
)

Flutter DataTable render error: Right overflowed by 7.5 pixels

I am trying to build an Android app in my college project but in faculty info, I am getting an error, like A RenderFlex overflowed by 7.5 pixels on the right.
import 'package:flutter/material.dart';
class Faculty extends StatefulWidget {
const Faculty({Key? key}) : super(key: key);
#override
_FacultyState createState() => _FacultyState();
}
class _FacultyState extends State<Faculty> {
final style = const TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Faculty Info'),
backgroundColor: const Color(0xff01A0C7),
),
body: ListView(
children: <Widget>[
const SizedBox(height: 35),
const Center(
child: Text(
'Faculty-Chart',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
),
),
DataTable(
columns: const [
DataColumn(
label: Text(
'ID',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Name',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Contact no',
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
],
rows: const [
DataRow(
cells: [
DataCell(Text('1')),
DataCell(Text('Amit Thakkar')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('2')),
DataCell(Text('Hemang Thakkar')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('3')),
DataCell(Text('Shrushti Gajjar')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('4')),
DataCell(Text('Dhruvi Thrivedi')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('5')),
DataCell(Text('Deep Kotharia')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('6')),
DataCell(Text('Vaibhai Patel')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('7')),
DataCell(Text('Jaina Patel')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('8')),
DataCell(Text('Ritesh Patel')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('9')),
DataCell(Text('Ayushi Chaudhari')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('10')),
DataCell(Text('Mayuri Popat')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('11')),
DataCell(Text('Trusha Patel')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('12')),
DataCell(Text('Celine Davla')),
DataCell(Text('')),
],
),
DataRow(
cells: [
DataCell(Text('13')),
DataCell(Text('Jayshree Mehta')),
DataCell(Text('')),
],
),
],
),
],
),
);
}
}
This is my code and I am getting an error about pixel overflow. When I try to solve this error by using SingleChildScrollView, new errors are occurring.

This happens because a widget is bigger than what the screen can display, so it gets off-bounds.
Two solutions that will work: Either wrap your DataTable with a SingleChildScrollView and set the scrollDirection to Axis.horizontal:
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: [
Or set a fixed columnSpacing:
DataTable(
columnSpacing: 10,
columns: [

Wrap the DataTable widget with SingleChildScrollView then set the scroll direction to horizontal scrollDirection: Axis.horizontal
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Faculty extends StatefulWidget {
const Faculty({Key? key}) : super(key: key);
#override
_FacultyState createState() => _FacultyState();
}
class _FacultyState extends State<Faculty> {
TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(' Faculty Info'),
backgroundColor: Color(0xff01A0C7),
),
body: ListView(children: <Widget>[
SizedBox(height: 35),
Center(
child: Text(
'Faculty-Chart',
style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
)),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: [
DataColumn(
label: Text('ID',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold))),
DataColumn(
label: Text('Name',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold))),
DataColumn(
label: Text('Contact no',
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold))),
],
rows: [
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Amit Thakkar')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('2')),
DataCell(Text('Hemang Thakkar')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('3')),
DataCell(Text('Shrushti Gajjar')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('4')),
DataCell(Text('Dhruvi Thrivedi')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('5')),
DataCell(Text('Deep Kotharia')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('6')),
DataCell(Text('Vaibhai Patel')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('7')),
DataCell(Text('Jaina Patel')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('8')),
DataCell(Text('Ritesh Patel')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('9')),
DataCell(Text('Ayushi Chaudhari')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('10')),
DataCell(Text('Mayuri Popat')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('11')),
DataCell(Text('Trusha Patel')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('12')),
DataCell(Text('Celine Davla')),
DataCell(Text('')),
]),
DataRow(cells: [
DataCell(Text('13')),
DataCell(Text('Jayshree Mehta')),
DataCell(Text('')),
]),
],
),
),
]));
}
}

DataTable's DataCell Background Color

I am trying to change the background color of a DataCell in DataTable. i.e
DataRow(cells: [
DataCell(Text(i[0].text)),
DataCell(Container(
child: Text(i[1].text),
color: customTheme.colors.bgColor,
)),
DataCell(Text(i[3].text)),
DataCell(FlutterLogo()),
]),
But the above code change a small portion of the DataCell (just the background color of
text) because the container has the size of the text.
How can I change the full DataCell background color?

Try below code hope its help to you. Refer flutter DataTable
DataTable(
headingRowColor: MaterialStateColor.resolveWith(
(states) => Colors.blue,
),//for heading row color
columns: <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
],
),
DataRow(
color: MaterialStateProperty.all(Colors.red),//for data row color
cells: <DataCell>[
DataCell(Text('William')),
DataCell(Text('27')),
DataCell(Text('Associate Professor')),
],
),
],
),
Your Result screen->

flutter datatable how to add vertical border between columns

I have a data table like below with three columns and I want to add vertical border separator , divider or whatever it called between all columns-included header- is this available in flutter datatables and how to do this ?
thanks
as a side note : I tried multiple options but it is hard to minuplate like listview or json_table package
import 'package:flutter/material.dart';
import 'dart:math';
import 'package:talab/helpers/constant_helper.dart';
class TablesPage extends StatefulWidget {
#override
TablesPageState createState() => TablesPageState();
}
class TablesPageState extends State<TablesPage> {
// Generate a list of fiction prodcts
final List<Map> _products = List.generate(30, (i) {
return {"id": i, "name": "Product $i", "price": Random().nextInt(200) + 1};
});
int _currentSortColumn = 0;
bool _isAscending = true;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Kindacode.com'),
),
body: Container(
width: double.infinity,
child: SingleChildScrollView(
child: DataTable(
dividerThickness: 5,
decoration: BoxDecoration(
border:Border(
right: Divider.createBorderSide(context, width: 5.0),
left: Divider.createBorderSide(context, width: 5.0)
),
color: AppColors.secondaryColor,
),
showBottomBorder: true,
sortColumnIndex: _currentSortColumn,
sortAscending: _isAscending,
headingRowColor: MaterialStateProperty.all(Colors.amber[200]),
columns: [
DataColumn(label: Text('كود الطلب')
),
DataColumn(label: Text('الاشعار')),
DataColumn(
label: Text(
'التاريخ',
style: TextStyle(
color: Colors.blue, fontWeight: FontWeight.bold),
),),
],
rows: _products.map((item) {
return DataRow(cells: [
DataCell(Text(item['id'].toString())),
DataCell(Text(item['name'])),
DataCell(Text(item['price'].toString()))
]);
}).toList(),
),
),
));
}
}

As others have suggested, adding a vertical divider is one solution. Another is to use the DataTable's built-in border, which adds a border to every cell. It works like Border in the Decoration class. So, using your code example, the table can be defined:
DataTable(
border: TableBorder.all(
width: 5.0,
color:AppColors.secondaryColor,
dividerThickness: 5,
You can remove all of the other borders in your code. I believe this will give you the look you want.

As variant, you can use VerticalDivider widget. For example, define props of your vertical divider
Widget _verticalDivider = const VerticalDivider(
color: Colors.black,
thickness: 1,
);
and add it between header columns and cells
columns: [
DataColumn(label: Text('كود الطلب')),
DataColumn(label: _verticalDivider),
DataColumn(label: Text('الاشعار')),
DataColumn(label: _verticalDivider),
DataColumn(
label: Text(
'التاريخ',
style: TextStyle(
color: Colors.blue, fontWeight: FontWeight.bold),
),),
],
rows: _products.map((item) {
return DataRow(cells: [
DataCell(Text(item['id'].toString())),
DataCell(_verticalDivider),
DataCell(Text(item['name'])),
DataCell(_verticalDivider),
DataCell(Text(item['price'].toString()))
]);
}).toList(),

The following works for me:
DataTable(
showBottomBorder: true,
dividerThickness: 5.0,
columns: const <DataColumn>[
DataColumn(
label: Text(
'Name',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(''),
),
DataColumn(
label: Text(
'Age',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
DataColumn(
label: Text(''),
),
DataColumn(
label: Text(
'Role',
style: TextStyle(fontStyle: FontStyle.italic),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Albert')),
DataCell(VerticalDivider()),
DataCell(Text('19')),
DataCell(VerticalDivider()),
DataCell(Text('Student')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Janine')),
DataCell(VerticalDivider()),
DataCell(Text('43')),
DataCell(VerticalDivider()),
DataCell(Text('Professor')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('William')),
DataCell(VerticalDivider()),
DataCell(Text('27')),
DataCell(VerticalDivider()),
DataCell(Text('Associate Professor')),
],
),
],
)

Flutter | What is the best way to designed a Data Table to fit the full screen in Vertical View?

What are the best views in Flutter or best practice to implement a better UX?
The Vertical text View looks too small:
SingleChildScrollView bodyData() =>
SingleChildScrollView(
scrollDirection: Axis.vertical,
padding: EdgeInsets.all(1.2),
child: FittedBox(fit:BoxFit.fill,
child:
DataTable(
sortColumnIndex: 1,
sortAscending: true,
columns: <DataColumn>[
DataColumn(
label: Text("Company"),
onSort: (_, __) {
setState(() {
widget.photos.sort((a, b) =>
a.data["quote"]["companyName"]
.compareTo(b.data["quote"]["companyName"]));
});
},
),
DataColumn(
label: Text("ttmDivRate"),
numeric: true,
onSort: (_,__) {
setState(() {
widget.photos.sort((a, b) =>
a.data["stats"]["ttmDividendRate"]
.compareTo(b.data["stats"]["ttmDividendRate"]));
View code:
The Horizontal view is fine:

Try wrapping the DataTable with another SingleChildScrollView and set the scrollDirection to Axis.horizontal. That way you can increase the text size, and still be able to scroll horizontally to see everything.
Here is an example:
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(
home: Scaffold(
backgroundColor: Colors.black54,
appBar: AppBar(),
body: Center(
child: Container(
color: Colors.white,
height: 130,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: <DataColumn>[
DataColumn(
label: Text('Column 1'),
),
DataColumn(
label: Text('Column 2'),
),
DataColumn(
label: Text('Column 3'),
),
DataColumn(
label: Text('Column 4'),
),
DataColumn(
label: Text('Column 5'),
),
DataColumn(
label: Text('Column 6'),
),
],
rows: <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
DataCell(Text('Data')),
],
),
],
),
),
),
),
),
),
);
}
}

We can use a FittedBox to fit height of the data table and let it scroll horizontally.
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child:
FittedBox(
fit: BoxFit.fitHeight,
child: DataTable(
//sortAscending: false,
//sortColumnIndex: 2,
columns: <DataColumn>[
DataColumn(
label: Text("No",textScaleFactor: 1,),
numeric: false,
),
DataColumn(
label: Text("Name",textScaleFactor: 1,),
numeric: false,
),
DataColumn(
label: Text("Delay\nMinutes",textScaleFactor: 1,),
numeric: false,
),
],
rows: TrainDelayedList.map((t) =>
DataRow(cells: [
DataCell(
Text(t.trainno,textScaleFactor: 1,),
),
DataCell(
Text(t.trainname,maxLines: 3,textScaleFactor: 1,)
),
DataCell(
Text(t.delayatstn.toString(),textScaleFactor: 1,)
),
])).toList()
),
))