Flutter Tutorial for beginner

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