editable
editable copied to clipboard
i can't add row
good morning maybe i am very new to this but i cant add empty row in table
@dirugec can you provide a minimal example? I can add a row... (copy-paste into your main.dart file...
(though as you might notice, I have another problem: namely, the global state isn't updated which I'm struggling with right now)
import 'package:flutter/material.dart';
import 'package:editable/editable.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
// Application name
title: 'Flutter Hello World',
// Application theme data, you can set the colors for the application as
// you want
theme: ThemeData(
primarySwatch: Colors.blue,
),
// A widget which will be started on application startup
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
final String title;
MyHomePage({@required this.title});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Create new row',
home: MyCustomForm(),
);
}
}
class MyCustomForm extends StatelessWidget {
@override
Widget build(BuildContext context) {
return testForm();
}
}
class testForm extends StatefulWidget {
@override
_testFormState createState() => _testFormState();
}
class _testFormState extends State<testForm> {
/// Create a Key for EditableState
final _editableKey = GlobalKey<EditableState>();
List cols = [
{
"title": 'Inputs',
'widthFactor': 0.2,
'key': 'input'
},
{
"title": 'Quantity',
'widthFactor': 0.1,
'key': 'quantity'
},
{
"title": 'Unit',
'widthFactor': 0.1,
'key': 'unit'
},
{
"title": 'Range',
'key': 'range'
},
{
"title": 'Data Quality and Comments',
'key': 'comments'
},
];
List rows = [
{
"input": 'James Joe',
"quantity": '23',
"unit": 'June',
"range": 'completed',
'comments': 'passt schoen in den Grossen ordnung...'
},
{
"input": 'James Doe',
"quantity": '22.3 kg',
"unit": 'June',
"range": 'completed',
'comments': 'passt schoen in den Grossen ordnung...'
},
];
/// Function to add a new row
/// Using the global key assigined to Editable widget
/// Access the current state of Editable
void _addNewRow() {
setState(() {
_editableKey.currentState?.createRow();
});
_getTableRows();
}
///Print only edited rows.
void _printEditedRows() {
var editedRows = _editableKey.currentState?.editedRows;
print(editedRows);
_getTableRows();
}
String _tRows = '';
void _getTableRows() {
print(_editableKey.currentState?.rows.toString());
var table = _editableKey.currentState?.rows.toString();
if (table == null) {
print('null table');
_tRows = '';
} else {
_tRows = table;
}
print(_tRows);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Grossen Ordnung'),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: TextButton(
onPressed: () => _printEditedRows(),
child: Text(
'Print Rows',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
)
],
leadingWidth: 300,
leading: TextButton.icon(onPressed: () => _addNewRow(), icon: Icon(Icons.add), label: Text('Addddddddddddddd')),
),
body: Editable(
key: _editableKey,
columns: cols,
rows: rows,
zebraStripe: true,
stripeColor2: Colors.grey.shade100,
borderColor: Colors.lightBlue.shade900,
onRowSaved: (value) => {
print(value),
_printEditedRows()
},
onSubmitted: (value) => print(value),
tdStyle: TextStyle(fontWeight: FontWeight.bold),
trHeight: 80,
thStyle: TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
thAlignment: TextAlign.center,
thVertAlignment: CrossAxisAlignment.end,
thPaddingBottom: 3,
showSaveIcon: true,
saveIconColor: Colors.black,
showCreateButton: true,
tdAlignment: TextAlign.left,
//tdEditableMaxLines: 100, // don't limit and allow data to wrap
tdPaddingTop: 15,
//tdPaddingBottom: 14,
tdPaddingLeft: 10,
tdPaddingRight: 8,
focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.blue), borderRadius: BorderRadius.all(Radius.circular(0))),
),
floatingActionButton: FloatingActionButton(
// When the user presses the button, show an alert dialog containing
// the text that the user has entered into the text field.
onPressed: () {
showDialog(
context: context,
builder: (context) {
return AlertDialog(
// Retrieve the text the that user has entered by using the
// TextEditingController.
content: Text(_tRows),
);
},
);
},
tooltip: 'Show me the value!',
child: const Icon(Icons.text_fields),
),
);
}
}