flutter_spreadsheet_ui 0.0.2

flutter_spreadsheet_ui: ^0.0.2 copied to clipboard

A Flutter package for creaing spreadsheet like ui.

FlutterSpreadsheetUI - v0.0.2 #

FlutterSpreadsheetUI is a spreadsheet like DataTable which can help you to make beautiful looking spreadsheet like application.

Get started #

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

flutter_spreadsheet_ui: '^0.0.2'

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,
),

[]

Donate to this project #