All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Android Table Layout Example

Last Updated : Mar 11, 2024

Android Table Layout Example

In this article we will show you the solution of android table layout example, Flutter is a user interface toolkit which helps user to develop mobile applications with the help of widgets.

Anything we develop inside flutter application is done with the help of widgets or in other words we can say that flutter widgets are building blocks of a flutter app.

Step By Step Guide On Android Table Layout Example :-

A table allows users to store and display data in a structured manner. It allows user to arrange data in rows and columns.

Flutter helps user to create a table layout in the mobile app. In order to create a table in Flutter we use the

Table widget that contains a table layout algorithm for its children. This widget has various properties such as border, children, columnWidths, textDirection, textBaseline, etc.

Now we will see how to use Data table in the flutter application. Here, we will create a simple data table that contains three columns and two rows.

import 'package:flutter/material.dart';
void main() {runApp(MyApp());}
class MyApp extends StatefulWidget {
  @override
  _DataTableExample createState() => _DataTableExample();
}
class _DataTableExample extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Flutter DataTable Example'),
          ),
          body: ListView(children: <Widget>[
            Center(
                child: Text(
                  'People-Chart',
                  style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
                )),
            DataTable(
              columns: [
                DataColumn(label: Text(
                    'ID',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)
                )),
                DataColumn(label: Text(
                    'Name',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)
                )),
                DataColumn(label: Text(
                    'Profession',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)
                )),
              ],
              rows: [
                DataRow(cells: [
                  DataCell(Text('1')),
                  DataCell(Text('Sumesh')),
                  DataCell(Text('Actor')),
                ]),
                DataRow(cells: [
                  DataCell(Text('5')),
                  DataCell(Text('Messi')),
                  DataCell(Text('Footballer')),
                ]),
                DataRow(cells: [
                  DataCell(Text('10')),
                  DataCell(Text('Potter')),
                  DataCell(Text('Leader')),
                ]),
                DataRow(cells: [
                  DataCell(Text('15')),
                  DataCell(Text('Peter')),
                  DataCell(Text('Teacher')),
                ]),
              ],
            ),
          ])
      ),
    );
  }
}
  1. First step, we will import the package.
  2. Second Step, writing the main function,runApp, MyApp.
  3. Third step extending the stateful widget. Stateful widgets are dynamic in nature.
  4. We will create a class named DataTableExample that will extend MyApp.
  5. BuildContext is basically a locator that is used for tracking every widget in a tree and locates them and their actual position in the tree.
  6. Then we will return the material app. MaterialApp in simple words is the starting point of your app, it tells flutter to use the material components and then material design is created.
  7. Scaffold Widget is used under MaterialApp, it gives you many basic functionalities, like AppBar, BottomNavigationBar, Drawer, FloatingActionButton.
  8. Next Step, AppBar is a material widget in flutter which is used in almost all kinds of applications. It is actually the top most widget of the application.
  9. Next step, we will display title using text widget.
  10. Since we want to display a list, in the next step we will use a flutter widget ListView.
  11. Since we want to display it in the Centre, we use Center widget which centres its child widget. The heading will be profession- chart.
  12. In the next step we will create the DataTable Widget, insert Column widget, create DataColumn Widget and label the text as “ID”, “Name” and “Profession”.
  13. In the penultimate step we will create the rows widget, will create DataRow widget and lastly will create cells of data using DataCell Widget and eventually will fill the rows with respective texts as shown in the code.
  14. Lastly run the application.

Conclusion :-

So that is the way we can create table layout in your android application with the help of Flutter SDK.

This was just a simple example of developing layout in flutter application. In future we will discuss more such series of Flutter.

I hope this article on android table layout example helps you and the steps and method mentioned above are easy to follow and implement.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪