How To Create Table in Flutter?

Hi Guys,

In this article i will explain you how to create table in flutter how can used in table with flutter.

Flutter Table widget can be utilized to display items in a table layout.

Flutter Table widget has properties like border, columnWidths, textDirection, etc., that avail us to enhance or modify the look of the table layout.

Here, i will full example of crate table using flutter follow my step you can check code and copy code.

Example

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}
class _MyAppState extends State {
  double iconSize = 40;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Table Example - Nicesnippets.com'),
          ),
          body: Center(
              child: Column(children: [
                Container(
                  margin: EdgeInsets.all(15),
                  child: Table(
                    border: TableBorder.all(),
                    children: [
                      TableRow( children: [
                        Column(children:[
                          Icon(Icons.video_call, size: iconSize,),
                          Text('Video Call')
                        ]),
                        Column(children:[
                          Icon(Icons.photo_album, size: iconSize,),
                          Text('Albums')
                        ]),
                        Column(children:[
                          Icon(Icons.notes, size: iconSize,),
                          Text('Notes')
                        ]),
                      ]),
                      TableRow( children: [
                        Column(children:[
                          Icon(Icons.privacy_tip, size: iconSize,),
                          Text('Privacy Tips')
                        ]),
                        Column(children:[
                          Icon(Icons.email, size: iconSize,),
                          Text('Email')
                        ]),
                        Column(children:[
                          Icon(Icons.calendar_today, size: iconSize,),
                          Text('Calendar')
                        ]),
                      ]),
                    ],
                  ),
                ),
              ]))),
    );
  }
}  

You can run this code in your android emulator you can show bellow image i mentioned the border for table widget, hence border is displayed.if you don't want to simple you can remove the property to not display the border.

Preview

I Hope It Will Help You...