Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide Text Widget visibility in Flutter on the click of button

Tags:

flutter

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);
});
like image 966
shalini Avatar asked Dec 17 '18 11:12

shalini


People also ask

How to show or hide a widget in flutter?

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.

How to hide listview in flutter?

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.

How to make the text widget containing two visible in WordPress?

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

How to hide the child widget in the app body?

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.


Video Answer


1 Answers

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, 
),
like image 139
Alan John Avatar answered Jan 28 '23 09:01

Alan John