CODEWITHSUNDEEP
flutterdart
Murali Krishnan
Murali Krishnan

Reputation: 312

How to remove the outermost border lines of table in flutter | Flutter

                  Container(
                        height: 100,
                        width: 350,
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.all(
                            Radius.circular(15),
                          ),
                        ),
                        child: Table(
                          defaultColumnWidth: FixedColumnWidth(120.0),
                          border: TableBorder.all(
                            color: Colors.grey[600],
                            //style: BorderStyle.solid,
                            width: 0.5,
                          ),
                          children: [
                            TableRow(),
                            TableRow(),
                            TableRow(),
                              ],
                              
                               ),
                          
                              ],
                            ),
                          ],
                        ),
                      ),

I need to remove the outermost border line of this table. I here use Table widget to show the table. The image with this is the output i want. Is there any method to remove the outermost lines or any other ideas to make like this. https://drive.google.com/file/d/1v1BWmO56m6Zq4kPgiyOoCzv8K2XvrFU7/view?usp=sharing is the link of the widget i want to build.

Upvotes: 6

Views: 13136

Answers (2)

eqrakhattak
eqrakhattak

Reputation: 563

In the TableBorder class there's a property TableBorder.symmetric which specifies the outer and inner border separately.

The optimized code would look like:

Table(
   border: TableBorder.symmetric(
       outside: BorderSide.none, 
       inside: const BorderSide(width: 1, color: Colors.grey, style: BorderStyle.solid),
   ),
   children: [
       TableRow(),
       TableRow(),
       TableRow(),
   ],
)

Upvotes: 3

Anush Bhatia
Anush Bhatia

Reputation: 644

child: Table(
    border: TableBorder(horizontalInside: BorderSide(width: 1, color: Colors.blue, style: BorderStyle.solid)),

This is how you can remove the border of the table in flutter.

Sample of the dart pad is attached below👇
https://dartpad.dev/0bc0f378c2722dc94e7a8c583180705e

For reading more about the article you can look ahead at https://medium.com/flutter-community/table-in-flutter-beyond-the-basics-8d31b022b451

Upvotes: 10

Related Questions