I'm working on positioning these columns on my datatable but I can't figure it out. Here is what it currently looks like with the working code:
Container(
color: Color(0xffF5F5F5),
child: DataTable(
headingRowHeight: 40,
columns: [
DataColumn(label: IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
icon: Icon(Icons.remove_circle, color: Color(0xffB93E3E),),
onPressed: () {
// setState(() {
// // _volume += 10;
// });
},
)),
DataColumn(label: Text('Text')),
DataColumn(label: IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
icon: Icon(Icons.menu, color: Color(0xff979797),),
tooltip: 'Hold and move up and down to sort.',
onPressed: () {
// setState(() {
// // _volume += 10;
// });
},
)),
],
rows: [
],
),
),
Container(
color: Color(0xffF5F5F5),
child: DataTable(
headingRowHeight: 40,
columns: [
DataColumn(
label: IconButton(
splashColor: Colors.transparent,
highlightColor: Colors.transparent,
icon: Icon(Icons.add_circle, color: Color(0xff58B93E),),
onPressed: () {
// setState(() {
// // _volume += 10;
// });
},
)),
DataColumn(label: Text('Text')),
],
rows: [
],
),
),
Here is the position that I'd like the columns to be at. As you can see the IconButton is positioned on the left then the text is straight after that and the Menu icon is positioned at the end on the minus button row:
Using simple column and rows.
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("your app")),
body: Column(children: [
Container(
child: Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 15, 10, 15),
child: Icon(
Icons.remove_circle,
color: Colors.red,
),
),
Expanded(
child: Text("your first text"),
),
Padding(
padding: const EdgeInsets.only(right: 20),
child: Icon(Icons.menu),
),
],
),
),
Container(
height: 1,
color: Colors.grey,
),
Row(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 15, 10, 15),
child: Icon(
Icons.add_circle,
color: Colors.green,
),
),
Expanded(
child: Text("your second text"),
),
],
),
Container(
height: 1,
color: Colors.grey,
),
]),
);
}
}
Using DataTable. I do not know your need, but to use datatable it is necessary to make a workaround and place the items in the header. This is not highly recommended
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("your app")),
body: SizedBox(
width: double.infinity,
child: DataTable(
columns: const <DataColumn>[
DataColumn(
label: Icon(
Icons.remove_circle,
color: Colors.red,
),
),
DataColumn(
label: Text(
'Your first text',
),
),
DataColumn(
label: Icon(Icons.menu),
),
],
headingRowHeight: 40,
rows: const <DataRow>[
DataRow(
cells: <DataCell>[
DataCell(Icon(
Icons.add_circle,
color: Colors.green,
)),
DataCell(Text('your second text')),
DataCell(Text(
"")), // you need 3 datacell because yopur have 3 headers
],
),
]),
),
);
}
}