flutter_spreadsheet_ui

Description:

flutter spreadsheet ui

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'
copied to clipboard

Install it #
Install flutter_spreadsheet_ui package by running this command from the command line or terminal:
$ flutter pub get
copied to clipboard
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';
copied to clipboard

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'),
),
],
),
];

copied to clipboard
Add FlutterSpreadsheetUI to your widget tree:
FlutterSpreadsheetUI(
columns: _columns,
rows: _rows,
),
copied to clipboard

Add FlutterSpreadsheetUIConfig to customize the default table configuration:
FlutterSpreadsheetUIConfig _tableConfig = const FlutterSpreadsheetUIConfig(
enableColumnWidthDrag: true,
enableRowHeightDrag: true,
firstColumnWidth: 150,
freezeFirstColumn: true,
freezeFirstRow: true,
)
copied to clipboard

Now use it to pass config parameter inside the FlutterSpreadsheetUI widget:
FlutterSpreadsheetUI(
config: _tableConfig,
columns: _columns,
rows: _rows,
),
copied to clipboard

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");
}
copied to clipboard
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");
}
copied to clipboard

Now use columnWidthResizeCallback and rowHeightResizeCallback to pass the parameter inside the FlutterSpreadsheetUI widget:
FlutterSpreadsheetUI(
config: _tableConfig,
columnWidthResizeCallback: _columnWidthResizeCallback,
rowHeightResizeCallback: _rowHeightResizeCallback,
columns: _columns,
rows: _rows,
),
copied to clipboard

## Example


Donate to this project #