Fill width in single datacell in flutter - flutter

Question

I'm trying to accomplished something like had been issued here : Flutter single `DataCell` color
I want to grey out the cell to let user know that was supposed to leave blank. Currently I manage to fill the height of datacell but the width.
my code snippet:
_data[i][newColumn] = Container(
width: double.infinity,
height: double.infinity,
color: Colors.grey,
child: Text(''));
Result: Last cell at the most right which fill up height space only:
full code :
import 'dart:convert';
import 'dart:ui';
import 'package:http/http.dart';
import 'package:flutter/material.dart';
class InspectionSheet extends StatefulWidget {
const InspectionSheet({Key? key}) : super(key: key);
#override
State<InspectionSheet> createState() => _InspectionSheetState();
}
class _InspectionSheetState extends State<InspectionSheet> {
GlobalKey<FormState> _formKey = new GlobalKey();
bool validate = false;
TextEditingController ctrlsampleSize = TextEditingController();
final List<Map<String, dynamic>> _data = [
{
//"checkitemID": "0",
"Ballooning No": "1",
"Datatype": "1",
"Specifications": ".325+-0.020",
"Tool": "CALIPER",
"LSL": "0.305",
"Target": "2",
"USL": "0.325",
"Tol-": "0.02",
"Tol+": "0.02",
"Image": "",
"WI": ""
},
{
//"checkitemID": "0",
"Ballooning No": "2",
"Datatype": "2",
"Specifications": ".325+-0.020",
"Tool": "CALIPER",
"LSL": "0.305",
"Target": "2",
"USL": "0.325",
"Tol-": "0.02",
"Tol+": "0.02",
"Image": "",
"WI": ""
},
];
late List<String> _columnNames;
//String _selectedValue = inputList.first;
String _selectedValue = 'PASS';
void startbutton() {
validateEmpty();
if (_formKey.currentState!.validate()) {
addDataCol();
}
}
void validateEmpty() {
//if (_formKey.currentState!.validate()) {
// // If the form is valid, display a snackbar. In the real world,
// // you'd often call a server or save the information in a database.
// ScaffoldMessenger.of(context).showSnackBar(
// const SnackBar(content: Text('Processing Data')),
// );
ctrlsampleSize.text.isEmpty ? validate = false : validate = true;
//}
}
void addDataCol() {
int colNo = int.parse(ctrlsampleSize.text);
if (colNo < 1) {
return;
}
setState(() {
for (var i = 1; i <= colNo; i++) {
_addColumn('Data $i');
}
});
}
void _addColumn(String newColumn) {
if (_columnNames.contains(newColumn)) {
return;
}
setState(() {
for (var i = 0; i <= _data.length - 1; i++) {
if (_data[i]['Datatype'] == '1') {
_data[i][newColumn] = TextFormField();
} else if (_data[i]['Datatype'] == '2') {
_data[i][newColumn] = DropdownButton<String>(
value: _selectedValue,
icon: const Icon(Icons.arrow_drop_down_circle_outlined),
elevation: 16,
underline: Container(
height: 2,
color: Colors.blue,
),
onChanged: (newValue) {
setState(() {
_selectedValue = newValue!;
});
},
items:
// inputList.map<DropdownMenuItem<String>>((String value) {
// return DropdownMenuItem<String>(
// value: value,
// child: Text(value),
// onTap: () {
// _selectedValue = value;
// },
// );
// }).toList(),
[
DropdownMenuItem(
value: 'PASS',
child: const Text('PASS'),
onTap: () {
_selectedValue = 'PASS';
},
),
DropdownMenuItem(
value: 'FAIL',
child: const Text('FAIL'),
onTap: () {
_selectedValue = 'FAIL';
},
),
DropdownMenuItem(
value: 'UAI',
child: const Text('UAI'),
onTap: () {
_selectedValue = 'UAI';
},
),
DropdownMenuItem(
value: 'NA',
child: const Text('NA'),
onTap: () {
_selectedValue = 'NA';
},
)
]);
} else if (_data[i]['Datatype'] == '3') {
if (newColumn == 'Data 1') {
_data[i][newColumn] = TextButton(
onPressed: () {
_displayTextInputDialog(context);
},
child: const Text('-'));
} else {
_data[i][newColumn] = Container(
width: double.infinity,
height: double.infinity,
color: Colors.grey,
child: Text(''));
}
} else {
_data[i][newColumn] = TextButton(
onPressed: () {
_displayTextInputDialog(context);
},
child: const Text('-'));
}
}
_columnNames.add(newColumn);
});
}
#override
void initState() {
dateInput.text = "";
_columnNames = _data[0].keys.toList();
//set the initial value of text field
super.initState();
//// Start listening to changes.
ctrlsampleSize.addListener(() {});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: ListView(
children: [
Form(
child: Row(
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 210,
child: Form(
key: _formKey,
child: ListView(
children: [
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Container(
width: 200,
height: 200,
child: Column(
children: <Widget>[
TextFormField(
controller: ctrlsampleSize,
validator: ((value) {
if (value == null || value.isEmpty) {
return 'Please enter sample size';
}
return null;
}),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 5, 0, 0),
child: Container(
width: 400,
height: 200,
decoration: BoxDecoration(
border: Border.all(color: Colors.black),
image: DecorationImage(
image: AssetImage('images/Test1.jpg'),
fit: BoxFit.fill,
)),
),
),
],
),
],
),
),
Container(
child: Container(
child: Center(
child: Row(
// add Column
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 860, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const [
Text(
"Total Parameter : 6",
textAlign: TextAlign.left,
style: TextStyle(
fontSize: 16, fontWeight: FontWeight.bold),
),
],
),
),
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 8, 0),
child: ElevatedButton(
onPressed: () => startbutton(),
child: const Text('Start'),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 8, 0),
child: ElevatedButton(
onPressed: () {},
child: const Text('Reset'),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(15, 15, 8, 0),
child: ElevatedButton(
onPressed: () {},
child: const Text('Save'),
),
),
],
),
),
)),
Padding(
padding: const EdgeInsets.all(8.0),
child:
//****uncomment if use Provider */
// Container(
// decoration: BoxDecoration(
// border: Border.all(color: Colors.black),
// ),
// child: ConstrainedBox(
// constraints: const BoxConstraints(
// maxHeight: 600,
// maxWidth: 813,
// ),
// child: Column(
// children: [
// Expanded(
// child: ChangeNotifierProvider<CheckItemProvider>(
// create: (context) => CheckItemProvider(),
// child: Consumer<CheckItemProvider>(
// builder: (context, provider, child) {
// provider.getData(context);
// return const Center(
// child: CircularProgressIndicator());
// // when we have the json loaded... let's put the data into a data table widget
// return
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: SingleChildScrollView(
scrollDirection: Axis.vertical,
child: DataTable(
headingRowHeight: 30,
border: TableBorder.all(
color: Colors.grey,
),
headingRowColor: MaterialStateColor.resolveWith(
(states) => Colors.lightBlue),
headingTextStyle: const TextStyle(
color: Colors.white, fontWeight: FontWeight.w800),
columns: _columnNames.map((columnName) {
return DataColumn(
label: Text(
columnName,
// style: const TextStyle(
// fontSize: 18,
// fontWeight: FontWeight.w600,
// ),
),
);
}).toList(),
rows:
_data // Loops through dataColumnText, each iteration assigning the value to element
.map((row) {
return DataRow(
cells: row.values.map((cellValue) {
try {
return DataCell(
cellValue,
onTap: () {},
);
} catch (e) {
return DataCell(Text(cellValue));
}
;
}).toList());
}).toList(),
),
),
),
//},
// ),
// ),
// ),
// ],
// ),
// ),
// ),
),
],
),
);
}
}