Invisibility , Gone , visibility ROW & Column in 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;
                      });
                    }),
              ],
            ),
          )),
    );
  }
}