Explore Table In Flutter
A table permits the user to arrange the information in rows and columns. It is utilized to store and show our information in an organized format, which assists us with rapidly contrasting the sets of comparing values.
Flutter likewise permits the user to make a table format in the mobile application. We can make a table in Flutter utilizing the Table widget that involves the table design algorithm for its children. This widget has a few properties to upgrade or change the table design. These properties are border, children, columnWidths, textDirection, textBaseline, and so forth.
This blog will Explore Table In Flutter. We will see how to implement a demo program. We are going to learn about how we can use a table widget in your flutter applications.
Table class – widgets library – Dart API
A widget that uses the table layout algorithm for its children. If you only have one row, the Row widget is more…api. flutter.dev
Table Of Contents::
Introduction:
The Table widget in flutter is used to show our data in a structured format. If we want our data to be shown horizontally, we prefer using the Row widget. If we want to display our data in a single column, we prefer using Column Widget.https://www.youtube.com/embed/_lbE0wsVZSw?feature=oembed
At the point when we need to show the information horizontally as well as vertically, the Table widget is the one that is liked. A table widget can be utilized when we need to store numerous rows with similar column widths, and each column(table) contains equivalent information.
Constructor:
To utilize Table, you need to call the constructor underneath:
Table({
Key? key,
this.children = const <TableRow>[],
this.columnWidths,
this.defaultColumnWidth = const FlexColumnWidth(),
this.textDirection,
this.border,
this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
this.textBaseline,
})
Properties:
There are some properties of Table are:
- > children — This property is utilized to make a list of table rows as a boundary List<TableRow>. TableRow contains a list of widgets as children.
- > columnWidths —This property is utilized to decide the width of the sections in the Table widget.
- > textDirection — This property is used to define the direction in which columns are ordered in Table. It can be either from left to right or from right to left.
- > defaultColumnWidth —This property is utilized to take in TableColumnWidth class as the information boundary to set the default width of the segment in the Table width.
- > border — This property is used to take the TableBorder widget as the parameter and it sets the border for the table. By default, there is no border.
- > defaultVerticalAlignment —This property is utilized to accept TableCellVerticalAlignment as the boundary worth to sets the arrangement of cells vertically in the table.
- > textBaseline — This property is utilized so we can indicate a horizontal line used to adjust the text on the screen inside the Table widget.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
In the main .dart, we will create a MyHomePage class. In this class, we will create a Table widget. With this widget, we create a simple table with five rows and three columns. This is the basic structure of our app after writing out the basic code.
Table(
children: const [
TableRow(children: [
Text("1", style: TextStyle(fontSize: 15.0),),
Text("Mohit", style: TextStyle(fontSize: 15.0),),
Text("25", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("2", style: TextStyle(fontSize: 15.0),),
Text("Ankit", style: TextStyle(fontSize: 15.0),),
Text("27", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("3", style: TextStyle(fontSize: 15.0),),
Text("Rakhi", style: TextStyle(fontSize: 15.0),),
Text("26", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("4", style: TextStyle(fontSize: 15.0),),
Text("Yash", style: TextStyle(fontSize: 15.0),),
Text("29", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("5", style: TextStyle(fontSize: 15.0),),
Text("Pragati", style: TextStyle(fontSize: 15.0),),
Text("28", style: TextStyle(fontSize: 15.0),),
]),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
So, to make our UI look better, we will add a border to the table with the help of Border property. This property set a border for the table. We will add TableBorder.all with color was green and with was 1.5.
Table(
border: TableBorder.all(color: Colors.green, width: 1.5),
children: const [
TableRow(children: [
Text("1", style: TextStyle(fontSize: 15.0),),
Text("Mohit", style: TextStyle(fontSize: 15.0),),
Text("25", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("2", style: TextStyle(fontSize: 15.0),),
Text("Ankit", style: TextStyle(fontSize: 15.0),),
Text("27", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("3", style: TextStyle(fontSize: 15.0),),
Text("Rakhi", style: TextStyle(fontSize: 15.0),),
Text("26", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("4", style: TextStyle(fontSize: 15.0),),
Text("Yash", style: TextStyle(fontSize: 15.0),),
Text("29", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("5", style: TextStyle(fontSize: 15.0),),
Text("Pragati", style: TextStyle(fontSize: 15.0),),
Text("28", style: TextStyle(fontSize: 15.0),),
]),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
For providing different column widths to each column we have a property named columnWidths. The user will set the widths for each column according to your application.
Table(
border: TableBorder.all(color: Colors.green, width: 1.5),
columnWidths: const {
0: FlexColumnWidth(1.5),
1: FlexColumnWidth(4),
2: FlexColumnWidth(2),
},
children: const [
TableRow(children: [
Text("1", style: TextStyle(fontSize: 15.0),),
Text("Mohit", style: TextStyle(fontSize: 15.0),),
Text("25", style: TextStyleOutput(fontSize: 15.0),),
]),
TableRow(children: [
Text("2", style: TextStyle(fontSize: 15.0),),
Text("Ankit", style: TextStyle(fontSize: 15.0),),
Text("27", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("3", style: TextStyle(fontSize: 15.0),),
Text("Rakhi", style: TextStyle(fontSize: 15.0),),
Text("26", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("4", style: TextStyle(fontSize: 15.0),),
Text("Yash", style: TextStyle(fontSize: 15.0),),
Text("29", style: TextStyle(fontSize: 15.0),),
]),
TableRow(children: [
Text("5", style: TextStyle(fontSize: 15.0),),
Text("Pragati", style: TextStyle(fontSize: 15.0),),
Text("28", style: TextStyle(fontSize: 15.0),),
]),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
Code File:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter Table Demo"),
backgroundColor: Colors.greenAccent,
centerTitle: true,
automaticallyImplyLeading: false,
),
body: Column(children: <Widget>[
Image.asset(
"assets/logo.png",
height: 250,
width: 250,
),
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
"Employee Table",
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
),
),
const SizedBox(height: 20.0),
Padding(
padding: const EdgeInsets.only(left: 15.0, right: 15),
child: Table(
border: TableBorder.all(color: Colors.green, width: 1.5),
columnWidths: const {
0: FlexColumnWidth(1.5),
1: FlexColumnWidth(4),
2: FlexColumnWidth(2),
},
children: const [
TableRow(children: [
Text(
"1",
style: TextStyle(fontSize: 15.0),
),
Text(
"Mohit",
style: TextStyle(fontSize: 15.0),
),
Text(
"25",
style: TextStyle(fontSize: 15.0),
),
]),
TableRow(children: [
Text(
"2",
style: TextStyle(fontSize: 15.0),
),
Text(
"Ankit",
style: TextStyle(fontSize: 15.0),
),
Text(
"27",
style: TextStyle(fontSize: 15.0),
),
]),
TableRow(children: [
Text(
"3",
style: TextStyle(fontSize: 15.0),
),
Text(
"Rakhi",
style: TextStyle(fontSize: 15.0),
),
Text(
"26",
style: TextStyle(fontSize: 15.0),
),
]),
TableRow(children: [
Text(
"4",
style: TextStyle(fontSize: 15.0),
),
Text(
"Yash",
style: TextStyle(fontSize: 15.0),
),
Text(
"29",
style: TextStyle(fontSize: 15.0),
),
]),
TableRow(children: [
Text(
"5",
style: TextStyle(fontSize: 15.0),
),
Text(
"Pragati",
style: TextStyle(fontSize: 15.0),
),
Text(
"28",
style: TextStyle(fontSize: 15.0),
),
]),
],
),
),
]),
);
}
}
Conclusion:
In the article, I have explained the Table’s basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Table On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide sufficient information on Trying up the Table in your flutter projects. We will show you what the Introduction is. What are the construction and properties of Table, make a demo program for working with Table in your flutter applications. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
