godilite / editable

This library allows you to create editable tables and spreadsheets with ease, either by providing initial row and column count to display an empty table or use it with predefined rows and column data sets.
MIT License
104 stars 36 forks source link

i can't add row #49

Open dirugec opened 3 years ago

dirugec commented 3 years ago

good morning maybe i am very new to this but i cant add empty row in table

sysarcher commented 3 years ago

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

add-rows

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