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

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