Issue
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,)) ,
),
);
},
),
],
),
),
),
],
),
),
],
),
),
),
),
),
);
}
}
Solution
_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
Answered By – Mittal Varsani
Answer Checked By – Jay B. (FlutterFixes Admin)