Flutter DataTable render error: Right overflowed by 7.5 pixels

Question

I am trying to build an Android app in my college project but in faculty info, I am getting an error, like A RenderFlex overflowed by 7.5 pixels on the right.

import 'package:flutter/material.dart';

class Faculty extends StatefulWidget {
  const Faculty({Key? key}) : super(key: key);

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

class _FacultyState extends State<Faculty> {
  final style = const TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Faculty Info'),
        backgroundColor: const Color(0xff01A0C7),
      ),
      body: ListView(
        children: <Widget>[
          const SizedBox(height: 35),
          const Center(
            child: Text(
              'Faculty-Chart',
              style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
            ),
          ),
          DataTable(
            columns: const [
              DataColumn(
                label: Text(
                  'ID',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
              ),
              DataColumn(
                label: Text(
                  'Name',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
              ),
              DataColumn(
                label: Text(
                  'Contact no',
                  style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
              ),
            ],
            rows: const [
              DataRow(
                cells: [
                  DataCell(Text('1')),
                  DataCell(Text('Amit Thakkar')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('2')),
                  DataCell(Text('Hemang Thakkar')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('3')),
                  DataCell(Text('Shrushti Gajjar')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('4')),
                  DataCell(Text('Dhruvi Thrivedi')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('5')),
                  DataCell(Text('Deep Kotharia')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('6')),
                  DataCell(Text('Vaibhai Patel')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('7')),
                  DataCell(Text('Jaina Patel')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('8')),
                  DataCell(Text('Ritesh Patel')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('9')),
                  DataCell(Text('Ayushi Chaudhari')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('10')),
                  DataCell(Text('Mayuri Popat')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('11')),
                  DataCell(Text('Trusha Patel')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('12')),
                  DataCell(Text('Celine Davla')),
                  DataCell(Text('')),
                ],
              ),
              DataRow(
                cells: [
                  DataCell(Text('13')),
                  DataCell(Text('Jayshree Mehta')),
                  DataCell(Text('')),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

This is my code and I am getting an error about pixel overflow. When I try to solve this error by using SingleChildScrollView, new errors are occurring.

Answer 1

Wrap the DataTable widget with SingleChildScrollView then set the scroll direction to horizontal scrollDirection: Axis.horizontal

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

class Faculty extends StatefulWidget {
  const Faculty({Key? key}) : super(key: key);

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

class _FacultyState extends State<Faculty> {
  TextStyle style = TextStyle(fontFamily: 'Montserrat', fontSize: 20.0);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('           Faculty Info'),
          backgroundColor: Color(0xff01A0C7),
        ),
        body: ListView(children: <Widget>[
          SizedBox(height: 35),
          Center(
              child: Text(
            'Faculty-Chart',
            style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
          )),
          SingleChildScrollView(
            scrollDirection: Axis.horizontal,
            child: DataTable(
              columns: [
                DataColumn(
                    label: Text('ID',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold))),
                DataColumn(
                    label: Text('Name',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold))),
                DataColumn(
                    label: Text('Contact no',
                        style: TextStyle(
                            fontSize: 18, fontWeight: FontWeight.bold))),
              ],
              rows: [
                DataRow(cells: [
                  DataCell(Text('1')),
                  DataCell(Text('Amit Thakkar')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('2')),
                  DataCell(Text('Hemang Thakkar')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('3')),
                  DataCell(Text('Shrushti Gajjar')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('4')),
                  DataCell(Text('Dhruvi Thrivedi')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('5')),
                  DataCell(Text('Deep Kotharia')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('6')),
                  DataCell(Text('Vaibhai Patel')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('7')),
                  DataCell(Text('Jaina Patel')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('8')),
                  DataCell(Text('Ritesh Patel')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('9')),
                  DataCell(Text('Ayushi Chaudhari')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('10')),
                  DataCell(Text('Mayuri Popat')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('11')),
                  DataCell(Text('Trusha Patel')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('12')),
                  DataCell(Text('Celine Davla')),
                  DataCell(Text('')),
                ]),
                DataRow(cells: [
                  DataCell(Text('13')),
                  DataCell(Text('Jayshree Mehta')),
                  DataCell(Text('')),
                ]),
              ],
            ),
          ),
        ]));
  }
}

Answer 2

This happens because a widget is bigger than what the screen can display, so it gets off-bounds.

Two solutions that will work: Either wrap your DataTable with a SingleChildScrollView and set the scrollDirection to Axis.horizontal:

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

Or set a fixed columnSpacing:

         DataTable(
            columnSpacing: 10,
            columns: [