How To Create Table in Flutter?

Android Studio , Flutter

Nicesnippets

226

03-06-2021


How To Create Table in Flutter?

Hi Guys,

In this article i will explain you how to create table in flutter how can used in table with flutter.

Flutter Table widget can be utilized to display items in a table layout.

Flutter Table widget has properties like border, columnWidths, textDirection, etc., that avail us to enhance or modify the look of the table layout.

Here, i will full example of crate table using flutter follow my step you can check code and copy code.

Example


import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

}

class MyApp extends StatefulWidget {

@override

_MyAppState createState() => _MyAppState();

}

class _MyAppState extends State {

double iconSize = 40;

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Flutter Table Example - Nicesnippets.com'),

),

body: Center(

child: Column(children: [

Container(

margin: EdgeInsets.all(15),

child: Table(

border: TableBorder.all(),

children: [

TableRow( children: [

Column(children:[

Icon(Icons.video_call, size: iconSize,),

Text('Video Call')

]),

Column(children:[

Icon(Icons.photo_album, size: iconSize,),

Text('Albums')

]),

Column(children:[

Icon(Icons.notes, size: iconSize,),

Text('Notes')

]),

]),

TableRow( children: [

Column(children:[

Icon(Icons.privacy_tip, size: iconSize,),

Text('Privacy Tips')

]),

Column(children:[

Icon(Icons.email, size: iconSize,),

Text('Email')

]),

Column(children:[

Icon(Icons.calendar_today, size: iconSize,),

Text('Calendar')

]),

]),

],

),

),

]))),

);

}

}

You can run this code in your android emulator you can show bellow image i mentioned the border for table widget, hence border is displayed.if you don't want to simple you can remove the property to not display the border.

Preview

I Hope It Will Help You...


Recommended Posts