editable icon indicating copy to clipboard operation
editable copied to clipboard

i can't add row

Open dirugec opened this issue 3 years ago • 1 comments

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

dirugec avatar Jul 29 '21 14:07 dirugec

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

sysarcher avatar Aug 04 '21 12:08 sysarcher