I am new in flutter just want to know using which widget i can create ui like given in below image.
Thanks,
I am new in flutter just want to know using which widget i can create ui like given in below image.
Thanks,
Flutter has a Table class for this (but you can also do it using simple Row + Column combo).
Here's the link to the Table docs: Flutter Table
Here's a simple example to get you started:
Container(
color: Colors.white,
padding: EdgeInsets.all(20.0),
child: Table(
border: TableBorder.all(color: Colors.black),
children: [
TableRow(children: [
Text('Cell 1'),
Text('Cell 2'),
Text('Cell 3'),
]),
TableRow(children: [
Text('Cell 4'),
Text('Cell 5'),
Text('Cell 6'),
])
],
),
)
Use Table widget !
That widget allows you to build a table. Code : Table(children : <TableRow>[])
Example :
Table(
border: TableBorder.all(), // Allows to add a border decoration around your table
children: [
TableRow(children :[
Text('Year'),
Text('Lang'),
Text('Author'),
]),
TableRow(children :[
Text('2011',),
Text('Dart'),
Text('Lars Bak'),
]),
TableRow(children :[
Text('1996'),
Text('Java'),
Text('James Gosling'),
]),
]
),
Note: TableRow is a horizontal group of cells in a Table.
Add many TableRow that you want to
You can learn more about Table by watching this official video or by visiting flutter.dev
Flutter has a DataTable class that can be used like this.
DataTable(
columns: [
DataColumn(
label: Text('ID'),
),
DataColumn(
label: Text('Name'),
),
DataColumn(
label: Text('Code'),
),
DataColumn(
label: Text('Quantity'),
),
DataColumn(
label: Text('Amount'),
),
],
rows: [
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Arshik')),
DataCell(Text('5644645')),
DataCell(Text('3')),
DataCell(Text('265\$')),
])
])
For advanced configurations, you can check these packages which will help you extend some features like pagination, selection etc.
https://pub.dev/packages/data_tables
https://pub.dev/packages/data_table_2
You can use DataTable widget. This sample shows how to display a DataTable with three columns: name, age, and role.