Goal and Problem: I am trying to create a checkout page for my app with the itemization through a DataTable widget. I get an overflow error of 13 pixels though:
A RenderFlex overflowed by 23 pixels on the right. The relevant error-causing widget was DataTable
What is causing this issue and what is the remedy?
Picture:
Code:
Expanded(
flex: 8,
child: Container(
padding: EdgeInsets.all(10),
child: DataTable(
columns: [
DataColumn(
label: Text(
'#',
style: GoogleFonts.ubuntuMono(
color: colorPalette.chooseColor('orange'),
fontSize: 17),
),
),
DataColumn(
label: Text(
'Menu Item',
style: GoogleFonts.ubuntuMono(
color: colorPalette.chooseColor('orange'),
fontSize: 17),
),
),
DataColumn(
label: Text(
'Item Price',
style: GoogleFonts.ubuntuMono(
color: colorPalette.chooseColor('orange'),
fontSize: 17),
),
),
DataColumn(
label: Text(
'-',
style: GoogleFonts.ubuntuMono(
color: colorPalette.chooseColor('orange'),
fontSize: 17),
),
),
],
rows: [
DataRow(cells: [
DataCell(
Text(
'1',
style: GoogleFonts.ubuntuMono(
fontStyle: FontStyle.italic,
fontSize: 15,
color: colorPalette.chooseColor('darkGrey'),
),
),
),
DataCell(
Text(
'dish name',
style: GoogleFonts.ubuntuMono(
fontStyle: FontStyle.italic,
fontSize: 15,
color: colorPalette.chooseColor('darkGrey'),
),
),
),
DataCell(
Center(
child: Text('\$\$\$',
style: GoogleFonts.ubuntuMono(
fontWeight: FontWeight.bold,
fontSize: 15,
color: colorPalette.chooseColor('darkGrey'),
))),
),
DataCell(
IconButton(
icon: Icon(
Icons.cancel_sharp,
color: colorPalette.chooseColor('darkOrange'),
),
onPressed: () {},
),
),
]),
],
),
),
),

