Flutter How to create Table

Flutter How to create Table Example

Flutter Tutorial for beginner

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