flutter problem: dataColumn width issue and How to remove rowDivider from dataTable? - flutter

Question

here i got width issue for data table and I also want every rowDivider will be remove,
and here I use animation, if you have any idea to improve animation then tell me.
here i got width issue for data table and I also want every rowDivider will be remove,
and here I use animation, if you have any idea to improve animation then tell me.
this is my full code
import 'package:bonanza_flutter/Constants/constants.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class HomePage extends StatefulWidget {
const HomePage({Key? key}) : super(key: key);
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
double _height = 60.0;
bool _isExpanded = false;
Future<bool> _showList() async {
await Future.delayed(Duration(milliseconds: 300));
return true;
}
Future<bool> _showList1() async {
await Future.delayed(Duration(milliseconds: 10));
return true;
}
bool isOnPMS = true;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.transparent,
appBar: AppBar(
),
body: SingleChildScrollView(
child: Column(
children: [
// imageSlider(),
pmsData(),
// advantages(),
// products(),
Container(
height: 20,
)
],
),
),
);
}
}
extension WidgetExtension on _HomePageState {
pmsData() {
return Container(
color: lightBlue,
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(20.0),
child: Column( crossAxisAlignment: CrossAxisAlignment.start,children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
"PMS",
style:
TextStyle(fontSize: tSize16, fontWeight: FontWeight.w500),
),
Row(
children: [
Container(
width: 22,
height: 22,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(3),
color: skyBlue,
),
child: Icon(
Icons.arrow_back_ios_outlined,
color: Colors.white,
size: 17,
),
),
SizedBox(
width: 20,
),
Container(
width: 22,
height: 22,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(3),
color: skyBlue,
),
child: Icon(
Icons.arrow_forward_ios_rounded,
color: Colors.white,
size: 17,
),
),
],
)
],
),
SizedBox(
height: 8,
),
Text(
"ICICI Prudential PMS",
style: TextStyle(
fontSize: tSize14, fontWeight: FontWeight.w500, color: skyBlue),
),
SizedBox(
height: 12,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"\u{20B9} 50,00,000",
style: TextStyle(
fontSize: tSize11,
fontWeight: FontWeight.w500,
color: blackColor),
),
SizedBox(
height: 5,
),
Text(
"ICICI Prudential PMS",
style: TextStyle(
fontSize: tSize11,
fontWeight: FontWeight.w500,
color: greyColor),
),
SizedBox(
height: 14,
),
Text(
"\u{20B9} 2,02,993 (+4.06%)",
style: TextStyle(
fontSize: tSize11,
fontWeight: FontWeight.w500,
color: green2Color),
),
SizedBox(
height: 5,
),
Text(
"Gains & Loss",
style: TextStyle(
fontSize: tSize11,
fontWeight: FontWeight.w500,
color: greyColor),
),
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"\u{20B9} 52,02,993",
style: TextStyle(
fontSize: tSize11,
fontWeight: FontWeight.w500,
color: blackColor),
),
SizedBox(
height: 5,
),
Text(
"Current Market Value",
style: TextStyle(
fontSize: tSize11,
fontWeight: FontWeight.w500,
color: greyColor),
),
SizedBox(
height: 14,
),
Text(
"\u{20B9} 5",
style: TextStyle(
fontSize: tSize11,
fontWeight: FontWeight.w500,
color: blackColor),
),
SizedBox(
height: 5,
),
Text(
"Total Holdings",
style: TextStyle(
fontSize: tSize11,
fontWeight: FontWeight.w500,
color: greyColor),
),
],
),
SizedBox(
width: 0,
)
],
),
],),
),
AnimatedContainer(
duration: Duration(milliseconds: 300),
height: _height,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
),
// padding: EdgeInsets.only(left: 15, right: 15),
child: Column(
children: [
_isExpanded
? SizedBox.shrink()
: FutureBuilder(
future: _showList1(),
/// will wait untill box animation completed
builder: (context, snapshot) {
if (!snapshot.hasData) {
return SizedBox();
}
return Center(
child: Padding(
padding: const EdgeInsets.only(
top: 20.0, bottom: 00, left: 70, right: 70),
child: SizedBox(
height: 25,
width: 100,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: skyBlue,
shadowColor: Colors.transparent),
onPressed: () {
setState(() {
isOnPMS = !isOnPMS;
if (!_isExpanded) {
setState(() {
_height = 350;
_isExpanded = true;
});
} else {
setState(() {
_height = 50;
_isExpanded = false;
});
}
});
print(_isExpanded);
},
child: Text("View More"),
),
),
),
);
}),
_isExpanded
? FutureBuilder(
future: _showList(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return SizedBox();
}
return Padding(
padding: const EdgeInsets.only(
top: 20.0, bottom: 00, left: 0, right: 0),
child: Column(
children: [
DataTable(
columns: const <DataColumn>[
DataColumn(
label: Text(
'#',style: TextStyle(color: Colors.white),
),
),
DataColumn(
label: Text(
'STOCK',style: TextStyle(color: Colors.white),
),
),
DataColumn(
label: Text(
'SECTOR',style: TextStyle(color: Colors.white),
),
),
DataColumn(
label: Text(
'WEIGHT',style: TextStyle(color: Colors.white),
),
),
],
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Text('1')),
DataCell(Text('TCS')),
DataCell(Text('Global')),
DataCell(Text('11%')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('2')),
DataCell(Text('DMART')),
DataCell(Text('Consumers')),
DataCell(Text('10%')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('3')),
DataCell(Text('ICICIBANK')),
DataCell(Text('Financials')),
DataCell(Text('12%')),
],
),
DataRow(
cells: <DataCell>[
DataCell(Text('4')),
DataCell(Text('RELIANCE')),
DataCell(Text('Industrial')),
DataCell(Text('13%')),
],
),
],
dividerThickness: 0,
headingRowColor:
MaterialStateColor.resolveWith(
(states) => greyColor),
headingRowHeight: 30,
),
Center(
child: Padding(
padding: const EdgeInsets.only(
top: 20.0,
bottom: 00,
left: 70,
right: 70),
child: SizedBox(
height: 25,
width: 100,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
primary: skyBlue,
shadowColor: Colors.transparent),
onPressed: () {
setState(() {
isOnPMS = !isOnPMS;
if (!_isExpanded) {
setState(() {
_height = 350;
_isExpanded = true;
});
} else {
setState(() {
_height = 50;
_isExpanded = false;
});
}
});
print(_isExpanded);
},
child: const Text('View Less'),
),
),
),
)
],
),
);
})
: SizedBox.shrink(),
],
),
)
],
),
);
}
}
I want like this dataDable.
this is my ui which I created.

Answer 1

Wrap DataTable with SingleChildScrollView and set scrollDirection to horizontal.
Use TableBorder to remove divider.