Flutter Table for multiple column display

Question

Have been trying to display data on a table, I used Datatable but my only 4 columns show, and the rest hidden. And most of the titles of columns show the error "Right overflowed by 12 pixels" but when I turn my device landscape it shows others and some still hidden. Below is my code:



                 body: SingleChildScrollView(
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  SizedBox(
                    height: 20,
                  ),
                  Center(
                      child: Text(
                        'Rejected',
                        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                      )),
                  SizedBox(
                    height: 10,
                  ),

                    Material(
                    elevation: 3.0,
    borderRadius: BorderRadius.circular(30.0),
    color: colorBlue,
    child: MaterialButton(
    minWidth: MediaQuery.of(context).size.width,
    padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
    onPressed: () async {

    },child: Text(
      "ADD NEW",
      style: TextStyle(
        color: Colors.white,
      ),
    ),
    )
                    ),
                  SizedBox(
                    height: 10,
                  ),

                  DataTable(
                    columns: [
                      DataColumn(label: Text('No')),
                      DataColumn(label: Text('PO Ref')),
                      DataColumn(label: Text('Req Ref')),
                      DataColumn(label: Text('Requester')),
                      DataColumn(label: Text('Supplier')),
                      DataColumn(label: Text('Created')),
                      DataColumn(label: Text('By')),
                      DataColumn(label: Text('Delivery')),
                      DataColumn(label: Text('Status')),

                    ],
                    rows: [
                      DataRow(cells: [
                        DataCell(Text('1')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),

                      ]),
                      DataRow(cells: [
                        DataCell(Text('2')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                      DataRow(cells: [
                        DataCell(Text('3')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                    ],
                  ),
                ]))

Is there a way I can make just this page landscape to see all my data without hiding and removing the overflowed error?

If you're using Row then try to wrap the widget. And please share the complete code — Ashok, Oct 25 '20 at 18:54
I just updated my full code. Am using SingleScrollView() to wrap it. — mideveloper, Oct 25 '20 at 19:37

score 0 · Answer 1 · answered Oct 25 '20 at 18:49

0

You can try and use the SingleChildScrollView() widget to make the page scrollable and display the contents of the table , not sure about how to make the device landscape though. You can look at this thread and see if it answers your landscape problem : Flutter: how to prevent device orientation changes and force portrait?

answered Oct 25 '20 at 18:49

Recondit

114
9

I just updated my code, I used SingleChildScrollView(), and still the same error. Also, I followed the link you gave and this is to make the whole application portrait but I want only this page to be landscape and others portrait. – mideveloper Oct 25 '20 at 19:35

score 0 · Accepted Answer · answered Oct 26 '20 at 19:17

So I was able to solve this by simple adding scrollDirection: Axis.horizontal, inside my SingleChildScrollView below is now my updated code:



                     body: SingleChildScrollView(
scrollDirection: Axis.horizontal,//this is the line of code added
            child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: <Widget>[
                  SizedBox(
                    height: 20,
                  ),
                  Center(
                      child: Text(
                        'Rejected',
                        style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                      )),
                  SizedBox(
                    height: 10,
                  ),

                    Material(
                    elevation: 3.0,
    borderRadius: BorderRadius.circular(30.0),
    color: colorBlue,
    child: MaterialButton(
    minWidth: MediaQuery.of(context).size.width,
    padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
    onPressed: () async {

    },child: Text(
      "ADD NEW",
      style: TextStyle(
        color: Colors.white,
      ),
    ),
    )
                    ),
                  SizedBox(
                    height: 10,
                  ),

                  DataTable(
                    columns: [
                      DataColumn(label: Text('No')),
                      DataColumn(label: Text('PO Ref')),
                      DataColumn(label: Text('Req Ref')),
                      DataColumn(label: Text('Requester')),
                      DataColumn(label: Text('Supplier')),
                      DataColumn(label: Text('Created')),
                      DataColumn(label: Text('By')),
                      DataColumn(label: Text('Delivery')),
                      DataColumn(label: Text('Status')),

                    ],
                    rows: [
                      DataRow(cells: [
                        DataCell(Text('1')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),

                      ]),
                      DataRow(cells: [
                        DataCell(Text('2')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                      DataRow(cells: [
                        DataCell(Text('3')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                    ],
                  ),
                ]))

score 0 · Answer 3 · answered Sep 08 '22 at 13:40

your table widget add in SingleChildScrollView() and add scrollDirection: Axis.horizontal,

body: Container(
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              SizedBox(
                height: 20,
              ),
              Center(
                  child: Text(
                    'Rejected',
                    style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                  )),
              SizedBox(
                height: 10,
              ),

              Material(
                  elevation: 3.0,
                  borderRadius: BorderRadius.circular(30.0),
                  color: Colors.blue,
                  child: MaterialButton(
                    minWidth: MediaQuery.of(context).size.width,
                    padding: EdgeInsets.fromLTRB(20.0, 15.0, 20.0, 15.0),
                    onPressed: () async {

                    },child: Text(
                    "ADD NEW",
                    style: TextStyle(
                      color: Colors.white,
                    ),
                  ),
                  )
              ),
              SizedBox(
                height: 10,
              ),
              //add this scrollview & ScrollDirection
              SingleChildScrollView(
                scrollDirection: Axis.horizontal,
                child: Container(
                  child: DataTable(
                    columns: [
                      DataColumn(label: Text('No')),
                      DataColumn(label: Text('PO Ref')),
                      DataColumn(label: Text('Req Ref')),
                      DataColumn(label: Text('Requester')),
                      DataColumn(label: Text('Supplier')),
                      DataColumn(label: Text('Created')),
                      DataColumn(label: Text('By')),
                      DataColumn(label: Text('Delivery')),
                      DataColumn(label: Text('Status')),

                    ],
                    rows: [
                      DataRow(cells: [
                        DataCell(Text('1')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),

                      ]),
                      DataRow(cells: [
                        DataCell(Text('2')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('John')),
                        DataCell(Text('9')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                      DataRow(cells: [
                        DataCell(Text('3')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Tony')),
                        DataCell(Text('8')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),
                        DataCell(Text('Arya')),
                        DataCell(Text('6')),


                      ]),
                    ],
                  ),
                ),
              ),
            ]),
      ),

Flutter Table for multiple column display

3 Answers3