flutter_spreadsheet_table 0.0.1

A customizable Flutter package for creating editable spreadsheet-like UIs.

example/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_spreadsheet_table/flutter_spreadsheet_table.dart';

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

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<SpreadsheetRow> _data = [
    SpreadsheetRow(id: UniqueKey().toString(), cells: {
      "Product": "Jean",
      "Quantity": "3",
      "Status": "Verified",
      "Priority": "Verified",
    }),
    SpreadsheetRow(id: UniqueKey().toString(), cells: {
      "Product": "Shirt",
      "Quantity": "2",
      "Status": "Unverified",
      "Priority": "Verified",
    }),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Flutter Spreadsheet Table')),
        body: Column(
          children: [
            Expanded(
              child: SpreadsheetTable(
                  zebraStripe: true,
                  autoLeadingSN: true,
                  cellContentPadding: const EdgeInsets.symmetric(
                      horizontal: 2.0, vertical: 4.0),
                  columnAlignments: const {
                    'Product': TextAlign.start,
                    'Status': TextAlign.center,
                    'Priority': TextAlign.center,
                  },
                  dropdownOptions: const {
                    // Define dropdown options for 'Status' and 'Priority' columns
                    'Status': ['Unverified', 'Verified', 'Closed'],
                    'Priority': ['Unverified', 'Verified', 'Closed'],
                  },
                  initialData: _data,
                  // headerBgColor: Colors.red,
                  headers: const ['Product', 'Quantity', 'Status', "Priority"],
                  onDataChanged: (newData) {
                    print('Full data changed: $_data');
                  },
                  onRowDataChanged: (updatedRow) {
                    print('Row data changed: ${updatedRow.cells}');
                  },
                  trailingButtonBuilder: (context, row) => IconButton(
                        icon: const Icon(Icons.save, size: 20),
                        onPressed: () {
                          print(row);
                        },
                      ),
                  validators: {
                    'Product': (value) {
                      if (value == null || value.isEmpty) {
                        return 'No Empty field';
                      }
                      return null;
                    },
                    'Quantity': (value) {
                      if (value == null || int.tryParse(value) == null) {
                        return 'Number only';
                      }
                      if (int.parse(value) <= 0) {
                        return '+ Number only';
                      }
                      return null;
                    },
                  }),
            ),
          ],
        ),
      ),
    );
  }
}