flutter-tutorial

Flutter Table

In a table layout, the table widget is used to display items. To make a table, you don’t need to use Rows and Columns. Table widget is the best option if we have numerous rows with the same column width. If we only need a single column, SliverList or Column are the best options. The information inside the Table widget determines the height of the rows. The columnWidths property, on the other hand, can be used to adjust the column’s width.

Properties

Table widget has the following properties:

  • children: The Table widget’s children property accepts a list of table rows as an input (List). TableRow, in turn, can be given a list of widgets to work with as children.
  • columnWidhts: The width of the columns in the Table widget is determined by this attribute.
  • textDirection: This property specifies the order of the columns in Table. It can be done in either a left-to-right or a right-to-left direction.
  • ColumnWidth: To set the default width of the column in the Table widget, use the TableComumnWidth class as an input parameter.
  • key: This attribute determines how widgets in the widget tree will replace one another.
  • border: This property sets the table’s border using the TableBorder widget as an input. The Table widget has no border by default.
  • defaultVerticalAlignment: This property sets the vertical alignment of cells in the table using the TableCellVerticalAlignment enum as the parameter value.
  • TextBaseline: The parameter for this property is the TextBaseline enum. We can specify a horizontal line to align text on the screen inside the Table widget using this feature.

Example

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatefulWidget {
  @override
  _TableExample createState() => _TableExample();
}

class _TableExample extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Learn Code Zone'),
          ),
          body: Center(
              child: Column(children: <Widget>[
            Container(
              margin: EdgeInsets.all(20),
              child: Table(
                defaultColumnWidth: FixedColumnWidth(120.0),
                border: TableBorder.all(
                    color: Colors.black, style: BorderStyle.solid, width: 2),
                children: [
                  TableRow(children: [
                    Column(children: [
                      Text('Website', style: TextStyle(fontSize: 20.0))
                    ]),
                    Column(children: [
                      Text('Tutorial', style: TextStyle(fontSize: 20.0))
                    ]),
                    Column(children: [
                      Text('Review', style: TextStyle(fontSize: 20.0))
                    ]),
                  ]),
                  TableRow(children: [
                    Column(children: [Text('LearnCodeZone')]),
                    Column(children: [Text('Flutter')]),
                    Column(children: [Text('5*')]),
                  ]),
                  TableRow(children: [
                    Column(children: [Text('LearnCodeZone')]),
                    Column(children: [Text('Nextjs')]),
                    Column(children: [Text('5*')]),
                  ]),
                  TableRow(children: [
                    Column(children: [Text('LearnCodeZone')]),
                    Column(children: [Text('ReactJS')]),
                    Column(children: [Text('5*')]),
                  ]),
                ],
              ),
            ),
          ]))),
    );
  }
}

RECOMMENDED ARTICLES





Leave a Reply

Your email address will not be published.