Search code examples
flutterdartflutter-animationflutter-table

how to make tables in flutter using API


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.


Solution

  • 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.