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
– Ashok, Commented Oct 25, 2020 at 18:54
I just updated my full code. Am using SingleScrollView() to wrap it. — mideveloper
– mideveloper, Commented Oct 25, 2020 at 19:37

sajid · Accepted Answer · 2022-09-08 13:40:49Z

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')),


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

Recondit · Accepted Answer · 2020-10-25 18:49:34Z

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, 2020 at 18:49

Recondit

13910 bronze badges

1 Comment

mideveloper Over a year ago

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 · Accepted Answer · 2020-10-26 19:17:11Z

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')),


                      ]),
                    ],
                  ),
                ]))

Collectives™ on Stack Overflow

Flutter Table for multiple column display

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related