I want to hide a text widget visibility on the click of a button using Visibility widget. How can I achieve this in Flutter? I have created a function which accepts a bool variable which defines the visibility of the Text Widget. On the click of the button, I am calling that function. For the first time, the text is shown to the user. But on the click of the button, the text is not invisible.
//created a method to show and hide the text using visibility widget
hideTextVisibility(bool visibilityStatus){
return visibilityStatus? Visibility(
visible: visibilityStatus,
child: Text("flutter"),
):Container();}
//button click code and for the first time the text will be visible
RaisedButton(onPressed: (){
setState(() {
hideTextVisibility(false);
});
In Flutter, it tends to be done effectively utilizing Visibility a widget. The widget you need to show or hide must be the child of Visibility widget. In the constructor, pass visibility alternative whose value is a boolean and is put away as the state. Then, at that point, update the value to show or hide the child.
In flutter there is a specific widget named as Visibility which is used hide any given child widget using Boolean true false values. We can easily maintain Boolean value using State. Sometimes app developer wants to hide ListView or any other components like Text, Container, TextField etc on button click event.
The Visibility widget is placed in between the two Text widgets and it contains the text ‘ two ‘. The visible parameter in the Visibility widget takes a boolean value as the object and here it is set to true, which make the Text widget containing ‘ two ‘ visible. Example 2: Hiding the child widget by setting the visible parameter as false
Example 2: Hiding the child widget by setting the visible parameter as false Explanation: In this case, the second Text widget in the app body is wrapped with the Visibility widget and its visible parameter is set to false which makes disappear from the screen without leaving the space it had occupied in the previous example.
Step 1:
bool _visible = false;
Step 2:
void _toggle() {
setState(() {
_visible = !_visible;
});
}
Step 3: Add on your RaisedButton or any other button
onPressed: _toggle,
Step 4: Code your widget like this.
Gone: The widget doesn't take any physical space and is completely gone.
Visibility(
child: Text("Gone"),
visible: _visible,
),
Invisible: The widget takes physical space on the screen but not visible to user.
Visibility(
child: Text("Invisible"),
maintainSize: true,
maintainAnimation: true,
maintainState: true,
visible: _visible,
),
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With