Flutter How to create Table Example
May 20, 2021
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
Tags:flutter flutter table border example, Flutter How to create Table Example, Flutter Table, flutter table builder scrollable table, flutter table colspan flutter table row height, Flutter table column width, flutter table column width flutter, How to create table like ui in flutter, Table in Flutter | Using Table in Flutter, table ui flutter table row decoration, Table Widget in Flutter