How to remove specific Row widget on action-CodePudding

How can I remove specific Row in my screen in Flutter Web Page? I have 2 Rows in StatefulWidget "EditForm2". Both rows have Text, TextFormField and also Button to remove whole row. What is a good way to achieve this? I assume that I have to use setstate() method and removeAt() on Row table, but I don't know how to use this. I want to make dynamic form where user can delete and add input controls.

import 'package:flutter/material.dart';

class EditForm2 extends StatefulWidget {
  @override
  _EditForm2State createState() => _EditForm2State();
}

class _EditForm2State extends State<EditForm2> {
  var Rows = <Row>[];

  Row RowFsLink;
  Row RowGeoInfo;
  @override
  Widget build(BuildContext context) {
    ///first Row
    RowFsLink = new Row(children: [
      Expanded(
        flex: 3,
        child: Container(
          margin: const EdgeInsets.only(left: 30.0, right: 30.0),
          child: Text('Link',
              style: TextStyle(
                color: Colors.black54,
                fontSize: 20.0,
                letterSpacing: 0,
                fontWeight: FontWeight.normal,
              )),
        ),
      ),
      Expanded(
          flex: 6,
          child: Container(
              margin: const EdgeInsets.only(right: 30.0),
              child: TextFormField(initialValue: 'test link'))),
      Container(
        margin: const EdgeInsets.only(right: 30.0),
        child: Ink(
          decoration: ShapeDecoration(
            color: Colors.red,
            shape: CircleBorder(),
          ),
          child: IconButton(
            icon: Icon(
              Icons.remove,
              color: Colors.white,
            ),
            onPressed: () {},
          ),
        ),
      ),
    ]);

    Rows.add(RowFsLink);

    ///second Row
    RowGeoInfo = new Row(children: [
      Expanded(
        flex: 3,
        child: Container(
          margin: const EdgeInsets.only(left: 30.0, right: 30.0, bottom: 50),
          child: Text('Geo',
              style: TextStyle(
                color: Colors.black54,
                fontSize: 20.0,
                letterSpacing: 0,
                fontWeight: FontWeight.normal,
              )),
        ),
      ),
      Expanded(
          flex: 6,
          child: Container(
              margin: const EdgeInsets.only(right: 30.0, bottom: 50),
              child: TextFormField(initialValue: '0.50;0.44'))),
      Container(
        margin: const EdgeInsets.only(right: 30.0),
        child: Ink(
          decoration: ShapeDecoration(
            color: Colors.red,
            shape: CircleBorder(),
          ),
          child: IconButton(
            icon: Icon(
              Icons.remove,
              color: Colors.white,
            ),
            onPressed: () {},
          ),
        ),
      ),
    ]);

    Rows.add(RowGeoInfo);

    return Column(children: this.Rows);
  }
}

CodePudding user response：

First declare a bool variable. Inside the onPressed you want to change the variable on click, we wrap it in a setState so that the widgets rebuild themselves.

bool isVisible = false;
 onPressed: () {
                setState(() {
                  isVisible = true;
                });
              },

To hide or show the Row we simply do this.

(isVisible)? Row(children: [],) : Container()

This means that if isVisible = true we show the Row() if its false we show an empty container.

CodePudding user response：

Check the state variable isVisible before calling the Rows.add method:

var _isVisible = true;
...
onPressed: () {
  setState(() {
    _isVisible = false;
  });
},
...

Inside the build method:

if (_isVisible) ? Rows.add(RowGeoInfo);

This will dynamically add / remove the row at each refresh. Everytime you call setState the page is refreshed.