0

enter image description here

I need to show my data's like as above image in flutter. I don't have idea about ,So anyone can help me to solve the problem.

Munsif Ali
  • 1,839
  • 1
  • 8
  • 22
Sakthivel k
  • 9
  • 4
  • Take a look at [DataTable](https://api.flutter.dev/flutter/material/DataTable-class.html) in Flutter's API – raw-chicken Mar 16 '23 at 06:49
  • you can also use [PaginatedDataTable](https://api.flutter.dev/flutter/material/PaginatedDataTable-class.html) widget in flutter – Munsif Ali Mar 16 '23 at 06:55

1 Answers1

1
import 'package:flutter/material.dart';
// main method that runs the runApp.
  
void main() => runApp(SimpleDataTable());
  
class SimpleDataTable extends StatelessWidget{
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // MaterialApp with debugShowCheckedModeBanner false and home
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light(),
      home: Scaffold(
        // Scaffold with appbar ans body.
        appBar: AppBar(
          title: Text('Simple Data Table'),
        ),
        body:
        SingleChildScrollView(
          scrollDirection: Axis.horizontal,
          child: DataTable(
            // Datatable widget that have the property columns and rows.
            columns: [
              // Set the name of the column
              DataColumn(label: Text('ID'),),
              DataColumn(label: Text('Name'),),
              DataColumn(label: Text('LastName'),),
              DataColumn(label: Text('Age'),),
            ],
            rows:[
              // Set the values to the columns 
              DataRow(cells: [
                DataCell(Text("1")),
                DataCell(Text("Alex")),
                DataCell(Text("Anderson")),
                DataCell(Text("18")),
              ]),
              DataRow(cells: [
                DataCell(Text("2")),
                DataCell(Text("John")),
                DataCell(Text("Anderson")),
                DataCell(Text("24")),
              ]),
            ]
          ),
        ),
      ),
    );
  }
}
  1. Body Contain SingleChildScrollView used to Scroll Horizontally and Avoid Overflow due to Mobile with Low Screen Width.
  2. SingleChildScrollView takes Single Child DataTable which takes Columns and Rows.
  3. Columns represented in DataColumn that take a Label.
  4. Rows represented in DataRow take Cells followed by DataCell that takes any Widget representing each Column Value of the Row.
Javatar
  • 131
  • 6