
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