Flutter How to create Table Example

Hi Every one in these Flutter tutorial we share how to used Table widget can be used to display items in a table layout. In these example we make a table widget and add icons and text in the table.

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

Flutter Table Example –:

In this Flutter Application example , we shall display some Icons, and Text in Row widgets in a table layout.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  double iconSize = 40;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter Table - codeplayon.com'),
          ),
          body: Center(
              child: Column(children: <Widget>[
                Container(
                  margin: EdgeInsets.all(20),
                  child: Table(
                    border: TableBorder.all(),
                    children: [
                      TableRow( children: [
                        Padding(
                          padding: const EdgeInsets.all(15.0),
                          child: Icon(Icons.cake, size: iconSize,),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(15.0),
                          child: Icon(Icons.voice_chat, size: iconSize,),
                        ),
                        Padding(
                          padding: const EdgeInsets.all(15.0),
                          child: Icon(Icons.add_location, size: iconSize,),
                        ),
                      ]),
                      TableRow( children: [
                      Padding(
                       padding: const EdgeInsets.all(15.0),
                        child: Column(children:[
                          Icon(Icons.account_box, size: iconSize,),
                          Text('My Account')

                        ]),
                      ),
                        Padding(
                          padding: const EdgeInsets.all(15.0),
                        child: Column(children:[
                          Icon(Icons.settings, size: iconSize,),
                          Text('Settings')
                        ]),
                        ),
                       Padding(
                        padding: const EdgeInsets.all(15.0),
                       child: Column(children:[
                          Icon(Icons.lightbulb_outline, size: iconSize,),
                          Text('Ideas')
                        ]),
                         ),
                      ]),

                    ],
                  ),
                ),
              ]))),
    );
  }
}

Run your flutter application and check your example Happy coding ReadMore Flutter Tutorial