如何隐藏 flutter 中的小部件？

Question

I am trying to hide a widget which has List array and List array gets _images.length. For Example, if image.length is Null, like if there are no images so I want to hide the container which takes space.Not sure what I am missing. I tried the code below. Help me out pls, Thanks. or if there is any other way to do it pls let me know. I am just a beginner.

class PortfolioGallarySubPage extends StatefulWidget{



PortfolioGallarySubPage({Key key,@required this.urls,@required this.currentIndex})
  :super(key:key);

@override
_PortfolioGallarySubPage createState() => _PortfolioGallarySubPage();
}

 class _PortfolioGallarySubPage extends State<PortfolioGallarySubPage>
with SingleTickerProviderStateMixin{
final GlobalKey<FormState> formKey = new GlobalKey<FormState>();
final GlobalKey<ScaffoldState> key = new GlobalKey<ScaffoldState>();


List<File> _images = [];


final picker = ImagePicker();
Future getImage() async {
final pickedFile = await picker.getImage(source: ImageSource.gallery);

setState(() {
  if (pickedFile != null) {
    _images.add(File(pickedFile.path));
  }
  else {
    print('No image selected.');
  }
});
  }
   @override
void initState() {
super.initState(); 
}
     @override void dispose() 
 {
super.dispose();

}

  bool isVisible = true;

void changeVisibility(){
setState(() {
  if(_images.length ==null  ){
    isVisible = !isVisible;
  }
});
 } 

@override
Widget build(BuildContext context) {
  
return Scaffold(
  key: key,
  extendBodyBehindAppBar: true,
  appBar: AppBar(
    elevation: 0,
    backgroundColor: Colors.transparent,
    actions: [
      ElevatedButton(
        child: Text("DONE",style: TextStyle(fontSize: 15)),
        onPressed: (){
          _uploadImages();
          },
        style: ElevatedButton.styleFrom(padding: EdgeInsets.fromLTRB(25.0, 15.0, 25.0, 10.0),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(30.0))),
      ),
    ],
  ),
  body: Container(
    width: _maxScreenWidth,
    child: SafeArea(
      child:Form(
        key: formKey,
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [

         Visibility(

                visible: isVisible,

                child: Container(
                  height: 150.0,
                  padding: EdgeInsets.symmetric(vertical: 15.0,horizontal: 15),

                  child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: [

                      SizedBox(width: 15.0),

                      ListView.builder(
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemCount: _images.length,
                        itemBuilder: (BuildContext context,int index){
                          //return Padding(padding: const EdgeInsets.only(top: 0.0,bottom: 0.0),
                          return InkWell(
                            onTap: () => print('tapped'),
                         

                            child: Card(
                              elevation: 10,
                              child: SizedBox(height:150, width: 150,child: Image.file(_images[index], fit: BoxFit.cover,)) ,
                            ),
                          );
                        },
                      ),

                    ],
                  ),
                ),
              ),

                      ],
                    ),
                ),

            ],
          ),
        ),
      ),
    ),
  ),
);
}
 }

Answer 1

_images array length will always return 0 if the list is empty, so you need to set the condition as

setState(() {
    isVisible = _images.length > 0;
});

Instead of taking variable isVisible set the _images.length > 0 like

visible: _images.length > 0

And remove the isVisible variable.... it will update the visibility when _images list is updated

Answer 2

there is another solution of this without using visible widget:

class Mywidget extends StatefulWidget {
  @override
  _MywidgetState createState() => _MywidgetState();
}

class _MywidgetState extends State<Mywidget> {
  double width;
  double heigth;
  void changeVisibility() {
    setState(() {
      if (_images.length == null) {
        width=any width you want ;
        heigth = any height you want ;
      }else{
        setState(() {
          width=0;
          heigth=0;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // the contanier that you want to be visble
    return Container(
      height: heigth,
      width: width,
      // the list view that has the images 
      child: ListView(),
    );
  }
}

if there is an image the height and the width of the widget will be not zero but if not the widget will be visible because the width and the height will be equal to zero

Answer 3

As I can see in the snippet, you are not calling the changeVisibility method anywhere. Hence, isVisible will always remain true

So make a call to changeVisibility wherever you are calling getImage method.

Also, the logic is inherently wrong,

initialize isVisible to false initially, this way you can make it true when there is an image.