flutter_editable_table 1.0.1 
flutter_editable_table: ^1.0.1 copied to clipboard
A flutter package providing customizable and editable table from json.
import 'package:flutter/material.dart';
import 'package:flutter_editable_table/entities/table_entity.dart';
import 'package:flutter_editable_table/flutter_editable_table.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Editable Table',
builder: (context, child) {
return GestureDetector(
onTap: () {
WidgetsBinding.instance?.focusManager.primaryFocus?.unfocus();
},
child: child,
);
},
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Editable Table'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key? key, required this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _editableTableKey = GlobalKey<EditableTableState>();
final data = {
"column_count": null,
"row_count": null,
"addable": true,
"removable": true,
"caption": {
"layout_direction": "row",
"main_caption": {
"title": "Caption",
"display": true,
"editable": false,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 64, "hint_text": "Please input the caption", "fill_color": null},
"style": {"font_weight": "bold", "font_size": 18.0, "font_color": "#333333", "background_color": null, "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
"sub_caption": {
"title": null,
"display": true,
"editable": true,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 64, "hint_text": "Please input the sub-caption", "fill_color": null},
"style": {"font_weight": "normal", "font_size": 14.0, "font_color": "#333333", "background_color": null, "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
}
},
"columns": [
{
"primary_key": true,
"auto_increase": false,
"name": "id",
"title": null,
"type": "int",
"format": null,
"description": null,
"display": false,
"editable": false,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 64, "hint_text": "Please input"},
"constrains": {"minimum": 0, "maximum": 99999999},
"style": {"font_weight": "bold", "font_size": 14.0, "font_color": "#333333", "background_color": "#b5cfd2", "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"primary_key": false,
"auto_increase": true,
"name": null,
"title": null,
"type": "int",
"format": "Step __VALUE__",
"description": null,
"display": true,
"editable": false,
"width_factor": 0.2,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 64, "hint_text": "Please input"},
"constrains": {"minimum": 0, "maximum": 99999999},
"style": {"font_weight": "bold", "font_size": 14.0, "font_color": "#333333", "background_color": "#b5cfd2", "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"primary_key": false,
"auto_increase": false,
"name": "name",
"title": "Name",
"type": "string",
"format": null,
"description": "User Name",
"display": true,
"editable": true,
"width_factor": 0.4,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 128, "hint_text": "Please input the name"},
"constrains": {"minimum": 0, "maximum": 99999999},
"style": {"font_weight": "bold", "font_size": 14.0, "font_color": "#333333", "background_color": "#b5cfd2", "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"primary_key": false,
"auto_increase": false,
"name": "age",
"title": "Age",
"type": "integer",
"format": null,
"description": "Age",
"display": true,
"editable": true,
"width_factor": 0.2,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 128, "hint_text": "Please input the age"},
"constrains": {"minimum": 1, "maximum": 100},
"style": {"font_weight": "bold", "font_size": 14.0, "font_color": "#333333", "background_color": "#b5cfd2", "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"primary_key": false,
"auto_increase": false,
"name": "desc",
"title": "Description",
"type": "string",
"format": null,
"description": "Description",
"display": true,
"editable": true,
"width_factor": 0.4,
"input_decoration": {"min_lines": 3, "max_lines": 5, "max_length": 128, "hint_text": "Please input the description"},
"constrains": {"minimum": 1, "maximum": 100, "pattern": "\\w{128}"},
"style": {"font_weight": "bold", "font_size": 14.0, "font_color": "#333333", "background_color": "#b5cfd2", "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"primary_key": false,
"auto_increase": false,
"name": "salary",
"title": "Salary",
"type": "float",
"format": null,
"description": "Salary",
"display": true,
"editable": true,
"width_factor": 0.2,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 128, "hint_text": "Please input the salary"},
"constrains": {"minimum": -100, "maximum": 10000},
"style": {"font_weight": "bold", "font_size": 14.0, "font_color": "#333333", "background_color": "#b5cfd2", "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"primary_key": false,
"auto_increase": false,
"name": "married",
"title": "Married",
"type": "bool",
"format": null,
"description": "Is married?",
"display": true,
"editable": true,
"width_factor": 0.12,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 128, "hint_text": "Please select"},
"constrains": {"minimum": 1, "maximum": 100},
"style": {"font_weight": "bold", "font_size": 14.0, "font_color": "#333333", "background_color": "#b5cfd2", "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"primary_key": false,
"auto_increase": false,
"name": "d_o_m",
"title": "Date Of Marriage",
"type": "date",
"format": null,
"description": "Date Of Marriage",
"display": true,
"editable": true,
"width_factor": 0.3,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 128, "hint_text": "Please input the date of marriage"},
"constrains": {"minimum": 1, "maximum": 100},
"style": {"font_weight": "bold", "font_size": 14.0, "font_color": "#333333", "background_color": "#b5cfd2", "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"primary_key": false,
"auto_increase": false,
"name": "l_s_t",
"title": "Last Shopping Time",
"type": "datetime",
"format": null,
"description": "Last Shopping Time",
"display": true,
"editable": true,
"width_factor": 0.5,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 128, "hint_text": "Please input your last shopping time"},
"constrains": {"minimum": 1, "maximum": 100},
"style": {"font_weight": "bold", "font_size": 14.0, "font_color": "#333333", "background_color": "#b5cfd2", "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
}
],
"rows": [
{"id": 0, "name": "Tom", "age": 18, "desc": "I'm Tom, Tom, Tom", "salary": 1000.5, "married": false, "d_o_m": null, "l_s_t": "2021-10-02 14:30"},
{"id": 1, "name": "Sam", "age": 20, "desc": null, "salary": 1234.5, "married": false, "d_o_m": null, "l_s_t": "2021-06-23 11:28"},
{"id": 2, "name": "Olivia", "age": 25, "desc": null, "salary": 2500.0, "married": true, "d_o_m": "2020-10-01", "l_s_t": "2021-01-08 20:20"},
{"id": 3, "name": "Liam", "age": 23, "desc": null, "salary": 3000.0, "married": true, "d_o_m": "2018-08-01", "l_s_t": "2021-11-11 18:10"},
{"id": 4, "name": "David", "age": 26, "desc": null, "salary": 2300.0, "married": true, "d_o_m": "2019-03-05", "l_s_t": "2021-12-08 21:30"},
],
"footer": {
"layout_direction": "row",
"content": [
{
"title": "Average Age: 22.4",
"display": true,
"editable": false,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 64, "hint_text": "Please input the sub-caption", "fill_color": null},
"style": {"font_weight": "normal", "font_size": 14.0, "font_color": "#333333", "background_color": null, "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"title": "Married: 3",
"display": true,
"editable": false,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 64, "hint_text": "Please input the sub-caption", "fill_color": null},
"style": {"font_weight": "normal", "font_size": 14.0, "font_color": "#333333", "background_color": null, "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
},
{
"title": null,
"display": true,
"editable": true,
"input_decoration": {"min_lines": 1, "max_lines": 1, "max_length": 64, "hint_text": "Please input identity", "fill_color": null},
"style": {"font_weight": "normal", "font_size": 14.0, "font_color": "#333333", "background_color": null, "horizontal_alignment": "center", "vertical_alignment": "center", "text_align": "center"}
}
]
}
};
bool editing = false;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: IconButton(
icon: Icon(Icons.print),
onPressed: () {
print(_editableTableKey.currentState?.currentData);
},
),
title: Text(widget.title),
centerTitle: true,
actions: [
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
WidgetsBinding.instance?.focusManager.primaryFocus?.unfocus();
_editableTableKey.currentState?.addRow();
},
child: Icon(Icons.add),
),
SizedBox(width: 8.0),
GestureDetector(
behavior: HitTestBehavior.opaque,
onTap: () {
WidgetsBinding.instance?.focusManager.primaryFocus?.unfocus();
_editableTableKey.currentState?.readOnly = editing;
setState(() {
editing = !editing;
});
},
child: Icon(!editing ? Icons.edit : Icons.check),
),
SizedBox(width: 14.0),
],
),
body: SingleChildScrollView(
child: EditableTable(
key: _editableTableKey,
data: data,
entity: TableEntity.fromJson(data),
readOnly: true,
tablePadding: EdgeInsets.all(8.0),
captionBorder: Border(
top: BorderSide(color: Color(0xFF999999)),
left: BorderSide(color: Color(0xFF999999)),
right: BorderSide(color: Color(0xFF999999)),
),
headerBorder: Border.all(color: Color(0xFF999999)),
rowBorder: Border.all(color: Color(0xFF999999)),
footerBorder: Border.all(color: Color(0xFF999999)),
removeRowIcon: Icon(
Icons.remove_circle_outline,
size: 24.0,
color: Colors.redAccent,
),
addRowIcon: Icon(
Icons.add_circle_outline,
size: 24.0,
color: Colors.white,
),
addRowIconContainerBackgroundColor: Colors.blueAccent,
onRowRemoved: (row) {
print('row removed: ${row.toString()}');
},
onRowAdded: () {
print('row added');
},
),
),
);
}
}Metadata
12
likes
0
pub points
80%
popularity
Publisher
unverified uploader
Metadata
A flutter package providing customizable and editable table from json.
Repository (GitHub)
View/report issues
License
unknown (LICENSE)
Dependencies
flutter, flutter_datetime_picker, intl
