Search code examples
flutterdatatableflutter-layout

Flutter, How to do like this table?


I need to do the dataTable like the style below:

enter image description here


Solution

  • You can use Table, like this:

    Container(
                color: Colors.white,
                margin: EdgeInsets.all(20.0),
                child: Table(
                  border: TableBorder.all(color: Colors.black),
                  children: [
                    TableRow(children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          'Full Name',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, color: Colors.black),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('Sarah'),
                      ),
                    ]),
                    TableRow(children: [
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          'Email',
                          style: TextStyle(
                              fontWeight: FontWeight.bold, color: Colors.black),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text('[email protected]'),
                      ),
                    ])
                  ],
                ),
              ),
    

    enter image description here

    You can find more about Table widget here