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,)) ,
),
);
},
),
],
),
),
),
],
),
),
],
),
),
),
),
),
);
}
}
_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
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
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.