How to remove specific Row widget on action - flutter

Question

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

Answer 1

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.

Answer 2

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.