Flutter Tutorial

Flutter How to create Table Example

Flutter How to create Table
939views

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

Welcome to my blog! I’m Ritu Malik, and here at Codeplayon.com, we are dedicated to delivering timely and well-researched content. Our passion for knowledge shines through in the diverse range of topics we cover. Over the years, we have explored various niches such as business, finance, technology, marketing, lifestyle, website reviews and many others.