Invisibility , Gone , visibility ROW & Column in Flutter - flutter

Question

I use this code in Flutter and i want to Visible/Invisible some Row or column .
In android studio and java we use :
msg.setVisibility(View.INVISIBLE);
but how can use Id for Row and widget in Flutter and invisible/visible widget and Row ?
this is my code :
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home : MyHomePage()
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
body: Column(children: <Widget>[
Row(
//ROW 1
children: [
Container(
color: Colors.lightGreen,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.orange,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
Row(
//ROW 1
children: [
Container(
color: Colors.blueAccent,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
]),
bottomNavigationBar: new Container(
color: Colors.redAccent,
height: 55.0,
alignment: Alignment.center,
child: new BottomAppBar(
color: Colors.blueAccent,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new IconButton(icon: new Icon(Icons.add , color: Colors.black), onPressed: (){ print("helllo"); } ),
new IconButton(icon: new Icon(Icons.remove , color: Colors.black), onPressed: (){ print("helllo"); } ),
],
),
)
),
);
}
}//MyHomePage
I want to use IconButton to visible/invisible two Rows.
how i can?

Answer 1

You could use Visibility like this:
Visibility(
visible: true,
child: Text("Visible"),
),
Visibility(
visible: false,
maintainState: true,
maintainAnimation: true,
maintainSize: true,
child: Text("Invisible"),
),
Visibility(
visible: true,
child: Text("Visible"),
),
Visibility(
visible: false,
child: Text("Gone"),
),
Visibility(
visible: true,
child: Text("Visible"),
),
And this would be the result:
Visible
Visible
Visible

Answer 2

Visible
Android (Kotlin)
linear_layout.visibility = View.VISIBLE
Android (AndroidX)
linear_layout.isVisible = true
or
linear_layout.isInvisible = false
or
linear_layout.isGone = false
Flutter
Row(
children: [
Text(
"Stack Overflow",
),
],
);
or
Visibility(
child: Row(
children: [
Text(
"Stack Overflow",
),
],
),
);
Invisible (not visible but maintain space)
Android (Kotlin)
linear_layout.visibility = View.INVISIBLE
Android (AndroidX)
linear_layout.isInvisible = true
Flutter
Visibility(
maintainSize: true,
visible: false,
child: Row(
children: [
Text(
"Stack Overflow",
),
],
),
);
or (when you know the size)
Container(
height: 300,
child: Row(
children: [
Text(
"Stack Overflow",
),
],
),
);
Gone
Android (Kotlin)
linear_layout.visibility = View.GONE
Android (AndroidX)
linear_layout.isGone = true
or
linear_layout.isVisible = false
Flutter
Visibility(
visible: false,
child: Row(
children: [
Text(
"Stack Overflow",
),
],
),
);

Answer 3

There is a special widget called Visibility. Keep in mind the inversion of state management which is used in Flutter. You invoke setState() and condition for visibility of the widget.
And don't forget to change your Widget to StatefulWidget
Refer to
https://api.flutter.dev/flutter/widgets/Visibility-class.html
Usage:
child: Visibility(
visible: false,
),
Here is the sample which should work in your scenario, it hides the rows on Remove button clicked and shows on add:
class MyHomePage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _WidgetState();
}
}
class _WidgetState extends State<MyHomePage> {
bool visible = true;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: <Widget>[
Visibility(
visible: visible,
child: Row(
//ROW 1
children: [
Container(
color: Colors.lightGreen,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.orange,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
Visibility(
visible: visible,
child: Row(
//ROW 1
children: [
Container(
color: Colors.blueAccent,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
]),
bottomNavigationBar: new Container(
color: Colors.redAccent,
height: 55.0,
alignment: Alignment.center,
child: new BottomAppBar(
color: Colors.blueAccent,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new IconButton(
icon: new Icon(Icons.add, color: Colors.black),
onPressed: () {
print("show");
setState(() {
visible = true;
});
}),
new IconButton(
icon: new Icon(Icons.remove, color: Colors.black),
onPressed: () {
print("hide");
setState(() {
visible = false;
});
}),
],
),
)),
);
}
}

Answer 4

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home : MyHomePage()
);
}
}
class MyHomePage extends StatefulWidget {
#override
State<StatefulWidget> createState() {
return _WidgetState();
}
}
class _WidgetState extends State<MyHomePage> {
bool visible = true;
bool visible1 = true;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: <Widget>[
Visibility(
visible: visible1,
child: Row(
//ROW 1
children: [
Container(
color: Colors.orange,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.orange,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
Visibility(
visible: visible,
child: Row(
//ROW 1
children: [
Container(
color: Colors.green,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
Container(
color: Colors.green,
margin: EdgeInsets.all(25.0),
child: FlutterLogo(
size: 60.0,
),
),
],
),
),
]),
bottomNavigationBar: new Container(
color: Colors.black,
height: 55.0,
alignment: Alignment.center,
child: new BottomAppBar(
color: Colors.blueAccent,
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
new IconButton(
icon: new Icon(Icons.add, color: Colors.black),
onPressed: () {
print("show");
setState(() {
visible1 = true;
});
}),
new IconButton(
icon: new Icon(Icons.remove, color: Colors.black),
onPressed: () {
print("hide");
setState(() {
visible1 = false;
});
}),
],
),
)),
);
}
}

Answer 5

You can wrap your widget with Visibility Widget like this and pass a flag true and false like this.
Visibility(
visible: false,
child: Row(), //pass your own widget here