how to add rows in columns flutter dynamically?

826 Views Asked by At

enter image description here

i need to pass data from AlertDialog to add rows in columns when press OK and press Actions remove rows

1

There are 1 best solutions below

11
On

I am using this item class.

class Item {
  final String name;
  final double price;
  final int quantity;
  final String action;

  Item({
    required this.name,
    required this.price,
    required this.quantity,
    required this.action,
  });
}

How it will represented the table

 Table(
      border: TableBorder.all(),
      children: [
        //* headers
        TableRow(
          children: <Widget>[
            for (String h in headers)
              TableCell(
                child: Container(
                  padding: const EdgeInsets.all(8),
                  child: CustomText(text: h),
                ),
              ),
          ],
        ),

        //* data columns
        for (final item in items)
          TableRow(
            children: <Widget>[
              for (String h in [
                item.name,
                item.price.toString(),
                item.quantity.toString(),
                item.action
              ])
                TableCell(
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    child: CustomText(text: h),
                  ),
                ),
            ],

Full widget to Test

class TSX extends StatefulWidget {
  TSX({Key? key}) : super(key: key);

  @override
  State<TSX> createState() => _TSXState();
}

class _TSXState extends State<TSX> {
  final items = List.generate(
    4,
    (index) => Item(
        name: "name $index", price: index * 10, quantity: index, action: "NA"),
  );
  List<String> headers = ["NAME", "PRICE", "QTY", "ACTIONS"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () async {
          final data = await showDialog(
              context: context,
              builder: (context) {
                /// you can go for TextEditingController
                String name = "";
                int quantity = 0;
                double price = 0;
                return AlertDialog(
                  content: Column(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      TextField(
                        onChanged: (v) {
                          name = v;
                        },
                      ),
                      TextField(
                        onChanged: (v) {
                          quantity = int.tryParse(v) ?? 0;
                        },
                      ),
                      TextField(
                        onChanged: (v) {
                          price = double.tryParse(v) ?? 0.0;
                        },
                      ),
                      TextButton(
                        onPressed: () {
                          Navigator.of(context).pop(Item(
                              name: name,
                              price: price,
                              quantity: quantity,
                              action: ""));
                        },
                        child: Text("OK"),
                      )
                    ],
                  ),
                );
              });

          if (data != null) {
            items.add(data);
            setState(() {});
          }
        },
      ),
      body: Table(
        border: TableBorder.all(),
        children: [
          //* headers
          TableRow(
            children: <Widget>[
              for (String h in headers)
                TableCell(
                  child: Container(
                    padding: const EdgeInsets.all(8),
                    child: CustomText(text: h),
                  ),
                ),
            ],
          ),

          //* data columns
          for (final item in items)
            TableRow(
              children: <Widget>[
                for (String h in [
                  item.name,
                  item.price.toString(),
                  item.quantity.toString(),
                  item.action
                ])
                  TableCell(
                    child: Container(
                      padding: const EdgeInsets.all(8),
                      child: CustomText(text: h),
                    ),
                  ),
              ],
            ),
        ],
      ),
    );
  }
}

And you will get

enter image description here

More about Table