FlutterSpreadsheetUI - v0.0.5

Languages:

FlutterSpreadsheetUI is a Flutter package that allows developers to easily create and embed spreadsheet-like tables in their Flutter applications. With this package, developers can create interactive and customizable tables with various features such as column resizing, row resizing, and more. This package provides a range of configuration options, such as column and row sizing, grid line color and thickness, font style and size, and more, allowing developers to fully customize the appearance of their tables, also includes various callbacks for developers to interact with the table and its data. These callbacks enable users to handle resize of columns and rows and more.

Overall, FlutterSpreadsheetUI provides an easy-to-use and flexible way to create spreadsheet-like tables in Flutter, making it a great option for developers looking to create complex data displays in their applications.

Get started

Add this to your package's pubspec.yaml file:

flutter_spreadsheet_ui: '^0.0.5'

Install it

Install flutter_spreadsheet_ui package by running this command from the command line or terminal:

$ flutter pub get

Alternatively, your editor might support flutter pub get.

Import it

Now in your Dart code, you can use:

import 'package:flutter_spreadsheet_ui/flutter_spreadsheet_ui.dart';

How to use

Generate the data of FlutterSpreadsheetUIColumn and FlutterSpreadsheetUIRow to be used in the table.

final List<FlutterSpreadsheetUIColumn> _columns = [
    FlutterSpreadsheetUIColumn(
        contentAlignment: Alignment.center,
        cellBuilder: (context, cellId) => const Text("Task"),
    ),
    FlutterSpreadsheetUIColumn(
        width: 200,
        contentAlignment: Alignment.center,
        cellBuilder: (context, cellId) => const Text("Assigned Date"),
    ),
    FlutterSpreadsheetUIColumn(
        width: 110,
        cellBuilder: (context, cellId) => const Text("Permissions"),
    ),
];

final List<FlutterSpreadsheetUIRow> _rows = [
    FlutterSpreadsheetUIRow(
        cells: [
            FlutterSpreadsheetUICell(
                cellBuilder: (context, cellId) => const Text('Task 1'),
            ),
            FlutterSpreadsheetUICell(
                cellBuilder: (context, cellId) => Text(DateTime.now().toString()),
            ),
            FlutterSpreadsheetUICell(
                cellBuilder: (context, cellId) => const Text('None'),
            ),
        ],
    ),
];

Add FlutterSpreadsheetUI to your widget tree:

FlutterSpreadsheetUI(
    columns: _columns,
    rows: _rows,
),

Add FlutterSpreadsheetUIConfig to customize the default table configuration:

FlutterSpreadsheetUIConfig _tableConfig = const FlutterSpreadsheetUIConfig(
    enableColumnWidthDrag: true,
    enableRowHeightDrag: true,
    firstColumnWidth: 150,
    freezeFirstColumn: true,
    freezeFirstRow: true,
)

Now use it to pass config parameter inside the FlutterSpreadsheetUI widget:

FlutterSpreadsheetUI(
    config: _tableConfig,
    columns: _columns,
    rows: _rows,
),

Add FlutterSpreadsheetUIColumnWidthResizeCallback to get the updated width and columnIndex:
NOTE: ⚡ [Will called when column width resize drag ends] ⚡

void _columnWidthResizeCallback(int columnIndex, double updatedWidth) {
    log("Column: $columnIndex's updated width: $updatedWidth");
}

Add FlutterSpreadsheetUIRowHeightResizeCallback to get the updated height and rowIndex:
NOTE: ⚡ [Will called when row height resize drag ends] ⚡

void _rowHeightResizeCallback(int rowIndex, double updatedHeight) {
    log("Row: $rowIndex's updated width: $updatedHeight");
}

Now use columnWidthResizeCallback and rowHeightResizeCallback to pass the parameter inside the FlutterSpreadsheetUI widget:

FlutterSpreadsheetUI(
    config: _tableConfig,
    columnWidthResizeCallback: _columnWidthResizeCallback,
    rowHeightResizeCallback: _rowHeightResizeCallback,
    columns: _columns,
    rows: _rows,
),

## Example

Donate to this project