6

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:

enter image description here

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: () {},
                      ),
                    ),
                  ]),
                ],
              ),
            ),
          ),

2 Answers 2

7

You can copy paste run full code below
You use use SingleChildScrollView with Axis.horizontal wrap DataTable
code snippet

child: SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            columns: [

working demo

enter image description here

full code

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Expanded(
              flex: 8,
              child: Container(
                padding: EdgeInsets.all(10),
                child: SingleChildScrollView(
                  scrollDirection: Axis.horizontal,
                  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: () {},
                          ),
                        ),
                      ]),
                    ],
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks for putting that together. I should probably just use list tiles then since scrolling wouldn't look professional there.
6

per this thread: https://stackoverflow.com/a/57177294/13795508

Using FittedBox() solved this for me instead of the scroll view which could be useful under other circumstances.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.